/* SC Markdorf - Kalenderansichten (Liste / Monat / Tag)
 *
 * Diese Regeln lagen frueher in der custom.css des Themes. Avadas
 * CSS-Compiler hat sie dort nur teilweise uebernommen - einzelne
 * Regeln kamen nie auf der Seite an. Als eigene Datei im Plugin
 * gehen sie unveraendert an den Browser.
 *
 * Die Farb- und Schrift-Variablen stammen weiter aus der custom.css.
 */

/* ============================================================
   Kalenderansichten  (The Events Calendar, Liste / Monat / Tag)

   TEC bringt eine zurueckhaltende Optik mit duennen Trennlinien.
   Hier bekommt sie die Kartensprache der uebrigen Seite: Flaechen
   statt Linien, Schatten statt Rahmen.

   Wettbewerb, Spieltag, Mannschaft, Anstoss und die Markierung des
   Topspiels kennt TEC nicht - die kommen aus dem Plugin
   (scm_fs_view_meta_html) und haengen an .scm-cal__*.
   ============================================================ */

/* ---- Grundflaeche und TEC-Variablen ---- */

.tribe-events,
.tribe-events-view,
.tribe-common {
  background-color: transparent !important;
}

.tribe-common {
  --tec-font-family-sans-serif: var(--font-body) !important;
  --tec-color-text-primary: var(--color-on-surface) !important;
  --tec-color-text-secondary: var(--color-on-surface-variant) !important;
  --tec-color-accent-primary: var(--color-primary) !important;
  --tec-color-accent-primary-hover: var(--color-primary) !important;
  --tec-color-link-primary: var(--color-primary) !important;
  --tec-color-link-accent: var(--color-primary) !important;
  --tec-color-background-events-bar: transparent !important;
}

.tribe-events .tribe-events-l-container {
  padding-top: 24px !important;
  padding-bottom: 48px !important;
}

/* ============================================================
   Seitenkopf ueber allen drei Ansichten  (scm-calhead)

   Kommt aus dem Plugin. TEC rendert seinen Ansichtswechsler tief in
   der Events-Bar, wo weder Ueberschrift noch Saison-Badge daneben
   passen - deshalb eigene Reiter und TECs eigener Wechsler aus.
   ============================================================ */

.tribe-events .tribe-events-c-view-selector,
.tribe-events .tribe-events-c-events-bar,
.tribe-events-header__events-bar {
  display: none !important;
}

.tribe-events-header {
  background: transparent !important;
  padding: 0 !important;
}

/* Der Kopf steht vor dem Kalendercontainer, nicht darin: beim Blaettern
   tauscht TEC den Inhalt des Containers aus, ein Kopf darin waere jedes
   Mal weg.

   Damit beide fluchten, bekommt er dieselben Masse wie TECs eigener
   .tribe-common-l-container:
     max-width: var(--tec-grid-width)        -> 1176px + 2x42px = 1260px
     padding:   var(--tec-grid-gutter-page-small) -> 19.5px
   Die Variablen stehen auf :root und gelten daher auch hier. */
.scm-calhead {
  display: block;
  width: 100%;
  max-width: var(--tec-grid-width, 1260px);
  margin: 0 auto 22px;
  padding-block: 26px 22px;
  padding-inline: var(--tec-grid-gutter-page-small, 19.5px);
  text-align: left;
}

/* Sicherheitsnetz: taucht beim Blaettern doch ein zweiter Kopf auf,
   bleibt nur der erste stehen. */
.scm-calhead ~ .scm-calhead,
.scm-calhead + .scm-calhead {
  display: none !important;
}

.scm-calhead__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.scm-calhead__crumbs a {
  color: var(--color-on-surface-variant);
  text-decoration: none;
}

.scm-calhead__crumbs a:hover {
  color: var(--color-primary);
}

.scm-calhead__crumbs-current {
  color: var(--color-primary);
}

.scm-calhead__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.scm-calhead__intro {
  flex: 1 1 320px;
  min-width: 0;
}

/* Saison-Badge mit ruhig pulsierendem Punkt */
.scm-calhead__season {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px !important;
  padding: 5px 13px;
  border-radius: var(--radius-full);
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  font-family: var(--font-label) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-primary) !important;
}

.scm-calhead__season-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-primary);
  animation: scm-cal-pulse 2s ease-in-out infinite;
}

.tribe-events .scm-calhead__title,
.scm-calhead__title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-headline) !important;
  font-size: clamp(30px, 5vw, 46px) !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  color: var(--color-on-surface) !important;
}

.scm-calhead__title-accent {
  color: var(--color-primary) !important;
}

/* Der Satz hat rund 115 Zeichen. Bei 60ch bricht er in zwei Zeilen -
   bei 44ch wurden es drei. */
.scm-calhead__lead {
  margin: 10px 0 0 !important;
  max-width: 60ch !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--color-on-surface-variant) !important;
}

@media (max-width: 680px) {
  .scm-calhead__lead {
    max-width: none !important;
  }
}

/* ---- Eigener Umschalter Liste / Monat / Tag ---- */

.scm-calhead__views {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 14px;
  background-color: var(--color-surface-container-high);
  flex: 0 0 auto;
}

.tribe-events .scm-calhead__view,
.scm-calhead__view {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 17px !important;
  border-radius: 10px !important;
  font-family: var(--font-label) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-on-surface-variant) !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.tribe-events .scm-calhead__view:hover,
.scm-calhead__view:hover {
  color: var(--color-on-surface) !important;
}

.tribe-events .scm-calhead__view--active,
.scm-calhead__view--active {
  background-color: var(--color-surface-container-lowest) !important;
  color: var(--color-primary) !important;
  box-shadow: var(--shadow-card) !important;
}

/* ------------------------------------------------------------
   Filter nach Mannschaft

   Die Auswahl laeuft ueber ?tribe_events_cat= und wird von The
   Events Calendar in der Abfrage erledigt - die Pillen sind
   deshalb schlichte Links, kein Formular und kein Skript. Ein
   Klick je Aenderung, dafuer teilbare Adressen und auch ohne
   JavaScript bedienbar.
   ------------------------------------------------------------ */

.scm-calfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-outline-variant);
}

.scm-calfilter__label {
  margin: 0 !important;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  flex: 0 0 auto;
}

