/* Kalender und Auswahl teilen sich einen Container in der Breite, die das Theme für breite Blöcke vorgibt. Der Ersatzwert greift bei klassischen Themes, die kein theme.json mitbringen und die Variable nicht setzen. */ .tt-termine-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; max-width: var(--wp--style--global--wide-size, 1240px); margin-left: auto; margin-right: auto; } .tt-termine-layout__main { flex: 1 1 420px; min-width: 0; } .tt-termine-layout__side { flex: 0 0 280px; text-align: left; padding-top: var(--tec-spacer-13, 96px); } /* Schmalerer rechter Seitenrand als der Standard von The Events Calendar (dort var(--tec-grid-gutter-page)); der linke bleibt unveraendert. */ .tribe-common--breakpoint-medium.tribe-common .tribe-common-l-container { padding-right: 32px; } /* In der Listenansicht bekommen die Termindetails 7 von 8 Rasterspalten (Standard von The Events Calendar: 5 von 8). Neben der Auswahlspalte bliebe sonst rechts ungenutzter Platz. */ .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-list__event-details { width: calc(var(--tec-grid-width-1-of-8) * 7); } .tt-filter__set { border: 0; margin: 0; padding: 0; } .tt-filter__details + .tt-filter__details { margin-top: 22px; } .tt-filter__titel { font-weight: 600; cursor: pointer; padding: 0 0 10px 0; } .tt-filter__gewaehlt { opacity: .6; font-weight: 400; font-variant-numeric: tabular-nums; } .tt-filter__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .tt-filter__liste { list-style: none; margin: 0; padding: 0; } /* Verschachtelte Listen ruecken ein, damit zu sehen ist, was unter der Oberkategorie haengt. Der Einzug richtet sich am Kaestchen darueber aus. */ .tt-filter__liste .tt-filter__liste { margin-left: 22px; } /* Die Oberkategorie steht als Sammeleintrag ueber ihrem Ast. */ .tt-filter__liste > .tt-filter__eintrag > .tt-filter__label > .tt-filter__name { font-weight: 600; } .tt-filter__liste .tt-filter__liste .tt-filter__label > .tt-filter__name { font-weight: 400; } .tt-filter__eintrag { margin: 0; } .tt-filter__label { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; } .tt-filter__name { flex: 1 1 auto; } .tt-filter__anzahl { flex: none; opacity: .6; font-size: .85em; font-variant-numeric: tabular-nums; } .tt-filter__reset { display: inline-block; margin-top: 10px; font-size: .9em; } .tt-filter__hinweis { margin: 8px 0 0 0; font-size: .85em; opacity: .7; } /* Media Queries zuletzt: sie erhoehen die Spezifitaet nicht, gewinnen also nur ueber die Reihenfolge gegen die Basisregeln darueber. */ /* Schmale Bildschirme: Auswahl über den Kalender, volle Breite, ohne Einzug. */ @media (max-width: 782px) { .tt-termine-layout__side { order: -1; flex-basis: 100%; padding-top: 0; padding-left: 16px; padding-right: 16px; } .tt-termine-layout { gap: 16px; } /* Die Auswahl steht auf schmalen Bildschirmen ueber dem Kalender; dessen Innenabstand nach oben schoebe ihn zusaetzlich nach unten. Beide Selektoren, weil The Events Calendar seine Breakpoint-Klasse nach der Breite des Containers vergibt, nicht nach der des Fensters. */ .tribe-events .tribe-events-l-container, .tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container { padding-top: 0; } /* Zugeklappt stehen die Gruppen dicht genug beieinander. */ .tt-filter__details + .tt-filter__details { margin-top: 0; } } /* Ab Tablet aufwaerts ist die Liste immer offen: kein Pfeil, kein Klickziel. */ @media (min-width: 783px) { .tt-filter__titel { cursor: default; pointer-events: none; list-style: none; } .tt-filter__titel::-webkit-details-marker { display: none; } }