.ctcal { container-type: inline-size; min-width: 0; }
.ctcal * { box-sizing: border-box; }
.ctcal [hidden] { display: none !important; }

/* ---------- Terminliste ---------- */
.ctcal__list { list-style: none; margin: 0; padding: 0; }

.ctcal__item {
    display: grid;
    grid-template-columns: minmax(3.6rem, max-content) minmax(0, 1fr); /* Datum waechst mit, Titel kann nicht ueberlaufen */
    gap: 0.9rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}
.ctcal__item:last-child { border-bottom: 0; }
.ctcal__item.is-past { opacity: 0.6; }

.ctcal__date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 0.3rem 0 0.6rem;
    border-left: 3px solid var(--ctcal-accent, currentColor);
    line-height: 1.1;
}
.ctcal__day { font-size: 1.45rem; font-weight: 700; white-space: nowrap; }
.ctcal__month { font-size: 0.85rem; opacity: 0.75; white-space: nowrap; }

.ctcal__body { min-width: 0; }

/* Titel: Template-Vorgaben fuer Ueberschriften bewusst uebersteuern */
.ctcal .ctcal__title {
    margin: 0 0 0.15rem;
    padding: 0;
    font-family: inherit;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: normal;
    text-transform: none;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.ctcal--t-s .ctcal__title { font-size: 0.9rem; }
.ctcal--t-m .ctcal__title { font-size: 1rem; }
.ctcal--t-l .ctcal__title { font-size: 1.2rem; }

.ctcal__subtitle,
.ctcal__description { margin: 0.2rem 0 0; overflow-wrap: anywhere; }
.ctcal__description { opacity: 0.85; }

.ctcal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.9rem;
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
    overflow-wrap: anywhere;
}

.ctcal__empty { margin: 0; opacity: 0.8; }

/* ---------- Kalender: Leiste, Pulldown, Umschalter, Filter ---------- */
.ctcal__grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0 0 1rem;
}
.ctcal__grid th {
    padding: 0.25rem 0;
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
    opacity: 0.75;
}
.ctcal__cell {
    height: 4.5rem;
    padding: 0.2rem;
    vertical-align: top;
    border: 1px solid rgba(128, 128, 128, 0.3);
    overflow: hidden;
}
.ctcal__cell.is-empty { background: rgba(128, 128, 128, 0.07); }
.ctcal__num { display: inline-block; min-width: 1.5em; font-size: 0.8rem; text-align: center; }
.ctcal__cell.is-today .ctcal__num { outline: 2px solid currentColor; border-radius: 999px; font-weight: 700; }

.ctcal__chips { list-style: none; margin: 0.15rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ctcal__chip {
    min-width: 0;
    padding: 0 0.3rem;
    border-left: 3px solid var(--ctcal-accent, currentColor);
    border-radius: 0 0.25rem 0.25rem 0;
    background: rgba(128, 128, 128, 0.12);
    font-size: 0.72rem;
    line-height: 1.35;
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .ctcal__chip { background: color-mix(in srgb, var(--ctcal-accent, gray) 20%, transparent); }
}
.ctcal__chip.is-past { opacity: 0.55; }
.ctcal__chiptext {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    color: inherit;
}

/* Schmale Module (z. B. Seitenleiste): nur farbige Punkte, Details in der Terminliste darunter */
@container (max-width: 34rem) {
    .ctcal__cell { height: 2.8rem; text-align: center; }
    .ctcal__chips { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.3rem; }
    .ctcal__chip {
        position: relative;
        width: 0.6rem;
        height: 0.6rem;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--ctcal-accent, currentColor);
    }
    /* Der (fuer Screenreader weiter vorhandene) Titel-Link deckt den Punkt ab und ist etwas groesser als er */
    .ctcal__chiptext {
        position: absolute;
        inset: -0.15rem;
        overflow: hidden;
        text-indent: -999px;
        white-space: nowrap;
    }
    .ctcal__grid + .ctcal__list { margin-top: 0.5rem; }
    .ctcal__kw { padding-top: 0.15rem; }
}