.scm-calfilter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tribe-events .scm-calfilter__chip,
.scm-calfilter__chip {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  background-color: var(--color-surface-container-high) !important;
  font-family: var(--font-label) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  color: var(--color-on-surface-variant) !important;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.tribe-events .scm-calfilter__chip:hover,
.scm-calfilter__chip:hover {
  background-color: var(--color-surface-container-highest) !important;
  color: var(--color-primary) !important;
}

.tribe-events .scm-calfilter__chip--on,
.scm-calfilter__chip--on {
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}

.tribe-events .scm-calfilter__chip--on:hover,
.scm-calfilter__chip--on:hover {
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}

/* Zuruecksetzen. Sichtbar anders als die Mannschaftspillen: Es waehlt
   nichts aus, sondern nimmt alles zurueck. Umrandet statt gefuellt, in
   der Textfarbe - es soll auffindbar sein, aber nicht lauter als die
   laufende Auswahl. */
.tribe-events .scm-calfilter__chip--reset,
.scm-calfilter__chip--reset {
  background-color: transparent !important;
  color: var(--color-on-surface) !important;
  box-shadow: inset 0 0 0 1px var(--color-outline-variant);
}

.tribe-events .scm-calfilter__chip--reset:hover,
.scm-calfilter__chip--reset:hover {
  background-color: var(--color-surface-container-high) !important;
  color: var(--color-primary) !important;
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

/* Die Zahl dahinter sagt, wie viele Termine die Mannschaft hat -
   so sieht man vor dem Klick, ob sich der Weg lohnt. */
.scm-calfilter__count {
  font-size: 10px;
  font-weight: 700;
  opacity: 0.65;
}

@media (prefers-reduced-motion: reduce) {
  .scm-calfilter__chip {
    transition: none;
  }
}

@media (max-width: 639px) {
  .scm-calfilter {
    gap: 8px;
  }
  .scm-calfilter__label {
    flex: 1 0 100%;
  }
}

/* ------------------------------------------------------------
   Welche Ansicht laeuft, steht am Container

   Beim Klick auf einen Tag in der Monatsansicht tauscht TEC die
   Ansicht per AJAX aus - ohne Seitenwechsel. Der Kopf steht
   bewusst vor dem Container (sonst waere er nach jedem Blaettern
   weg) und wird dabei nicht neu erzeugt. Die Markierung aus PHP
   zeigte deshalb weiter auf "Monat".

   Die laufende Ansicht steht als Klasse am Container
   (tribe-events-view--day). Ueber :has() am body liest der Kopf
   sie ab - rueckwaerts im Dokument, was ein Nachbar-Selektor
   nicht kann. Die Klasse aus PHP bleibt der Startwert fuer den
   ersten Aufbau und wird hier ueberstimmt.

   :has() ist hier erlaubt: Das Plugin liefert diese Datei direkt
   aus, sie geht nicht durch Avadas CSS-Compiler.
   ------------------------------------------------------------ */

/* Startwert abraeumen, sobald der Container etwas anderes sagt */
body:has(.tribe-events-view--list) .scm-calhead__view--active:not(.scm-calhead__view--list),
body:has(.tribe-events-view--month) .scm-calhead__view--active:not(.scm-calhead__view--month),
body:has(.tribe-events-view--day) .scm-calhead__view--active:not(.scm-calhead__view--day) {
  background-color: transparent !important;
  color: var(--color-on-surface-variant) !important;
  box-shadow: none !important;
}

/* und die laufende Ansicht markieren */
body:has(.tribe-events-view--list) .scm-calhead__view--list,
body:has(.tribe-events-view--month) .scm-calhead__view--month,
body:has(.tribe-events-view--day) .scm-calhead__view--day {
  background-color: var(--color-surface-container-lowest) !important;
  color: var(--color-primary) !important;
  box-shadow: var(--shadow-card) !important;
}

/* Die Legende gehoert zur Monatsansicht. Sie wird serverseitig nur dort
   ausgegeben - nach einem AJAX-Wechsel auf Tag oder Liste steht sie
   deshalb noch da und wird hier ausgeblendet. */
body:has(.tribe-events-view--day) .scm-cal__legend,
body:has(.tribe-events-view--list) .scm-cal__legend {
  display: none !important;
}

/* Symbole als Maske - Avada entfernt eingebettete SVG aus Inhalten */
.scm-calhead__view-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.scm-calhead__view-icon--list {
  -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"%3E%3Cpath d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"%3E%3Cpath d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/%3E%3C/svg%3E');
}

.scm-calhead__view-icon--month {
  -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"%3E%3Crect x="3" y="4" width="18" height="17" rx="2"/%3E%3Cpath d="M3 10h18M9 4v17M15 4v17M3 15h18"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"%3E%3Crect x="3" y="4" width="18" height="17" rx="2"/%3E%3Cpath d="M3 10h18M9 4v17M15 4v17M3 15h18"/%3E%3C/svg%3E');
}

.scm-calhead__view-icon--day {
  -webkit-mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"%3E%3Crect x="3" y="4" width="18" height="17" rx="2"/%3E%3Cpath d="M3 10h18M7 15h10"/%3E%3C/svg%3E');
  mask-image: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round"%3E%3Crect x="3" y="4" width="18" height="17" rx="2"/%3E%3Cpath d="M3 10h18M7 15h10"/%3E%3C/svg%3E');
}

@media (max-width: 640px) {
  .scm-calhead__views {
    width: 100%;
    justify-content: space-between;
  }

  .tribe-events .scm-calhead__view,
  .scm-calhead__view {
    flex: 1 1 0;
    justify-content: center;
    padding: 9px 10px !important;
    letter-spacing: 0.04em !important;
  }
}

/* ============================================================
   Gemeinsame Bausteine aus dem Plugin
   ============================================================ */

.scm-cal__badges {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 0 8px !important;
}

/* Avada setzt Zeilenhoehe und Innenabstand an Inline-Elementen neu -
   ohne !important klebt die Schrift am Pillenrand. */
.scm-cal__badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-label) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
  min-height: 22px !important;
}

/* Weisse Schrift statt --color-on-primary-container: #aacbff auf #0a559b
   ergibt nur 3,4:1 und ist fuer Text dieser Groesse zu wenig. Weiss
   kommt auf 5,9:1. */
.scm-cal__badge--comp {
  background-color: var(--color-primary-container);
  color: #ffffff;
}

.scm-cal__badge--team {
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
}

.scm-cal__badge--home {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Auswaerts bewusst zurueckhaltend: gefuellt wie das Heimspiel waere es
   gleich laut, und auf einer Vereinsseite ist das Heimspiel die Einladung.
   Umrandet statt gefuellt, in der Schriftfarbe des Textes. */
.scm-cal__badge--away {
  background-color: transparent;
  color: var(--color-on-surface-variant);
  box-shadow: inset 0 0 0 1px var(--color-outline-variant);
}

.scm-cal__badge--result {
  background-color: var(--color-on-surface);
  color: var(--color-surface-container-lowest);
  letter-spacing: 0.08em;
}

.scm-cal__badge--top {
  background-color: var(--color-accent-top);
  color: var(--color-on-accent-top);
}

/* "Topspiel des Tages · zuhause" ist die laengste Pille der Zeile. Alle
   anderen bleiben einzeilig; diese darf auf schmalen Schirmen umbrechen,
   sonst schiebt sie die Zeile ueber den Rand. */
@media (max-width: 420px) {
  .scm-cal__badge--top {
    white-space: normal !important;
    text-align: center;
  }
}

/* Farbpunkte je Mannschaftsgruppe */
.scm-cal__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: baseline;
}

.scm-cal__dot--herren1  { background-color: var(--cal-herren1); }
.scm-cal__dot--herren2  { background-color: var(--cal-herren2); }
.scm-cal__dot--junioren { background-color: var(--cal-junioren); }
.scm-cal__dot--verein   { background-color: var(--cal-verein); }

/* Unsichtbare Markierung am Eintrag; die Farbgruppe steht zusaetzlich
   als Klasse am Element selbst (scm-ev--herren1). */
.scm-cal__flag { display: none; }

/* Anstosszeit gross vor dem Titel */
.scm-cal__kickoff {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface-variant);
}

.scm-cal__kickoff-time {
  font-family: var(--font-headline);
  font-size: 19px;
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}

/* ---- Navigationsleiste: Monatsschritte ----

   TEC rendert in der top-bar Zurueck / Heute / Weiter und den
   Datumswaehler. Die Legende steht im Kopf darueber.

   Die Selektoren kommen bewusst ohne vorangestelltes .tribe-events aus:
   beim Blaettern tauscht TEC den Inhalt aus, und die Regeln sollen auch
   danach noch greifen.
   ------------------------------------------------------------- */

/* TEC liefert die Pfeile mit tribe-common-a11y-hidden aus und blendet sie
   erst per JavaScript ein. Nach einem Blaetterschritt kam das neue Markup
   wieder versteckt an - deshalb hier ausdruecklich sichtbar. */
.tribe-events-c-top-bar__nav,
.tribe-events-c-top-bar__nav.tribe-common-a11y-hidden,
.tribe-common .tribe-events-c-top-bar__nav.tribe-common-a11y-hidden {
  display: flex !important;
  visibility: visible !important;
}

.tribe-events-c-top-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 0 18px !important;
  padding: 11px 14px !important;
  border-radius: 14px !important;
  background-color: var(--color-surface-container-lowest) !important;
  box-shadow: var(--shadow-card) !important;
}

