/* Stadtansichten – 3D-Kalender (wird nur auf Seiten mit id="swc3d" geladen, siehe functions.php) */
.swc3d{
  --swc-accent: var(--theme-palette-color-1, #861b20);
  --swc-light:  var(--theme-palette-color-8, #ffffff);
  --swc-bleed: 48px;
  position:relative; width:100%; aspect-ratio:5/4; outline:none;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}
/* Galerie nur zeigen, wenn 3D nicht läuft */
.swc3d:not(.is-failed) ~ .swc3d-fallback{display:none}
.swc3d.is-failed{display:none}
.swc3d:focus-visible{outline:2px solid var(--swc-accent); outline-offset:4px}
/* Canvas ragt um --swc-bleed über den Rahmen und blendet weich aus (Schatten ohne Kante) */
.swc3d__canvas{position:absolute; left:calc(var(--swc-bleed) * -1); top:calc(var(--swc-bleed) * -1);
  width:calc(100% + 2 * var(--swc-bleed)) !important; height:calc(100% + 2 * var(--swc-bleed)) !important; max-width:none !important; cursor:grab; touch-action:pan-y;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 var(--swc-bleed), #000 calc(100% - var(--swc-bleed)), transparent), linear-gradient(to bottom, transparent, #000 var(--swc-bleed), #000 calc(100% - var(--swc-bleed)), transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent, #000 var(--swc-bleed), #000 calc(100% - var(--swc-bleed)), transparent), linear-gradient(to bottom, transparent, #000 var(--swc-bleed), #000 calc(100% - var(--swc-bleed)), transparent);
  mask-composite:intersect}
.swc3d__canvas.is-sheet{cursor:pointer}
.swc3d .swc3d__hint{position:absolute; left:0; top:0; margin:0; padding:0; border:0; min-height:0; width:auto; height:auto;
  background:none; box-shadow:none; color:inherit; cursor:pointer; transition:opacity .4s; will-change:transform}
.swc3d .swc3d__hint[hidden]{display:none}
.swc3d .swc3d__hint.is-off, .swc3d:not(.is-ready) .swc3d__hint{opacity:0; pointer-events:none}
.swc3d__pill{display:flex; align-items:center; gap:6px; padding:7px 12px 7px 9px; border-radius:999px;
  background:var(--swc-accent); color:var(--swc-light); font:600 14px/1 inherit; letter-spacing:.03em;
  box-shadow:0 4px 14px rgba(17,21,24,.25); white-space:nowrap}
.swc3d__pill svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.swc3d__hint--next .swc3d__pill{transform:translate(-100%, 14px)}
.swc3d__hint--prev .swc3d__pill{padding:7px; transform:translate(0, 14px)}
.swc3d__hint.is-compact .swc3d__txt{display:none}
.swc3d__hint.is-compact .swc3d__pill{padding:7px}
.swc3d__hint:focus-visible .swc3d__pill{outline:2px solid var(--swc-accent); outline-offset:3px}
.swc3d__dot{position:absolute; left:-9px; top:-9px; width:18px; height:18px; border-radius:50%;
  background:var(--swc-accent); opacity:.85; animation:swc3d-pulse 1.8s ease-out infinite}
.swc3d__hint.is-compact .swc3d__dot{display:none}
@keyframes swc3d-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--swc-accent) 55%, transparent)}100%{box-shadow:0 0 0 16px transparent}}
.swc3d__live{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
@media (max-width:700px){ .swc3d{--swc-bleed:14px} .swc3d__pill{font-size:13px} }
@media (prefers-reduced-motion: reduce){ .swc3d__dot{animation:none} }