/* Sehr schmal: Datumsblock der Liste verkleinern */
@container (max-width: 16rem) {
    .ctcal__item { grid-template-columns: minmax(2.8rem, max-content) minmax(0, 1fr); gap: 0.6rem; }
    .ctcal__day { font-size: 1.25rem; }
}

/* ---------- Kalender: Leiste, Pulldown, Umschalter, Filter ---------- */
.ctcal__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.ctcal__navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid rgba(128, 128, 128, 0.4);
    text-decoration: none;
    font-size: 1.2rem;
    line-height: 1;
}
.ctcal__navbtn.is-disabled { opacity: 0.3; }

.ctcal__picker { position: relative; min-width: 0; }
.ctcal__monthlabel {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.ctcal__monthlabel::-webkit-details-marker { display: none; }
.ctcal__monthlabel:hover,
.ctcal__picker[open] > .ctcal__monthlabel { background: rgba(128, 128, 128, 0.15); }
.ctcal__caret { font-size: 0.8em; opacity: 0.7; transition: transform 0.15s; }
.ctcal__picker[open] .ctcal__caret { transform: rotate(180deg); }

.ctcal__pop {
    position: absolute;
    z-index: 30;
    top: calc(100% + 0.3rem);
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    max-width: 90vw;
    padding: 0.6rem;
    border: 1px solid rgba(128, 128, 128, 0.45);
    border-radius: 0.5rem;
    background: Canvas;
    color: CanvasText;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.ctcal__popyear { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
.ctcal__popyear a,
.ctcal__popyear .is-disabled { padding: 0.1rem 0.6rem; text-decoration: none; font-size: 1.1rem; }
.ctcal__popgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; }
.ctcal__popgrid a,
.ctcal__popgrid .is-disabled {
    display: block;
    padding: 0.35rem 0.2rem;
    border-radius: 0.35rem;
    text-align: center;
    text-decoration: none;
}
.ctcal__popgrid a:hover { background: rgba(128, 128, 128, 0.18); }
.ctcal__popgrid a.is-current { font-weight: 700; outline: 2px solid currentColor; }
.ctcal__popgrid .is-disabled,
.ctcal__popyear .is-disabled { opacity: 0.3; }

.ctcal__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 0.8rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}
.ctcal__scales { display: inline-flex; border: 1px solid rgba(128, 128, 128, 0.4); border-radius: 999px; overflow: hidden; }
.ctcal__scales a { padding: 0.2rem 0.7rem; text-decoration: none; }
.ctcal__scales a + a { border-left: 1px solid rgba(128, 128, 128, 0.4); }
.ctcal__scales a:hover { background: rgba(128, 128, 128, 0.12); }
.ctcal__scales a.is-active { background: rgba(128, 128, 128, 0.28); font-weight: 700; cursor: default; }

.ctcal__cats { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; }
.ctcal__cat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    border: 1px solid rgba(128, 128, 128, 0.45);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
.ctcal__dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--ctcal-accent, currentColor); }
.ctcal__cat.is-off { opacity: 0.5; text-decoration: line-through; }
.ctcal__cat.is-off .ctcal__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--ctcal-accent, currentColor); }

/* ---------- Monat: Wochenzahlen ---------- */
.ctcal__grid.has-kw { table-layout: fixed; }
.ctcal__kwh,
.ctcal__kw { width: 2rem; font-size: 0.7rem; font-weight: 400; text-align: center; opacity: 0.6; }
.ctcal__kw { vertical-align: top; padding-top: 0.35rem; border: 0; }