.tribe-events-c-top-bar__nav {
  display: flex !important;
  align-items: center !important;
  padding: 3px !important;
  border-radius: 11px !important;
  background-color: var(--color-surface-container-low) !important;
}

.tribe-events-c-top-bar__nav-list {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  margin: 0 !important;
}

.tribe-events-c-top-bar__nav-link {
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 9px !important;
  color: var(--color-on-surface) !important;
  transition: background-color 0.2s ease;
}

.tribe-events-c-top-bar__nav-link:hover {
  background-color: var(--color-surface-container-high) !important;
}

.tribe-events-c-top-bar__today-button {
  padding: 8px 15px !important;
  border-radius: 9px !important;
  font-family: var(--font-label) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-on-surface) !important;
  background: transparent !important;
  border: none !important;
}

.tribe-events-c-top-bar__today-button:hover {
  background-color: var(--color-surface-container-high) !important;
}

/* Monatsname gross daneben */
.tribe-events-c-top-bar__datepicker-button {
  font-family: var(--font-headline) !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-on-surface) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 6px !important;
}

/* ---- Legende ---- */

.scm-cal__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 16px 0 0;
  font-family: var(--font-label);
  font-size: 11px;
}

.scm-cal__legend-label {
  margin-right: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.scm-cal__legend-item {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-weight: 600;
  white-space: nowrap;
}

/* Farben wie in der Vorlage: Punkt kraeftig, Flaeche und Schrift
   gedaempft aus derselben Farbe. */
.scm-cal__legend-item--herren1 {
  background-color: color-mix(in srgb, var(--cal-herren1) 10%, transparent);
  color: var(--cal-herren1-ink);
}

.scm-cal__legend-item--herren2 {
  background-color: color-mix(in srgb, var(--cal-herren2) 10%, transparent);
  color: var(--cal-herren2-ink);
}

.scm-cal__legend-item--junioren {
  background-color: color-mix(in srgb, var(--cal-junioren) 10%, transparent);
  color: var(--cal-junioren-ink);
}

.scm-cal__legend-item--verein {
  background-color: color-mix(in srgb, var(--cal-verein) 12%, transparent);
  color: var(--cal-verein-ink);
}

@media (max-width: 860px) {
  .scm-cal__legend {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .scm-cal__legend::-webkit-scrollbar { display: none; }
}

/* ============================================================
   Listenansicht
   ============================================================ */

.tribe-events-calendar-list__month-separator {
  margin: 34px 0 14px !important;
  border: none !important;
}

.tribe-events-calendar-list__month-separator::after {
  display: none !important;
}

.tribe-events-calendar-list__month-separator-text {
  position: relative !important;
  display: inline-block !important;
  padding-left: 14px !important;
  font-family: var(--font-headline) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  color: var(--color-on-surface) !important;
  background: transparent !important;
}

.tribe-events-calendar-list__month-separator-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 5px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
}

.tribe-events-calendar-list__event-row::after,
.tribe-events-calendar-list__event-row::before {
  display: none !important;
}

/* Titel, Zeit, Ort */
.tribe-events .tribe-events-calendar-list__event-title,
.tribe-events .tribe-events-calendar-day__event-title {
  margin: 0 0 4px !important;
  font-family: var(--font-headline) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

.tribe-events .tribe-events-calendar-list__event-title-link,
.tribe-events .tribe-events-calendar-day__event-title-link {
  color: var(--color-on-surface) !important;
  text-decoration: none !important;
}

.tribe-events .tribe-events-calendar-list__event-title-link:hover,
.tribe-events .tribe-events-calendar-day__event-title-link:hover {
  color: var(--color-primary) !important;
}

.tribe-events .tribe-events-calendar-list__event-datetime,
.tribe-events .tribe-events-calendar-day__event-datetime {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--color-on-surface-variant) !important;
}

.tribe-events .tribe-events-calendar-list__event-venue,
.tribe-events .tribe-events-calendar-day__event-venue {
  margin-top: 2px !important;
  font-size: 13px !important;
  color: var(--color-on-surface-variant) !important;
}

/* ---- Topspiel: Karte hervorgehoben ---- */

/* Farbstreifen am linken Rand, Farbe nach Mannschaftsgruppe */

/* ============================================================
   Monatsansicht: Raster
   ============================================================ */

.tribe-events-calendar-month__header {
  margin-bottom: 8px !important;
}

.tribe-events-calendar-month__header-column {
  padding: 6px 0 !important;
  border: none !important;
}

.tribe-events-calendar-month__header-column-title {
  font-family: var(--font-label) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-on-surface-variant) !important;
}

/* Die Zellen stehen frei nebeneinander, mit schmaler Lucke dazwischen -
   so wirkt jeder Tag wie eine eigene kleine Karte. */
.tribe-events-calendar-month__body {
  background: transparent !important;
  gap: 6px !important;
  border: none !important;
}

.tribe-events-calendar-month__week {
  gap: 6px !important;
  background: transparent !important;
  margin-bottom: 6px !important;
}

/* aspect-ratio muss weg, sonst ist jede Zelle ein Quadrat:

     .tribe-events .tribe-events-calendar-month__day
       { aspect-ratio: 1/1; overflow: hidden }

   TEC hebt das erst in der Desktop-Regel auf, die an
   tribe-common--breakpoint-medium haengt. Fehlt die Klasse, diktiert
   die Breite die Hoehe - height und min-height bleiben wirkungslos,
   und overflow:hidden kappt die Termine mitten im Text. */
.tribe-events-calendar-month__day {
  aspect-ratio: auto !important;
  border: none !important;
  border-radius: 10px !important;
  background-color: var(--color-surface-container-lowest) !important;
  min-height: 118px !important;
  height: auto !important;
  box-shadow: var(--shadow-card) !important;
  overflow: visible !important;
}

/* Die Zeile waechst mit dem vollsten Tag, alle Zellen ziehen mit. */
.tribe-events-calendar-month__week {
  align-items: stretch !important;
}

.tribe-events-calendar-month__day-cell {
  height: auto !important;
  overflow: visible !important;
}

.tribe-events-calendar-month__events {
  overflow: visible !important;
}

/* Vergangene Tage zuruecknehmen.

   Nicht ueber --other-month: das bedeutet bei TEC "anderer Monat als
   heute", nicht "Randtag des Rasters". Beim Blaettern in einen kuenftigen
   Monat trugen es alle 35 Zellen - der ganze Kalender wurde grau. */
/* Eine Stufe dunkler als der Grund der Seite. Beide standen auf
   --color-surface-container-low und waren dadurch nicht zu
   unterscheiden - der vergangene Tag sah aus wie ein Loch im Raster. */
.tribe-events-calendar-month__day--past {
  background-color: var(--color-surface-container) !important;
  box-shadow: none !important;
}

.tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date {
  opacity: 0.45 !important;
}

.tribe-events-calendar-month__day-cell {
  padding: 8px !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.tribe-events-calendar-month__day-date {
  font-family: var(--font-headline) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--color-on-surface-variant) !important;
}

/* ---- Heutiger Tag ----

   Vorher stand hier eine blaue Flaeche hinter schwarzem Text - schwer
   zu lesen. Jetzt bleibt die Flaeche hell; markiert wird mit einem
   blauen Ring und dem blinkenden Punkt aus dem Hero. */

.tribe-events-calendar-month__day--current {
  background-color: var(--color-surface-container-lowest) !important;
  box-shadow: inset 0 0 0 2px var(--color-primary) !important;
}

.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
  position: relative !important;
  color: var(--color-primary) !important;
  font-weight: 800 !important;
}

/* Der blinkende Punkt sitzt rechts oben in der Zelle */
.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-cell::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
  animation: scm-cal-pulse 1.8s ease-in-out infinite;
}

.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-cell {
  position: relative !important;
}

@keyframes scm-cal-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}

@media (prefers-reduced-motion: reduce) {
  .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-cell::after {
    animation: none;
  }
}

