diverse CSS-Anpassungen für Kalender-iFrame

[Salooja]

/* =========================================================
ChurchTools Kalender – Terminliste (ct-terminliste)
========================================================= */

/* 0) Embedded Hintergrund transparent */
body.embedded,
body.embedded #page {
background-color: transparent !important;
}

/* Typografie an Website angleichen: Sarabun */
body.embedded,
body.embedded #page,
body.embedded table,
body.embedded td,
body.embedded th,
body.embedded a,
body.embedded span,
body.embedded div,
body.embedded input,
body.embedded button,
body.embedded select {
font-family: "Sarabun", system-ui, -apple-system, "Segoe UI",
Roboto, Arial, sans-serif !important;
}

/* 1) NUR in Terminlisten: Header/Filter/Toolbar ausblenden */
body.embedded:has(#cdb_content.ct-terminliste) #cdb_filter,
body.embedded:has(#cdb_content.ct-terminliste) #cdb_toolbar {
display: none !important;
visibility: hidden !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}

/* =========================================================
WICHTIG: Selektor für ALLE Kalenderzeilen (c1, c2, c35, ...)
========================================================= /
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class=" c"] > td > div.flex.justify-between {
justify-content: flex-start !important;
}

/* 3) 2-Spalten-Grid: links Box, rechts Inhalt /
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class=" c"] > td > div.flex.justify-between > div {
display: grid !important;
grid-template-columns: 8.2rem 1fr;
column-gap: 0.9rem;
row-gap: 0.05rem;
align-items: start;
width: 100%;
}

/* 4) Datum/Zeit-Box links (Span!) /
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div > span.event-date,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class=" c"] > td > div.flex.justify-between > div > span.event-date {
grid-column: 1;
grid-row: 1 / span 10;
align-self: start;

display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;

padding: 0.35rem 0.6rem !important;
border-radius: 10px;
background: #12e3db !important;
text-align: center;
white-space: nowrap;
line-height: 1.05 !important;
font-weight: 700 !important;
}

/* Datum /
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div > span.event-date > span.date-date,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class=" c"] > td > div.flex.justify-between > div > span.event-date > span.date-date {
display: block !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
}

/* Separator aus /
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div > span.event-date > span.date-separator,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class=" c"] > td > div.flex.justify-between > div > span.event-date > span.date-separator {
display: none !important;
}

/* Zeit /
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div > span.event-date > span.date-time,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class=" c"] > td > div.flex.justify-between > div > span.event-date > span.date-time {
display: block !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
color: #000 !important;
}

/* Endzeit ausblenden (wenn du sie doch willst: diesen Block löschen) */
body.embedded:has(#cdb_content.ct-terminliste) .date-end {
display: none !important;
}

/* 5) Rechter Inhalt immer in Spalte 2 /
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div > .event-title,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div > .event-address,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div > .event-resources,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div .event-description,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div > .event-calendar,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class=" c"] > td > div.flex.justify-between > div > .event-title,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class*=" c"] > td > div.flex.justify-between > div > .event-address,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class*=" c"] > td > div.flex.justify-between > div > .event-resources,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class*=" c"] > td > div.flex.justify-between > div .event-description,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class*=" c"] > td > div.flex.justify-between > div > .event-calendar {
grid-column: 2;
margin: 0 !important;
display: block;
line-height: 1.2;
}

/* Titel */
body.embedded:has(#cdb_content.ct-terminliste) .event-title {
font-weight: 700;
}

/* Kalendername aus */
body.embedded:has(#cdb_content.ct-terminliste) .event-calendar {
display: none !important;
}

/* Ort / Beschreibung */
body.embedded:has(#cdb_content.ct-terminliste) .event-address,
body.embedded:has(#cdb_content.ct-terminliste) .event-description {
font-size: 0.95rem;
color: #333;
}

/* Ressourcen aus (falls du sie doch willst: diesen Block löschen) */
body.embedded:has(#cdb_content.ct-terminliste) .event-resources {
display: none !important;
}

/* 6) Mobil: untereinander /
@media (max-width: 320px) {
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class=" c"] > td > div.flex.justify-between > div {
grid-template-columns: 1fr;
row-gap: 0.25rem;
}

body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div > span.event-date,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class*=" c"] > td > div.flex.justify-between > div > span.event-date {
grid-column: 1;
grid-row: auto;
width: fit-content;
}

body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div > .event-title,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div > .event-address,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div .event-description,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class^="c"] > td > div.flex.justify-between > div > .event-calendar,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class*=" c"] > td > div.flex.justify-between > div > .event-title,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class*=" c"] > td > div.flex.justify-between > div > .event-address,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class*=" c"] > td > div.flex.justify-between > div .event-description,
body.embedded:has(#cdb_content.ct-terminliste)
tr[class*=" c"] > td > div.flex.justify-between > div > .event-calendar {
grid-column: 1;
}
}