/* Turnierkarte im Kalender (2026-10-16). Discbase-Look: entsättigte Karte mit Marineblau-Schleier, Pins mit Datum und
   Bronze-Scheibe, Status-Farben wie in der Liste (Live pulsierend, Anmeldung offen grün, geplant blau, beendet grau). */
.cm-toggle { display: inline-flex; margin-left: auto; padding: 4px; gap: 4px; border-radius: 12px; background: rgba(238,241,244,.08);
  border: 1px solid var(--fd-hero-line); }
.cm-toggle button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 9px;
  background: transparent; color: var(--fd-hero-slate); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; touch-action: manipulation;
  transition: background-color .2s, color .2s; }
.cm-toggle button[aria-pressed="true"] { background: var(--fd-hero-ink); color: var(--fd-hero-bg); }
@media (hover: hover) and (pointer: fine) { .cm-toggle button[aria-pressed="false"]:hover { color: var(--fd-hero-ink); } }
.cm-toggle button:focus-visible { outline: 3px solid var(--fd-signal-glow); outline-offset: 2px; }

.cm { margin: 28px 0 40px; }
.cm-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.cm-side { display: flex; flex-direction: column; min-height: 0; height: min(76vh, 760px); }
.cm-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 2px 12px; }
.cm-count { font-weight: 700; color: var(--fd-ink); }
.cm-near { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--fd-line);
  background: var(--fd-paper); color: var(--fd-ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; touch-action: manipulation; }
.cm-near.is-on { border-color: var(--fd-flare); color: var(--fd-flare); }
.cm-near.is-busy i { animation: cm-spin 1s linear infinite; }
@keyframes cm-spin { to { transform: rotate(360deg); } }
.cm-past { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; min-height: 34px; margin: 0 2px 12px; padding: 0 12px;
  border-radius: 99px; border: 1px dashed var(--fd-line); background: transparent; color: var(--fd-slate); font: inherit; font-weight: 700;
  font-size: 13px; cursor: pointer; touch-action: manipulation; transition: border-color .2s, color .2s, background-color .2s; }
.cm-past[hidden], .cm-legend span[hidden] { display: none; }
.cm-past.is-on { border-style: solid; background: var(--fd-paper-inset); color: var(--fd-ink); }
@media (hover: hover) and (pointer: fine) { .cm-past:hover { border-color: var(--fd-signal); color: var(--fd-ink); } }
.cm-past:focus-visible, .cm-near:focus-visible, .cm-fit:focus-visible { outline: 3px solid var(--fd-focus); outline-offset: 2px; }
.cm-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 2px 4px 12px 2px; overscroll-behavior: contain; }
.cm-empty { color: var(--fd-slate); padding: 24px 4px; }
.cm-note { margin: 10px 2px 0; font-size: 13px; color: var(--fd-slate); }

.cm-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--fd-line); background: var(--fd-paper);
  color: var(--fd-ink); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