/* ---- Eintraege in der Zelle ---- */

/* Eintraege als farbige Kacheln, Farbe nach Mannschaftsgruppe.
   In der Vorlage traegt jede Kachel eine getoente Flaeche statt nur
   einer Textzeile - dadurch bleibt das Raster auch bei mehreren
   Terminen pro Tag lesbar. */

.tribe-events-calendar-month__calendar-event {
  margin-top: 5px !important;
  padding: 7px 9px !important;
  border-radius: 8px !important;
  border: none !important;
  background-color: var(--color-surface-container-low) !important;
}

/* TEC haengt die Kategorie als Klasse an den Artikel
   (tribe_events_cat-herren-1). Die Farbe kommt daher direkt aus dem
   Markup - dafuer braucht es keinen eigenen Hook. */

.tribe-events-calendar-month__calendar-event.tribe_events_cat-herren-1 {
  background-color: color-mix(in srgb, var(--cal-herren1) 11%, transparent) !important;
}

.tribe-events-calendar-month__calendar-event.tribe_events_cat-herren-1 .tribe-events-calendar-month__calendar-event-datetime {
  color: #003e75 !important;
}

.tribe-events-calendar-month__calendar-event.tribe_events_cat-herren-2,
.tribe-events-calendar-month__calendar-event.tribe_events_cat-herren-3 {
  background-color: color-mix(in srgb, var(--cal-herren2) 11%, transparent) !important;
}

.tribe-events-calendar-month__calendar-event.tribe_events_cat-herren-2 .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-calendar-month__calendar-event.tribe_events_cat-herren-3 .tribe-events-calendar-month__calendar-event-datetime {
  color: var(--cal-herren2-ink) !important;
}

.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-a-junioren"],
.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-b-junioren"],
.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-c-junioren"],
.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-d-junioren"],
.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-e-junioren"],
.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-f-junioren"],
.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-g-junioren"] {
  background-color: color-mix(in srgb, var(--cal-junioren) 11%, transparent) !important;
}

.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-a-junioren"] .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-b-junioren"] .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-c-junioren"] .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-d-junioren"] .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-e-junioren"] .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-f-junioren"] .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-calendar-month__calendar-event[class*="tribe_events_cat-g-junioren"] .tribe-events-calendar-month__calendar-event-datetime {
  color: var(--cal-junioren-ink) !important;
}

.tribe-events-calendar-month__calendar-event.tribe_events_cat-feste,
.tribe-events-calendar-month__calendar-event.tribe_events_cat-turniere {
  background-color: color-mix(in srgb, var(--cal-verein) 12%, transparent) !important;
}

.tribe-events-calendar-month__calendar-event.tribe_events_cat-feste .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-calendar-month__calendar-event.tribe_events_cat-turniere .tribe-events-calendar-month__calendar-event-datetime {
  color: var(--cal-verein-ink) !important;
}

.tribe-events-calendar-month__calendar-event-title {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.tribe-events-calendar-month__calendar-event-title-link {
  color: var(--color-on-surface) !important;
}

/* ------------------------------------------------------------
   Heim oder auswaerts in der Monatsansicht

   Dort ist kein Platz fuer ein Wort, deshalb ein Buchstabe vor der
   Uhrzeit: H oder A. Die Klassen scm-ev--home / scm-ev--away setzt
   scm_fs_event_classes() ueber post_class.

   ACHTUNG: Dasselbe Pseudoelement traegt weiter unten schon den
   Farbpunkt der Mannschaftsgruppe (content: ""). Was hier nicht
   ausdruecklich steht, bleibt von dort stehen - daran scheiterte
   die erste Fassung: height blieb bei 7px, der Kasten war 15 x 7
   gross und der Buchstabe lief heraus.

   Deshalb zweierlei: Die Regel setzt jede Eigenschaft selbst, auch
   die, die sie auf den Ausgangswert zuruecksetzt. Und sie nimmt die
   Mannschaftsfarbe mit, die sonst mit dem Punkt verloren ginge -
   gefuellt heisst Heimspiel, umrandet Auswaertsspiel, die Farbe
   nennt weiterhin die Mannschaft.
   ------------------------------------------------------------ */

/* Die Punkt-Regeln setzen die Farbe direkt als background-color und
   sind von hier aus nicht erreichbar. Als Variable am Eintrag steht
   sie beiden zur Verfuegung. */
.tribe-events-calendar-month__calendar-event.scm-ev--herren1 {
  --scm-ev-color: var(--cal-herren1);
  --scm-ev-ink: var(--cal-herren1-ink);
}

.tribe-events-calendar-month__calendar-event.scm-ev--herren2 {
  --scm-ev-color: var(--cal-herren2);
  --scm-ev-ink: var(--cal-herren2-ink);
}

.tribe-events-calendar-month__calendar-event.scm-ev--junioren {
  --scm-ev-color: var(--cal-junioren);
  --scm-ev-ink: var(--cal-junioren-ink);
}

.tribe-events-calendar-month__calendar-event.scm-ev--verein {
  --scm-ev-color: var(--cal-verein);
  --scm-ev-ink: var(--cal-verein-ink);
}

.tribe-events-calendar-month__calendar-event.scm-ev--home .tribe-events-calendar-month__calendar-event-datetime::before,
.tribe-events-calendar-month__calendar-event.scm-ev--away .tribe-events-calendar-month__calendar-event-datetime::before {
  display: inline-block !important;
  box-sizing: border-box !important;
  position: static !important;
  top: auto !important;
  width: 15px !important;
  height: 15px !important;
  margin-right: 6px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  font-family: var(--font-label) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 15px !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-transform: none !important;
  vertical-align: middle !important;
}

.tribe-events-calendar-month__calendar-event.scm-ev--home .tribe-events-calendar-month__calendar-event-datetime::before {
  content: "H" !important;
  background-color: var(--scm-ev-ink, var(--color-primary)) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.tribe-events-calendar-month__calendar-event.scm-ev--away .tribe-events-calendar-month__calendar-event-datetime::before {
  content: "A" !important;
  background-color: transparent !important;
  color: var(--scm-ev-ink, var(--color-on-surface-variant)) !important;
  box-shadow: inset 0 0 0 1px var(--scm-ev-color, var(--color-outline-variant)) !important;
}

/* Vorlesesoftware liest ::before nicht zuverlaessig vor; der Titel nennt
   beide Mannschaften ohnehin, der Buchstabe ist eine Zugabe fuers Auge. */

/* Die Uhrzeit steht als erste Zeile in der Kachel, wie in der Vorlage */
.tribe-events-calendar-month__calendar-event-datetime {
  display: block !important;
  margin-bottom: 1px !important;
  font-family: var(--font-label) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
}

/* Tagesnummer oben links.

   Sie ist bei TEC bereits ein Link in die Tagesansicht, nur als blosse
   Ziffer kaum als solcher zu erkennen. Hier bekommt sie eine eigene
   Flaeche, die beim Darueberfahren blau wird. */

.tribe-events-calendar-month__day-cell {
  display: flex !important;
  flex-direction: column !important;
}

.tribe-events-calendar-month__day-date,
.tribe-events-calendar-month__day-date-daynum {
  font-family: var(--font-headline) !important;
  font-weight: 700 !important;
  color: var(--color-on-surface-variant) !important;
}

.tribe-events-calendar-month__day-date-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 28px !important;
  height: 28px !important;
  padding: 0 6px !important;
  border-radius: 8px !important;
  font-family: var(--font-headline) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--color-on-surface-variant) !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
}

.tribe-events-calendar-month__day-date-link:hover,
.tribe-events-calendar-month__day-date-link:focus-visible {
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
}

/* Am heutigen Tag ist die Ziffer schon blau - beim Darueberfahren
   braucht sie dann helle Schrift auf blauer Flaeche. */
.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link {
  color: var(--color-primary) !important;
}

