/* ============================================================
   birgit theme — termine.css — Termine template
   Part of the conditional-partial split of the original single
   stylesheet. Rules moved verbatim; cascade preserved via enqueue order.
   ============================================================ */

/* ============================================================
   TERMINE
   ============================================================ */
.termine {
    background: var(--color-cream-50);
    padding: 3.5rem 1.5rem 4rem;
}
.termine__inner {
    max-width: 760px;
    margin: 0 auto;
}
.termine__empty {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-stone-600);
    margin: 0 0 3rem;
}
.termine__heading {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.75rem;
    color: var(--color-navy-800);
    margin: 0 0 1.75rem;
}
.termin-card {
    border-left: 2px solid var(--color-navy-600);
    padding: 2.5rem 1.5rem 2.5rem 1.75rem;
}
.termin-card__tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-navy-800);
    background: var(--color-cream-100);
    padding: 0.35rem 0.7rem;
    margin-bottom: 1rem;
}
.termin-card__time {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-navy-800);
    margin: 0 0 0.4rem;
}
.termin-card__title {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--color-navy-800);
    margin: 0 0 0.4rem;
}
.termin-card__location {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-stone-600);
    margin: 0 0 1.5rem;
}
.termin-card__text {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-stone-800);
    margin: 0 0 1.25rem;
}
.termin-card__costs-label {
    font-family: var(--font-sans);
    font-weight: 500;
    color: var(--color-stone-800);
    margin: 0 0 0.5rem;
}
.termin-card__costs {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-stone-800);
    margin: 0;
    padding-left: 1.25rem;
}
.termine__divider {
    border: 0;
    border-top: 1px solid var(--color-stone-200);
    margin: 2.5rem 0 0;
}
.termine__past-link {
    display: inline-block;
    margin-top: 1.5rem;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-navy-600);
    transition: color 160ms ease;
}
.termine__past-link:hover { color: var(--color-green-600); }

/* ============================================================
   TERMINE TABS  (Excel-worksheet style: one panel visible)
   ============================================================ */
.termine-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: 0 0 2.5rem;
    border-bottom: 2px solid var(--color-cream-200);
}
.termine-tab {
    appearance: none;
    position: relative;
    bottom: -2px;                       /* overlap the strip's bottom border */
    border: 1px solid var(--color-cream-200);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    background: var(--color-cream-100);
    color: var(--color-stone-600);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0.7rem 1.3rem;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.termine-tab:hover {
    background: var(--color-cream-50);
    color: var(--color-navy-800);
}
.termine-tab[aria-selected="true"] {
    background: var(--color-cream-50);
    color: var(--color-navy-800);
    border-bottom: 2px solid var(--color-cream-50);   /* merge into the panel */
}
.termine-tab[aria-selected="true"]::before {        /* green accent on active tab */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--color-green-600);
    border-radius: 6px 6px 0 0;
}
.termine-tab:focus-visible {
    outline: 2px solid var(--color-navy-600);
    outline-offset: 2px;
}

.termine-panel[hidden] { display: none; }

/* Italic empty-state inside a panel (e.g. no upcoming dates yet) */
.termine-panel__empty {
    font-family: var(--font-sans);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-stone-600);
    margin: 0;
}

/* Cards now butt up against each other so the alternating bands read as one
   continuous striped column (spacing is handled by each card's own padding). */
.termin-card + .termin-card { margin-top: 0; }
.termin-card__hours {
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-stone-800);
    margin: 0 0 0.4rem;
}

/* Empty-state message when a tab has no entries */
.termine-empty {
	margin: 0;
	padding: 1.5rem 0;
	text-align: center;
	font-style: italic;
	color: var(--color-navy-800);
	opacity: 0.7;
}

/* ============================================================
   ALTERNATING CREAM BANDS PER ENTRY
   Echoes the light/dark section banding used on Über mich etc.
   The section background is the light cream (--color-cream-50), so odd
   entries (1st, 3rd, …) sit on that light tone untouched. Even entries
   (2nd, 4th, …) get the darker cream as a FULL-WIDTH band: the box-shadow
   paints a huge solid block and clip-path trims it flush top/bottom while
   letting it bleed left/right to the viewport edges — so the card content
   stays in the 760px column but the colour spans edge to edge, matching the
   rest of the site. (html, body have overflow-x: clip, so no sideways
   scrollbar — and clip, unlike hidden, keeps the sticky navbar working.)
   :nth-child resets inside each .termine-panel, so every tab starts its
   count fresh: 1st entry light, 2nd dark, 3rd light, …
   ============================================================ */
.termine-panel .termin-card:nth-child(even) {
    background: var(--color-cream-100);
    box-shadow: 0 0 0 100vmax var(--color-cream-100);
    clip-path: inset(0 -100vmax);
}

/* The category pill is darker cream by default, which would disappear on a
   darker band — flip it to the light cream there so it stays legible. */
.termine-panel .termin-card:nth-child(even) .termin-card__tag {
    background: var(--color-cream-50);
}