@media (hover: hover) and (pointer: fine) { .cm-card:hover { border-color: var(--fd-signal); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(26,38,54,.12); } }
.cm-card.is-selected { border-color: var(--fd-flare); box-shadow: 0 0 0 2px var(--fd-flare-soft); }
.cm-card:focus-visible { outline: 3px solid var(--fd-focus); outline-offset: 2px; }
.cm-card-date { flex: none; width: 56px; height: 60px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--fd-hero-bg); color: var(--fd-hero-ink); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; }
.cm-card-date b { font-family: 'Big Shoulders', 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: 0; }
.cm-card-date.is-live { background: var(--fd-signal); }
.cm-card-date.is-open { box-shadow: inset 0 -5px 0 var(--fd-signal); }
.cm-card-date.is-past { background: var(--fd-paper-inset); color: var(--fd-slate); }
.cm-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cm-card-name { font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.cm-card-meta { font-size: 13px; color: var(--fd-slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.cm-tag { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px;
  background: var(--fd-paper-inset); color: var(--fd-ink-soft); }
.cm-tag.is-live { background: var(--fd-signal); color: #fff; }
.cm-tag.is-open { background: var(--fd-signal-soft); color: var(--fd-signal); }
.cm-tag.is-km { background: var(--fd-flare-soft); color: var(--fd-flare); }
.cm-card-go { flex: none; color: var(--fd-slate); }

/* Karte */
.cm-stage { position: relative; min-width: 0; height: min(76vh, 760px); border-radius: 22px; overflow: hidden; background: #1a2636;
  box-shadow: 0 18px 50px rgba(15,24,34,.22); isolation: isolate; }
.cm-map { position: absolute; inset: 0; background: #1a2636; }
.cm-map .leaflet-tile-pane { filter: grayscale(.85) sepia(.25) hue-rotate(115deg) saturate(.55) brightness(1.04) contrast(.95); }
.cm-stage::after { content: ''; position: absolute; inset: 0; z-index: 401; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(26,38,54,0) 55%, rgba(26,38,54,.28) 100%), linear-gradient(180deg, rgba(77,125,114,.10), rgba(26,38,54,.06)); }
:root[data-theme="dark"] .cm-map .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) grayscale(.55) brightness(.82) contrast(.92) saturate(.7); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cm-map .leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) grayscale(.55) brightness(.82) contrast(.92) saturate(.7); } }
.cm .cm-map .leaflet-control-attribution { background: rgba(26,38,54,.78); color: #c9d3dc; font-size: 10px; border-top-left-radius: 8px; }
.cm .cm-map .leaflet-control-attribution a { color: #dff0ea; }
.cm-map .leaflet-control-zoom { border: 0; box-shadow: 0 4px 14px rgba(0,0,0,.25); border-radius: 12px; overflow: hidden; margin: 0 16px 16px 0; }
.cm-map .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; background: #1a2636; color: #eef1f4; border-color: rgba(238,241,244,.12); }
.cm-fit { position: absolute; z-index: 500; right: 16px; top: 16px; width: 44px; height: 44px; border-radius: 12px; border: 0; background: #1a2636; color: #eef1f4;
  box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer; }
.cm-legend { position: absolute; z-index: 500; left: 16px; top: 16px; display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; border-radius: 12px;
  background: rgba(26,38,54,.82); color: #eef1f4; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); max-width: calc(100% - 92px); }
.cm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cm-legend i { width: 10px; height: 10px; border-radius: 50%; background: #4d7d72; }
.cm-legend i.is-live { background: #79a89c; box-shadow: 0 0 0 3px rgba(121,168,156,.35); }
.cm-legend i.is-open { background: #4d7d72; }
.cm-legend i.is-upcoming { background: #eef1f4; }
.cm-legend i.is-past { background: #647184; }
.cm-toast { position: absolute; z-index: 600; left: 50%; top: 70px; transform: translateX(-50%); margin: 0; padding: 10px 16px; border-radius: 12px; background: #c19566;
  color: #1a2636; font-weight: 700; font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.25); white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }

/* Pins */
.cm-pin-wrap, .cm-cluster-wrap, .cm-me-wrap { background: none; border: 0; }
.cm-pin { position: relative; width: 56px; height: 70px; transition: transform .2s; transform-origin: 50% 100%; }
.cm-pin-body { position: absolute; left: 4px; top: 6px; width: 48px; height: 50px; border-radius: 14px; background: #1a2636; color: #eef1f4; border: 3px solid #eef1f4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(15,24,34,.4); }
.cm-pin-d { font-family: 'Big Shoulders', 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 22px; line-height: .95; }
.cm-pin-m { font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.cm-pin-tip { position: absolute; left: 21px; top: 50px; width: 14px; height: 14px; background: #eef1f4; transform: rotate(45deg); border-radius: 2px; z-index: -1; }
.cm-pin-disc { position: absolute; right: -4px; top: 0; width: 22px; height: 9px; border-radius: 50%; background: #c19566; transform: rotate(-20deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.cm-pin.is-open .cm-pin-body { background: #4d7d72; }
.cm-pin.is-live .cm-pin-body { background: #79a89c; color: #1a2636; }
.cm-pin.is-past { opacity: .62; }
.cm-pin.is-past .cm-pin-body { background: #647184; }
.cm-pin.is-past .cm-pin-disc { display: none; }
.cm-pin-pulse { position: absolute; left: 4px; top: 6px; width: 48px; height: 50px; border-radius: 16px; border: 3px solid #79a89c; animation: cm-pulse 1.6s ease-out infinite; }
@keyframes cm-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.cm-pin-wrap.is-hover .cm-pin, .cm-pin.is-selected { transform: scale(1.18) translateY(-4px); }
.cm-pin.is-selected .cm-pin-body { border-color: #c19566; }
.cm-pin.is-selected .cm-pin-tip { background: #c19566; }

.cm-cluster { width: 64px; height: 64px; border-radius: 50%; background: rgba(26,38,54,.92); color: #eef1f4; border: 3px solid #eef1f4;
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 0 8px rgba(26,38,54,.22), 0 8px 18px rgba(15,24,34,.35); cursor: pointer; }
.cm-cluster b { font-family: 'Big Shoulders', 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 30px; line-height: 1; }
.cm-cluster { position: relative; }
.cm-cluster-disc { position: absolute; right: -2px; top: 2px; width: 22px; height: 9px; border-radius: 50%; background: #c19566; transform: rotate(-20deg); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.cm-cluster.has-open { border-color: #79a89c; }
.cm-cluster.has-live { border-color: #79a89c; box-shadow: 0 0 0 8px rgba(121,168,156,.3), 0 8px 18px rgba(15,24,34,.35); }

.cm-me { position: relative; width: 28px; height: 28px; }
.cm-me b { position: absolute; inset: 6px; border-radius: 50%; background: #c19566; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.cm-me::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(193,149,102,.35); animation: cm-pulse 2s ease-out infinite; }
.cm-arc { stroke-dashoffset: 0; animation: cm-fly 1.6s linear infinite; }
@keyframes cm-fly { to { stroke-dashoffset: -28; } }

/* Kartenleiste am Handy */
.cm-rail { display: none; }
@media (max-width: 899px) {
  .cm { margin: 16px -16px 28px; }
  .cm-layout { display: block; }
  .cm-side { height: auto; }
  .cm-side-head { padding: 0 16px 10px; }
  .cm-list { display: none; }
  .cm-note { padding: 0 16px; }
  .cm-past { margin: 0 16px 10px; }
  .cm-stage { height: 72vh; height: 72dvh; border-radius: 0; box-shadow: none; }
  .cm-legend { display: none; }
  .cm-side-head { gap: 8px; }
  .cm-count { font-size: 14px; }
  .cm-near { min-height: 36px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
  .cm-fit { right: 12px; top: 12px; }
  .cm-map .leaflet-control-zoom { display: none; }
  .cm-rail { position: absolute; z-index: 500; left: 0; right: 0; bottom: 26px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 16px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .cm-rail::-webkit-scrollbar { display: none; }
  .cm-rail .cm-card { flex: 0 0 86%; scroll-snap-align: center; box-shadow: 0 8px 22px rgba(15,24,34,.3); }
  .cm-toggle { margin-left: 0; width: 100%; }
  .cm-toggle button { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cm-pin-pulse, .cm-me::before, .cm-arc, .cm-near.is-busy i { animation: none; }
  .cm-pin, .cm-card { transition: none; }
}