.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link:hover {
  color: var(--color-on-primary) !important;
}

.tribe-events-calendar-month__multiday-event-bar {
  border-radius: 7px !important;
}

/* ---- Kein Tooltip beim Darueberfahren ----

   TEC haengt an jeden Eintrag ein data-js="tribe-events-tooltip" und
   blendet beim Hover eine Sprechblase mit Datum, Titel und Anrisstext
   ein. Im gedraengten Monatsraster verdeckt sie die Nachbartage.
   Der Eintrag bleibt anklickbar, nur das Popup entfaellt. */

.tribe-events-tooltip-theme,
.tribe-events-tooltip,
.tribe-common .tribe-events-tooltip-theme,
.tribe-events-calendar-month__calendar-event-tooltip-template,
.tribe-events-calendar-month__calendar-event-tooltip,
[id^="tribe-events-tooltip-content"] {
  display: none !important;
}

/* Der Eintrag selbst reagiert nur noch dezent */
.tribe-events-calendar-month__calendar-event:hover {
  filter: brightness(0.97);
}

/* ============================================================
   Tagesansicht

   Die tatsaechliche Struktur, am ausgelieferten HTML abgelesen:

     .tribe-events-calendar-day
       .tribe-events-calendar-day__time-separator
         h2...__time-separator-heading
       article.tribe-events-calendar-day__event        <- die Karte
         .tribe-events-calendar-day__event-content
           .tribe-events-calendar-day__event-details
             header...__event-header
               .scm-cal__badges   (Plugin)
               .scm-cal__kickoff  (Plugin)
               .scm-day__teams    (Plugin)
               h3...__event-title
               ...__event-datetime-wrapper
             ...__event-description

   __event-row und __event-wrapper gibt es hier nicht - darauf
   zielten die ersten Regeln und liefen ins Leere.
   ============================================================ */

.tribe-events-calendar-day {
  position: relative !important;
}

/* Durchgehende Linie hinter den Eintraegen */
.tribe-events-calendar-day::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: var(--radius-full);
  background-color: var(--color-outline-variant);
}

.tribe-events-calendar-day__time-separator,
.tribe-events-calendar-day__event {
  position: relative !important;
  margin-left: 42px !important;
}

/* ---- Uhrzeit-Trenner mit Punkt auf der Linie ---- */

.tribe-events-calendar-day__time-separator {
  border: none !important;
  margin-top: 26px !important;
  margin-bottom: 10px !important;
}

/* ---- Topspiel: roter, pulsierender Punkt ----

   Das Plugin setzt vor den Zeit-Trenner des Topspiels eine leere
   Markierung. Sie selbst bleibt unsichtbar; ueber den
   Geschwister-Selektor faerbt sie den Punkt des folgenden Trenners
   um. So braucht es weder :has() noch ein zweites Element, das sich
   an die richtige Stelle rechnen muesste. */

.scm-day__pulse {
  display: none !important;
}

.scm-day__pulse + .tribe-events-calendar-day__time-separator::before {
  background-color: var(--color-accent-top) !important;
  animation: scm-cal-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .scm-day__pulse + .tribe-events-calendar-day__time-separator::before {
    animation: none;
  }
}

/* Der einzige Punkt auf der Achse sitzt an der Uhrzeit - gefuellt,
   nicht als Ring. */
.tribe-events-calendar-day__time-separator::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  /* Linie: left 9px, 2px breit -> Mitte bei 10px.
     Der Trenner beginnt bei 42px, der Punkt ist 16px breit:
     42 + (-40) + 8 = 10. */
  left: -40px !important;
  top: 50% !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 0 !important;
  max-width: 16px !important;
  margin: -8px 0 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  background-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px var(--color-background) !important;
}

.tribe-events-calendar-day__time-separator::after {
  display: none !important;
}

.tribe-events-calendar-day__time-separator-heading {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-headline) !important;
  font-size: 23px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-on-surface) !important;
  background: transparent !important;
}

/* ---- Der Eintrag als Karte ---- */

/* TECs Grid-Spalten ruecken den Inhalt nach rechts ein; in der Karte
   soll er an der linken Kante beginnen. */
.tribe-events-calendar-day__event > .tribe-events-calendar-day__event-content,
.tribe-events-calendar-day__event .tribe-events-calendar-day__event-details {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.tribe-events-calendar-day__event {
  display: block !important;
  margin-bottom: 12px !important;
  padding: 14px 18px !important;
  border: none !important;
  border-radius: 14px !important;
  background-color: var(--color-surface-container-lowest) !important;
  box-shadow: var(--shadow-card) !important;
  transition: var(--card-transition) !important;
}

.tribe-events-calendar-day__event:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px);
}

/* An der Karte selbst sitzt kein Punkt - einer je Uhrzeit genuegt. */

/* ---- Was TEC rendert und hier nicht gebraucht wird ----

   Titel, Datumszeile und Ort stehen bereits in der Paarung. Der
   Vorbericht entfaellt bei den uebrigen Spielen und erscheint nur in
   der Topspiel-Karte - die anderen sollen flach bleiben. */

.tribe-events-calendar-day__event.scm-ev .tribe-events-calendar-day__event-title,
.tribe-events-calendar-day__event.scm-ev .tribe-events-calendar-day__event-datetime-wrapper,
.tribe-events-calendar-day__event.scm-ev .tribe-events-calendar-day__event-venue,
.tribe-events-calendar-day__event.scm-ev .tribe-events-calendar-day__event-description,
.tribe-events-calendar-day__event .tribe-events-calendar-day__event-description,
.tribe-events-calendar-day__event .tribe-events-calendar-day__event-description p {
  display: none !important;
}

/* ---- Die Paarung ---- */

.scm-day__teams {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 16px !important;
  margin-top: 10px !important;
}

/* Beim Topspiel darf es grosszuegiger sein */
.scm-ev--top .scm-day__teams {
  gap: 22px !important;
  margin-top: 16px !important;
}

.scm-day__team {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

/* Das Gastteam spiegelverkehrt, damit beide zum VS zeigen */
.scm-day__team:last-of-type {
  flex-direction: row-reverse;
  text-align: right;
}

/* Avada gibt Bildern in Inhalten eigene Masse - daher !important,
   sonst stehen die Wappen in Originalgroesse im Weg. */
.scm-day__crest {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 6px !important;
  border-radius: 12px !important;
  background-color: var(--color-surface-container) !important;
  font-family: var(--font-headline) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--color-primary) !important;
  overflow: hidden !important;
}

.scm-day__crest img {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
}

.scm-day__names {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.scm-day__name {
  font-family: var(--font-headline) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--color-on-surface) !important;
}

.scm-day__role {
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-on-surface-variant);
}

.scm-day__vs {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  background-color: var(--color-surface-container);
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.scm-day__venue {
  margin: 10px 0 0 !important;
  padding-top: 10px;
  border-top: 1px solid var(--color-outline-variant);
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: var(--color-on-surface-variant) !important;
}

/* ---- Topspiel des Tages ---- */

/* ---- Topspiel: groesser ---- */

.tribe-events-calendar-day__event.scm-ev--top {
  padding: 24px 26px !important;
  box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-hover) !important;
}

.tribe-events-calendar-day__event.scm-ev--top .scm-day__crest,
.tribe-events-calendar-list__event.scm-ev--top .scm-day__crest {
  flex: 0 0 64px !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 14px !important;
}

.tribe-events-calendar-day__event.scm-ev--top .scm-day__name,
.tribe-events-calendar-list__event.scm-ev--top .scm-day__name {
  font-size: 22px !important;
}

.tribe-events-calendar-day__event.scm-ev--top .scm-day__role,
.tribe-events-calendar-list__event.scm-ev--top .scm-day__role {
  font-size: 13px !important;
}

.tribe-events-calendar-day__event.scm-ev--top .scm-day__vs,
.tribe-events-calendar-list__event.scm-ev--top .scm-day__vs {
  width: 52px !important;
  height: 52px !important;
  font-size: 12px !important;
}