/* ---------- Woche ---------- */
.ctcal__week { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.4rem; margin-bottom: 1rem; }
.ctcal__wday { min-width: 0; padding: 0.4rem 0.5rem; border: 1px solid rgba(128, 128, 128, 0.3); border-radius: 0.4rem; }
.ctcal__wday.is-today { outline: 2px solid currentColor; }
.ctcal__dayhead { display: flex; gap: 0.4rem; align-items: baseline; margin-bottom: 0.3rem; font-size: 0.85rem; }
.ctcal__dayname { font-weight: 700; }
.ctcal__daydate { opacity: 0.7; }
.ctcal__devents { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.ctcal__devent {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0.2rem 0.4rem 0.2rem 0.5rem;
    border-left: 3px solid var(--ctcal-accent, currentColor);
    border-radius: 0 0.3rem 0.3rem 0;
    background: rgba(128, 128, 128, 0.12);
    font-size: 0.85rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .ctcal__devent { background: color-mix(in srgb, var(--ctcal-accent, gray) 20%, transparent); }
}
.ctcal__devent.is-past { opacity: 0.55; }
.ctcal__dwhen { opacity: 0.75; font-size: 0.8rem; }
.ctcal__dtitle { font-weight: 600; }
.ctcal__dloc { opacity: 0.75; font-size: 0.8rem; }
.ctcal__dnone { margin: 0; opacity: 0.35; }

/* ---------- Jahr (zwoelf grosse Monatsraster) ---------- */
.ctcal__year { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem 1.6rem; margin-bottom: 1rem; }
.ctcal__ymonth { min-width: 0; container-type: inline-size; }
.ctcal__ymonthname { display: block; margin-bottom: 0.3rem; font-size: 1.05rem; font-weight: 700; text-decoration: none; }
.ctcal--s-year .ctcal__grid { margin-bottom: 0; }
.ctcal--s-year .ctcal__cell { height: auto; min-height: 3.4rem; }
a.ctcal__num { text-decoration: none; font-weight: 700; }

/* ---------- iCal ---------- */
.ctcal__ical { list-style: none; margin: 0.5rem 0 0; padding: 0; font-size: 0.85rem; }
.ctcal__icalfile { margin-left: 0.3rem; opacity: 0.7; }

/* ---------- Breiten-abhaengiges Layout ---------- */
@container (min-width: 46rem) {
    .ctcal__week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@container (min-width: 72rem) {
    .ctcal__year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Titel als Link zur Detailansicht ---------- */
.ctcal a[data-ev] { cursor: pointer; }

/* ---------- Detail-Fenster (ausserhalb von .ctcal, im Body) ---------- */
.ctcal-dlg {
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 1px solid rgba(128, 128, 128, 0.5);
    border-radius: 0.7rem;
    background: Canvas;
    color: CanvasText;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    overflow: auto;
}
.ctcal-dlg::backdrop { background: rgba(0, 0, 0, 0.5); }
.ctcal-dlg__box { position: relative; padding: 1.2rem 1.3rem 1.3rem; border-top: 6px solid var(--ctcal-accent, currentColor); }
.ctcal-dlg__close {
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.ctcal-dlg__close:hover { background: rgba(128, 128, 128, 0.2); }
.ctcal-dlg__img { display: block; width: 100%; max-height: 14rem; margin: 0 0 0.8rem; object-fit: cover; border-radius: 0.4rem; }
.ctcal-dlg__title { margin: 0 2rem 0.2rem 0; font: inherit; font-size: 1.25rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; text-transform: none; letter-spacing: normal; }
.ctcal-dlg__sub { margin: 0 0 0.6rem; opacity: 0.8; overflow-wrap: anywhere; }
.ctcal-dlg__list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1rem; margin: 0.8rem 0; }
.ctcal-dlg__list dt { margin: 0; font-weight: 600; opacity: 0.7; }
.ctcal-dlg__list dd { margin: 0; overflow-wrap: anywhere; }
.ctcal-dlg__dot { display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: 0.4rem; border-radius: 50%; background: var(--ctcal-accent, currentColor); }
.ctcal-dlg__desc { margin: 0.8rem 0 0; padding-top: 0.8rem; border-top: 1px solid rgba(128, 128, 128, 0.3); white-space: pre-line; overflow-wrap: anywhere; }
.ctcal-dlg__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.ctcal-dlg__btn {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(128, 128, 128, 0.6);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}
.ctcal-dlg__btn:hover { background: rgba(128, 128, 128, 0.18); }

/* ---------- Tages-Popup (schmale Kalender) ---------- */
.ctcal-dlg__daylist { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.ctcal-dlg__dayitem {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-left: 4px solid var(--ctcal-accent, currentColor);
    border-radius: 0.4rem;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.ctcal-dlg__dayitem:hover { background: rgba(128, 128, 128, 0.15); }
.ctcal-dlg__daytime { font-size: 0.85rem; opacity: 0.75; }
.ctcal__cell[data-day] { cursor: default; }
@container (max-width: 34rem) {
    .ctcal__cell[data-day]:has(.ctcal__chip) { cursor: pointer; }
}

/* ---------- Naechste Termine (kompakt) ---------- */
.ctcal__nextcard {
    margin-bottom: 0.7rem;
    padding: 0.7rem 0.9rem;
    border-left: 4px solid var(--ctcal-accent, currentColor);
    border-radius: 0 0.4rem 0.4rem 0;
    background: rgba(128, 128, 128, 0.12);
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
    .ctcal__nextcard { background: color-mix(in srgb, var(--ctcal-accent, gray) 18%, transparent); }
}
.ctcal__nextlabel { margin: 0 0 0.15rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
.ctcal .ctcal__nexttitle { font-size: 1.15rem; }
.ctcal__nextwhen { margin: 0.25rem 0 0; font-weight: 600; }
.ctcal__nextloc { margin: 0.1rem 0 0; opacity: 0.8; overflow-wrap: anywhere; }

.ctcal__nextlist { list-style: none; margin: 0; padding: 0; }
.ctcal__nextitem {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 0 0.8rem;
    padding: 0.35rem 0 0.35rem 0.6rem;
    border-left: 3px solid var(--ctcal-accent, currentColor);
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    font-size: 0.92rem;
}
.ctcal__nextitem:last-child { border-bottom: 0; }
.ctcal__nextdate { font-weight: 700; white-space: nowrap; }
.ctcal__nexttime { grid-column: 1; font-size: 0.82rem; opacity: 0.75; white-space: nowrap; }
.ctcal__nextname { grid-column: 2; grid-row: 1 / span 2; align-self: center; overflow-wrap: anywhere; }
.ctcal__nextitem:not(:has(.ctcal__nexttime)) .ctcal__nextname { grid-row: 1; }
.ctcal__alllink { margin: 0.8rem 0 0; }
.ctcal__allbtn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid currentColor;
    border-radius: 0.4rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}
.ctcal__allbtn:hover, .ctcal__allbtn:focus-visible { background: color-mix(in srgb, currentColor 10%, transparent); }
.ctcal__filternote { margin: 0 0 0.6rem; font-size: 0.9rem; }
.ctcal__nextwrap { display: grid; gap: 0.6rem; }
@container (min-width: 30rem) {
    .ctcal__nextwrap { grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); gap: 0 1.5rem; align-items: start; }
}
@container (min-width: 52rem) {
    .ctcal__nextwrap .ctcal__nextlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
    .ctcal__nextwrap .ctcal__nextitem:last-child { border-bottom: 1px solid rgba(128, 128, 128, 0.2); }
}
.ctcal__diag { margin-bottom: 0.6rem; font-size: 0.85rem; }

@container (max-width: 22rem) {
    .ctcal__nextitem { grid-template-columns: minmax(0, 1fr); }
    .ctcal__nextname, .ctcal__nexttime { grid-column: 1; grid-row: auto; }
}