/* Forms liefert Schrift, Farben, Karten, Schatten und Bewegungen unverändert. */
.calendar-shell { padding-top: calc(28px + env(safe-area-inset-top)); padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.calendar-eyebrow { margin: 0 0 13px; font-size: 10px; letter-spacing: .17em; font-weight: 650; color: var(--muted); }
.calendar-header h1 { margin: 0; font-size: clamp(29px, 4.5vw, 44px); line-height: 1.12; letter-spacing: -.055em; font-weight: 550; }
.calendar-header h1 { margin-bottom: 27px; }
.calendar-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Ein sichtbarer Wert je Filter; native Auswahl mit eigenem, eingerücktem Chevron. */
.calendar-filters { display: grid; grid-template-columns: 1.1fr .8fr 1.2fr; gap: 10px; max-width: 440px; margin-inline: auto; }
.calendar-filters label { position: relative; display: block; min-width: 0; border-radius: 14px; background: linear-gradient(135deg, #f8f8f8, #eeeeef); box-shadow: inset 0 1px 0 #fff, 2px 3px 7px #00000006; }
.calendar-filters label::after { content: ""; position: absolute; right: 16px; top: 18px; width: 6px; height: 6px; border-right: 1.5px solid #666; border-bottom: 1.5px solid #666; transform: rotate(45deg); pointer-events: none; }
.calendar-filters select { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 44px; border: 0; background: transparent; font-size: 12px; font-weight: 500; cursor: pointer; padding: 0 35px 0 14px; border-radius: 14px; text-overflow: ellipsis; }
.calendar-filters select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: none; }
.calendar-resultbar { min-height: 69px; display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 11px; color: var(--muted); }
.calendar-resultbar button { min-height: 44px; padding: 8px 0 8px 12px; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.calendar-list { align-items: start; grid-template-columns: minmax(0, 1fr); }
.calendar-card { animation: appear var(--motion-gentle) var(--ease); }
.calendar-card .event-image { aspect-ratio: auto; background: #eee; }
.calendar-card .event-image img { width: 100%; height: auto; object-fit: contain; filter: none; }
.calendar-card .event-image::after { content: none; }
.calendar-cover-fallback { position: relative; isolation: isolate; overflow: hidden; min-height: 230px; padding: clamp(24px, 5vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 20px; color: #fff8ed; background: linear-gradient(135deg, #283c45, #658b87); }
.calendar-cover-fallback[hidden], .calendar-card .event-image > img[hidden] { display: none; }
.calendar-cover-fallback::before { content: ""; position: absolute; z-index: -1; width: 85%; aspect-ratio: 1; right: -30%; top: -45%; border: 36px solid #ffffff12; border-radius: 50%; box-shadow: 0 0 0 35px #ffffff09, 0 0 0 70px #ffffff07; transform: rotate(-20deg); }
.cover-tone-1 { background: linear-gradient(135deg, #583543, #b37474); }
.cover-tone-2 { background: linear-gradient(135deg, #4c4166, #8f86a8); }
.cover-tone-3 { background: linear-gradient(135deg, #554d36, #a9976d); }
.calendar-cover-fallback p { margin: 0; }
.cover-date { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.cover-title { max-width: 22ch; font-size: clamp(26px, 4vw, 40px); font-weight: 550; line-height: 1.15; letter-spacing: -.035em; overflow-wrap: anywhere; }
.cover-city { font-size: 13px; opacity: .85; }
.calendar-card .event-copy { padding: 21px 17px 4px; }
.calendar-date { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 16px; font-weight: 650; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.calendar-date svg { width: 22px; height: 22px; stroke-width: 1.6; }
.calendar-card h2 { margin: 0; }
.calendar-subtitle { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.calendar-location { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.calendar-location svg { width: 22px; height: 22px; margin-top: 0; }
.calendar-styles { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 18px; color: #646464; font-size: 12px; line-height: 1.5; }
.calendar-styles > .dance-icon { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.calendar-styles p { min-height: 22px; align-items: center; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; }
.calendar-jj { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 0; border-radius: 10px; margin: 0 0 18px; background: linear-gradient(135deg, #f8f4e9 0%, #f1eadb 52%, #e9dfc9 100%); box-shadow: 0 3px 7px rgba(109, 88, 48, .13), 0 1px 2px rgba(109, 88, 48, .06), inset 0 1px 0 rgba(255, 255, 255, .8); color: #685537; font-size: 11px; font-weight: 550; }
.calendar-jj svg { width: 22px; height: 22px; stroke-width: 1.5; }
.calendar-jj small { font-size: 9px; font-weight: 500; padding-left: 4px; color: #796649; }
.calendar-links { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 3vw, 24px); margin: 0 17px; padding: 3px 0 8px; border-top: 1px solid var(--line); list-style: none; }
.calendar-links li { min-width: 0; }
.calendar-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; border-radius: 7px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.calendar-links .link-icon { width: 22px; height: 22px; stroke-width: 1.6; }
.calendar-links a:hover { color: var(--muted); }
.calendar-page .dock-top span { font-size: 17px; letter-spacing: 1px; }
.calendar-page .forms-menu-links [aria-current="page"] { color: var(--ink); }
.calendar-page dialog.forms-menu { height: fit-content; max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - 20px - env(safe-area-inset-bottom)); }
.calendar-page .forms-menu .google-review { margin-top: 4px; }
.calendar-menu-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; flex-shrink: 0; }
.calendar-menu-language { display: flex; justify-content: center; align-items: center; font-size: 15px; font-weight: 650; width: 44px; height: 44px; border-radius: 50%; background: #f5f5f5; color: var(--muted); }
.calendar-menu-home { display: inline-flex; justify-self: center; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 8px; border-radius: 12px; font-size: 17px; font-weight: 600; }
.calendar-menu-header svg { width: 20px; height: 20px; stroke-width: 1.6; }
.calendar-menu-header .menu-close { align-self: center; }
.calendar-menu-language:hover { color: var(--ink); }
.calendar-empty { padding: 34px 16px 44px; text-align: center; }
.calendar-empty h2 { font-size: 21px; letter-spacing: -.035em; font-weight: 550; }
.calendar-empty p { color: var(--muted); font-size: 13px; max-width: 45ch; margin: 15px auto; }
.calendar-empty button { min-height: 44px; border-radius: 22px; background: var(--ink); color: white; padding: 9px 18px; font-size: 12px; }
.calendar-footer { margin-top: 49px; color: var(--muted); font-size: 11px; text-align: center; }
.calendar-footer p { margin: 5px 0; }
.calendar-footer div { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 13px 0; }
.calendar-footer a { min-height: 44px; display: inline-flex; align-items: center; gap: 5px; text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 700px) {
  .calendar-filters { gap: 12px; }
  .calendar-filters select { font-size: 13px; }
  .calendar-header { padding-top: 8px; }
  .calendar-card .event-copy { padding: 23px 20px 4px; }
  .calendar-links { margin: 0 20px; }
}
@media (max-width: 360px) {
  .calendar-filters { gap: 6px; grid-template-columns: minmax(0, 1.1fr) minmax(74px, .8fr) minmax(0, 1.2fr); }
  .calendar-filters select { padding-left: 11px; padding-right: 28px; }
  .calendar-filters label::after { right: 13px; }
  .calendar-header h1 { font-size: 27px; }
  .calendar-links { gap: 8px; }
  .calendar-links a { gap: 4px; font-size: 10px; }
}

/* Große Tablets im Hochformat behalten die volle Kartenbreite. */
@media (min-width: 1000px) and (orientation: landscape) {
  .calendar-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.calendar-header { text-align: center; }