.tribe-events-calendar-day__event.scm-ev--top .scm-cal__kickoff-time,
.tribe-events-calendar-list__event.scm-ev--top .scm-cal__kickoff-time {
  font-size: 24px !important;
}

/* Der Vorbericht steht auf der Detailseite, nicht in der Karte - auch
   nicht beim Topspiel. Das hebt sich ueber Groesse und Rahmen genug ab. */
.tribe-events-calendar-day__event .tribe-events-calendar-day__event-description,
.tribe-events-calendar-day__event.scm-ev--top .tribe-events-calendar-day__event-description,
.tribe-events-calendar-day__event-description {
  display: none !important;
}

.scm-cal__badge--top {
  background-color: var(--color-accent-top) !important;
  color: var(--color-on-accent-top) !important;
}

@media (max-width: 680px) {
  .tribe-events-calendar-day__time-separator,
  .tribe-events-calendar-day__event {
    margin-left: 30px !important;
  }

  /* Mobil: Linienmitte bei 6px, Trenner beginnt bei 30px:
     30 + (-32) + 8 = 6. */
  .tribe-events-calendar-day::before { left: 5px; }

  .tribe-events-calendar-day__time-separator::before { left: -32px !important; }

  .scm-day__teams {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .scm-day__team:last-of-type {
    flex-direction: row;
    text-align: left;
  }

  .scm-day__vs { width: 34px; height: 34px; }
}

/* ============================================================
   Mobil
   ============================================================ */

@media (max-width: 782px) {
  .tribe-events-calendar-month__day {
    min-height: 62px !important;
  }

  .scm-cal__legend {
    font-size: 11px;
    gap: 6px 12px;
  }
}

@media (max-width: 560px) {
  .tribe-events-calendar-list__event-date-tag-datetime {
    min-width: 54px !important;
    padding: 9px 6px !important;
  }

  .tribe-events-calendar-list__event-wrapper {
    padding: 13px 15px !important;
  }

  /* Vorher klebte die Schrift am Pillenrand */
  .scm-cal__badge {
    font-size: 9px;
    padding: 4px 10px;
  }

}

/* ============================================================
   Kalender: untere Navigation und Abo-Schaltflaeche

   Beide standen noch im TEC-Standard: duenne Links und ein
   hellblauer Vollbreite-Knopf.
   ============================================================ */

.tribe-events-c-nav {
  margin-top: 18px !important;
  padding: 12px 14px !important;
  border: none !important;
  border-radius: 14px !important;
  background-color: var(--color-surface-container-lowest) !important;
  box-shadow: var(--shadow-card) !important;
}

.tribe-events-c-nav__list {
  align-items: center !important;
}

.tribe-events-c-nav__prev,
.tribe-events-c-nav__next,
.tribe-events-c-nav__today {
  padding: 8px 16px !important;
  border-radius: 9px !important;
  font-family: var(--font-label) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--color-on-surface) !important;
  background: transparent !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

.tribe-events-c-nav__prev:hover,
.tribe-events-c-nav__next:hover,
.tribe-events-c-nav__today:hover {
  background-color: var(--color-surface-container-high) !important;
  color: var(--color-primary) !important;
}

.tribe-events-c-nav__prev-icon-svg,
.tribe-events-c-nav__next-icon-svg {
  color: var(--color-primary) !important;
}

.tribe-events-c-nav__prev--disabled,
.tribe-events-c-nav__next--disabled {
  opacity: 0.35 !important;
}

/* ---- Kalender abonnieren ---- */

.tribe-events-c-subscribe-dropdown {
  margin-top: 16px !important;
}

/* Die beiden Klassen sitzen am selben Element
   (class="tribe-common-c-btn-border tribe-events-c-subscribe-dropdown__button"),
   deshalb ohne Leerzeichen verknuepft - mit Leerzeichen suchte die Regel
   einen Nachfahren und der Knopf blieb im TEC-Hellblau. */
.tribe-events-c-subscribe-dropdown__button,
.tribe-events-c-subscribe-dropdown__button.tribe-common-c-btn-border,
.tribe-common .tribe-events-c-subscribe-dropdown__button {
  border: none !important;
  border-radius: var(--radius-full) !important;
  background-color: var(--color-primary) !important;
  box-shadow: var(--shadow-card) !important;
  transition: background-color 0.2s ease !important;
}

.tribe-events-c-subscribe-dropdown__button:hover,
.tribe-events-c-subscribe-dropdown__button--active {
  background-color: var(--color-primary) !important;
  filter: brightness(1.12) !important;
}

.tribe-events-c-subscribe-dropdown__button-text,
.tribe-events-c-subscribe-dropdown__button-text.tribe-common-c-btn--clear {
  padding: 11px 26px !important;
  font-family: var(--font-label) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--color-on-primary) !important;
  border: none !important;
}

.tribe-events-c-subscribe-dropdown__button-icon,
.tribe-events-c-subscribe-dropdown__button-icon-svg {
  color: var(--color-on-primary) !important;
}

/* Das aufgeklappte Menue */
.tribe-events-c-subscribe-dropdown__content {
  border: none !important;
  border-radius: 12px !important;
  background-color: var(--color-surface-container-lowest) !important;
  box-shadow: var(--shadow-hover) !important;
  overflow: hidden !important;
}

.tribe-events-c-subscribe-dropdown__list-item {
  border: none !important;
}

.tribe-events-c-subscribe-dropdown__list-item-link {
  padding: 11px 16px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--color-on-surface) !important;
}

.tribe-events-c-subscribe-dropdown__list-item:hover .tribe-events-c-subscribe-dropdown__list-item-link {
  background-color: var(--color-surface-container-high) !important;
  color: var(--color-primary) !important;
}

/* ============================================================
   Monatseintraege: Punkt wie in der Legende

   Die getoente Flaeche allein laesst sich schwer einer Legenden-
   zeile zuordnen. Derselbe Punkt wie dort macht die Zuordnung
   eindeutig - er sitzt vor der Uhrzeit.
   ============================================================ */

.tribe-events-calendar-month__calendar-event-datetime::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background-color: var(--cal-verein);
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.tribe_events_cat-herren-1 .tribe-events-calendar-month__calendar-event-datetime::before {
  background-color: var(--cal-herren1);
}

.tribe_events_cat-herren-2 .tribe-events-calendar-month__calendar-event-datetime::before,
.tribe_events_cat-herren-3 .tribe-events-calendar-month__calendar-event-datetime::before {
  background-color: var(--cal-herren2);
}

[class*="tribe_events_cat-a-junioren"] .tribe-events-calendar-month__calendar-event-datetime::before,
[class*="tribe_events_cat-b-junioren"] .tribe-events-calendar-month__calendar-event-datetime::before,
[class*="tribe_events_cat-c-junioren"] .tribe-events-calendar-month__calendar-event-datetime::before,
[class*="tribe_events_cat-d-junioren"] .tribe-events-calendar-month__calendar-event-datetime::before,
[class*="tribe_events_cat-e-junioren"] .tribe-events-calendar-month__calendar-event-datetime::before,
[class*="tribe_events_cat-f-junioren"] .tribe-events-calendar-month__calendar-event-datetime::before,
[class*="tribe_events_cat-g-junioren"] .tribe-events-calendar-month__calendar-event-datetime::before {
  background-color: var(--cal-junioren);
}

/* Termine ohne Mannschaft - Feste, Turniere, Versammlungen und
   Heimspiele, denen der Sync noch keine Mannschaft gegeben hat. */
.tribe-events-calendar-month__calendar-event.tribe_events_cat-feste,
.tribe-events-calendar-month__calendar-event.tribe_events_cat-turniere {
  background-color: color-mix(in srgb, var(--cal-verein) 12%, transparent) !important;
}

.tribe-events-calendar-month__calendar-event.tribe_events_cat-feste .tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-calendar-month__calendar-event.tribe_events_cat-turniere .tribe-events-calendar-month__calendar-event-datetime {
  color: var(--cal-verein-ink) !important;
}

/* Auf vergangenen Tagen liegt ein grauer Grund - die Kacheln bleiben
   dort weiss, damit sie sich abheben. */
.tribe-events-calendar-month__day--past .tribe-events-calendar-month__calendar-event {
  background-color: var(--color-surface-container-lowest) !important;
}

/* ============================================================
   Monatsansicht: Desktop-Zellen erzwingen

   TEC haengt seine gesamte Desktop-Darstellung an die Klasse
   tribe-common--breakpoint-medium, die es per JavaScript anhand
   der Containerbreite setzt - im ausgelieferten HTML steht sie
   nie. Bleibt sie aus (etwa nachdem beim Blaettern der Inhalt
   ausgetauscht wurde), faellt die Monatsansicht in ihre mobile
   Form zurueck: in den Zellen stehen dann nur noch blaue Punkte
   statt der Termine.

   Ab Tablet-Breite wird die Desktop-Form deshalb unabhaengig vom
   JavaScript gesetzt. Darunter bleibt TECs Mobilverhalten.
   ============================================================ */

@media (min-width: 768px) {
  .tribe-events .tribe-events-calendar-month__day-cell--mobile {
    display: none !important;
    visibility: hidden !important;
  }

  .tribe-events .tribe-events-calendar-month__day-cell--desktop {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    position: static !important;
  }

  /* Die mobilen Punkte unter der Tageszahl */
  .tribe-events .tribe-events-calendar-month__mobile-events-icon,
  .tribe-events .tribe-events-calendar-month__mobile-events-icon--event,
  .tribe-events .tribe-events-calendar-month__mobile-events-icon--featured {
    display: none !important;
  }

  /* Die Terminliste, die TEC mobil unter den Kalender haengt */
  .tribe-events .tribe-events-calendar-month-mobile-events {
    display: none !important;
  }

  /* Ohne die Breakpoint-Klasse bleiben die Zellen flach - die Hoehe
     kommt sonst aus TECs Desktop-Regeln. Als Mindestmass, damit sie
     bei mehreren Terminen weiter mitwachsen. */
  .tribe-events .tribe-events-calendar-month__day {
    aspect-ratio: auto !important;
    min-height: 118px !important;
    height: auto !important;
    overflow: visible !important;
  }

  .tribe-events .tribe-events-calendar-month__day-cell--desktop {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ============================================================
   Hinweis zu den Reitern

   Beim Klick auf einen Tag im Monatsraster tauscht TEC nur den
   Kalendercontainer aus; der Kopf steht davor und behaelt seine
   Markierung. Zu loesen waere das mit

     #content:has(.tribe-events-view--day) .scm-calhead__view--day

   Avadas CSS-Compiler kann :has() aber nicht lesen - er bricht dort
   ab und verwirft alles Folgende. Die Markierung kommt deshalb vom
   Server und stimmt beim Seitenaufruf; nach einem Wechsel per Klick
   auf einen Tag bleibt sie auf der vorigen Ansicht stehen.
   ============================================================ */

/* ============================================================
   Listenansicht nach Vorlage

   Aufbau je Eintrag:
     Badge-Zeile (Wettbewerb, Mannschaft, Heimspiel, Topspiel)
     und rechts der Hinweis, wie lange es noch dauert
     Datumskachel links, daneben die Paarung mit Wappen
     Ortszeile darunter

   Die Paarung und die Hinweise kommen aus dem Plugin, TEC liefert
   Datumskachel, Titel und Zeitangabe.
   ============================================================ */

/* TECs Grid-Spalten ruecken den Inhalt ein - in der Karte nicht gewollt */
.tribe-events-calendar-list__event-wrapper .tribe-events-calendar-list__event,
.tribe-events-calendar-list__event-wrapper .tribe-events-calendar-list__event-details {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Titel, Zeitangabe und Ort stehen in der Paarung.

   Wichtig: TEC haengt post_class an das <article> und an die
   Datumskachel, nicht an das <li>. Selektoren auf
   .__event-row.scm-ev greifen deshalb ins Leere. */
.tribe-events-calendar-list__event.scm-ev .tribe-events-calendar-list__event-title,
.tribe-events-calendar-list__event.scm-ev .tribe-events-calendar-list__event-datetime-wrapper,
.tribe-events-calendar-list__event.scm-ev .tribe-events-calendar-list__event-venue,
.tribe-events-calendar-list__event .tribe-events-calendar-list__event-description,
.tribe-events-calendar-list__event-description {
  display: none !important;
}

/* TEC blendet die Beschreibung mit hoher Spezifitaet wieder ein:

     .tribe-common--breakpoint-medium.tribe-events
       .tribe-events-calendar-list__event-description
       { display: block !important }

   Bei gleichem !important gewinnt der spezifischere Selektor, deshalb
   hier derselbe Aufbau plus eine Klasse mehr. */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event .tribe-events-calendar-list__event-description,
.tribe-common.tribe-events .tribe-events-calendar-list__event-description,
.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-description {
  display: none !important;
  visibility: hidden !important;
}

/* Der Karteninhalt ist derselbe wie in der Tagesansicht: Badges, die
   grosse Anstoszeit, Wappen, Namen, vs und Ortszeile - alles aus
   denselben Regeln. Vorne steht zusaetzlich das Datum. */
.tribe-events-calendar-list__event .scm-cal__kickoff {
  display: block !important;
  margin-top: 4px !important;
}

/* In der Kachel steht nur Wochentag und Tag; die Uhrzeit waere dort
   eine zweite Angabe derselben Sache. */
.scm-list__time {
  display: none !important;
}

/* ---- Hinweis rechts in der Badge-Zeile ---- */

.scm-cal__badges {
  position: relative !important;
}

.scm-cal__when {
  margin-left: auto !important;
  padding-left: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--color-on-surface-variant) !important;
  white-space: nowrap !important;
}

/* ---- Ergebnis statt vs ---- */

.scm-day__result {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 74px !important;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  background-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  text-align: center !important;
}

.scm-day__result strong {
  font-family: var(--font-headline) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: var(--color-on-primary) !important;
  letter-spacing: 0.02em !important;
}

.scm-day__result span {
  margin-top: 1px !important;
  font-family: var(--font-label) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--color-on-primary) !important;
  opacity: 0.85 !important;
}

/* ---- Datumskachel: Uhrzeit ergaenzen ---- */

.tribe-events-calendar-list__event-date-tag-datetime {
  gap: 1px !important;
}

@media (max-width: 680px) {
  .tribe-events-calendar-list__event .scm-day__teams {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .tribe-events-calendar-list__event .scm-day__team:last-of-type {
    flex-direction: row !important;
    text-align: left !important;
  }

  .scm-cal__when {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
  }
}

/* ============================================================
   Die Karte fuehrt zum Termin

   TECs Titel ist der eigentliche Link, steht hier aber nicht mehr
   sichtbar. Stattdessen legt das Plugin eine leere Flaeche ueber die
   Karte. Sie liegt ueber dem Inhalt - angeklickt wird ohnehin nichts
   anderes.
   ============================================================ */

.scm-day__link {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: block !important;
  border-radius: inherit !important;
  background: transparent !important;
  text-decoration: none !important;
}

.tribe-events-calendar-day__event,
.tribe-events-calendar-list__event-wrapper {
  position: relative !important;
  cursor: pointer;
}

/* Beim Darueberfahren hebt sich die Karte wie gehabt, zusaetzlich
   faerbt sich der Heimteam-Name. */
.tribe-events-calendar-day__event:hover .scm-day__team:first-of-type .scm-day__name,
.tribe-events-calendar-list__event-wrapper:hover .scm-day__team:first-of-type .scm-day__name {
  color: var(--color-primary) !important;
}

/* Tastaturbedienung sichtbar machen */
.scm-day__link:focus-visible {
  outline: 3px solid var(--color-primary) !important;
  outline-offset: 3px !important;
}

/* ============================================================
   Grundton der Kalenderseiten

   Die Karten tragen keinen Rand mehr - abheben sollen sie sich
   ueber die Flaeche, wie auf den uebrigen Seiten: weisse Kacheln
   auf leicht getoentem Grund.

   Der Ton sitzt am #main, nicht am Kalendercontainer: So liegen
   Kopf, Filter, Legende und Kalender auf derselben Flaeche, und
   sie laeuft von Fensterkante zu Fensterkante.

   --color-background ist derselbe Ton wie im unteren Teil der
   Spiel-Detailseite. Er muss heller bleiben als die vergangenen
   Tage der Monatsansicht, sonst verschwinden die im Grund.

   post-type-archive-tribe_events traegt jede Kalenderansicht -
   Liste, Tag, Monat und das Kategorie-Archiv. Einzelne Termine
   haben ihre eigene Vorlage und sind nicht betroffen.
   ============================================================ */

body.post-type-archive-tribe_events #main {
  background-color: var(--color-background) !important;
}

/* ============================================================
   Listenansicht: Zeile als Karte

   TEC baut je Eintrag zwei Grid-Spalten:
     li.__event-row
       div.__event-date-tag   (Wochentag, Tag, dazu unsere Uhrzeit)
       div.__event-wrapper    (Badges, Paarung, Ort)

   In der Vorlage sitzt die Datumskachel innerhalb der Karte. Deshalb
   traegt hier die Zeile selbst das Weiss und den Schatten, und die
   Kachel wird zur grauen Flaeche darin.
   ============================================================ */

.tribe-events-calendar-list__event-row {
  display: flex !important;
  align-items: stretch !important;
  gap: 16px !important;
  margin-bottom: 14px !important;
  padding: 16px 18px !important;
  border-radius: 14px !important;
  background-color: var(--color-surface-container-lowest) !important;
  box-shadow: var(--shadow-card) !important;
  transition: var(--card-transition) !important;
}

/* Beim Topspiel ist der Rahmen roetlich wie die Datumskachel.
   Die Markierung sitzt an der Datumskachel, dem ersten Kind. In der breiten
   Darstellung zeichnet ein ::before am <article> den blauen Rahmen um beide;
   gestapelt uebernimmt das ein :has() an der Zeile (siehe unten). */
.tribe-events-calendar-list__event-date-tag.scm-ev--top {
  box-shadow: 0 0 0 2px var(--color-accent-top) !important;
}

.tribe-events-calendar-list__event-row:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px);
}

/* Der Wrapper traegt die Karte nicht mehr - das tut die Zeile */
.tribe-events-calendar-list__event-wrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.tribe-events-calendar-list__event-row:hover .tribe-events-calendar-list__event-wrapper {
  box-shadow: none !important;
  transform: none !important;
}

/* ---- Datumskachel ---- */

.tribe-events-calendar-list__event-date-tag {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 92px !important;
  min-width: 92px !important;
  padding: 14px 12px !important;
  border-radius: 12px !important;
  background-color: var(--color-surface-container-low) !important;
  align-self: stretch !important;
}

.tribe-events-calendar-list__event-date-tag-datetime {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.tribe-events-calendar-list__event-date-tag-weekday {
  font-family: var(--font-label) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-on-surface-variant) !important;
}

.tribe-events-calendar-list__event-date-tag-daynum {
  font-family: var(--font-headline) !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: var(--color-on-surface) !important;
}

.scm-list__time {
  display: block !important;
  margin-top: 2px !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--color-on-surface-variant) !important;
  text-align: center !important;
}

/* ---- Topspiel: blauer Rahmen um die ganze Zeile ----

   Die Markierung sitzt am <article> und an der Datumskachel, nicht am
   <li>, das die Karte bildet. Der Rahmen wird deshalb als Pseudo-Element
   am article gezeichnet und nach aussen aufgezogen:

     links  18 (Innenabstand der Zeile) + 92 (Kachel) + 16 (Abstand) = 126
     rechts 18, oben und unten je 16

   Ueber :has() waere es direkter, das vertraegt Avadas Compiler aber
   nicht. */

.tribe-events-calendar-list__event.scm-ev--top::before {
  content: "" !important;
  position: absolute !important;
  /* Schmale Darstellung: TEC stapelt Datumskachel und Karte untereinander.
     Der Rahmen umschliesst dann genau die Karte. Negativwerte wuerden ihn
     oben ueber die Datumskachel und links aus dem Container schieben. */
  inset: 0 !important;
  border: 2px solid var(--color-primary) !important;
  border-radius: 14px !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* Breite Darstellung: Datumskachel und Karte stehen nebeneinander, der
   Rahmen greift ueber die Spalte hinweg und fasst beide ein. Die 126px sind
   ihre Breite. Die Klasse setzt TECs JavaScript - fehlt sie, gilt oben die
   schmale Fassung. */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event.scm-ev--top::before {
  top: -16px !important;
  right: -18px !important;
  bottom: -16px !important;
  left: -126px !important;
}

.tribe-events-calendar-list__event.scm-ev--top {
  position: relative !important;
}

/* Beim Topspiel faerbt sich der Wochentag. Die Markierung sitzt an der
   Datumskachel selbst. */
.tribe-events-calendar-list__event-date-tag.scm-ev--top .tribe-events-calendar-list__event-date-tag-weekday,
.tribe-events-calendar-list__event-date-tag.scm-ev--top .scm-list__time {
  color: var(--color-accent-top) !important;
}

.tribe-events-calendar-list__event-date-tag.scm-ev--top {
  background-color: color-mix(in srgb, var(--color-accent-top) 10%, transparent) !important;
}

/* ---- Monatstrenner mit Anzahl ---- */

.tribe-events-calendar-list__month-separator {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
}

@media (max-width: 680px) {
  .tribe-events-calendar-list__event-row {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .tribe-events-calendar-list__event-date-tag {
    flex-direction: row !important;
    gap: 10px !important;
    min-width: 0 !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .tribe-events-calendar-list__event-date-tag-datetime {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 8px !important;
  }

  .tribe-events-calendar-list__event-date-tag-daynum {
    font-size: 22px !important;
  }

  .scm-list__time { margin-top: 0 !important; }

  /* Karte auf volle Breite.
     Gestapelt nimmt die Datumskachel die ganze Zeile, das <article>
     darunter aber nicht: TECs Raster gibt ihm als .tribe-common-g-row
     negative Seitenraender, die Spalte darin traegt den Ausgleich als
     Innenabstand. Dadurch sitzt die Karte schmaler als die Kachel - und der
     Rahmen des Topspiels, der auf dem <article> liegt, zeigt genau das. */
  .tribe-events-calendar-list__event-wrapper,
  .tribe-events-calendar-list__event {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .tribe-events-calendar-list__event-details {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Rahmen des Topspiels auf die Zeile statt auf das <article>.
     Gestapelt umschliesst das ::before am <article> nur die Karte, und der
     Ortstext in der letzten Zeile stand ueber dessen Unterkante. Ein
     box-shadow an der Zeile folgt dagegen immer genau deren Rand - es gibt
     keine Werte, die danebenliegen koennen, und Datumskachel und Karte
     stehen gemeinsam darin wie in der breiten Darstellung.

     :has() ist hier erlaubt: diese Datei liefert das Plugin direkt aus,
     sie laeuft nicht durch Avadas CSS-Compiler. post_class landet am
     <article> und an der Datumskachel, nicht an der Zeile - ohne :has()
     kaeme man an die Zeile nicht heran. */
  .tribe-events-calendar-list__event-row:has(.scm-ev--top) {
    box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-card) !important;
  }

  .tribe-events-calendar-list__event.scm-ev--top::before {
    display: none !important;
  }
}