@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@400;600;700;800&display=swap");

:root {
  color-scheme: light;
  --vir-hauptgruen: #2c9435;
  --vir-dunkelgruen: #2e5d33;
  --vir-graphit: #444444;
  --vir-rubinrot: #8b3a3a;
  --vir-aschgrau: #8b3a3a;
  --vir-pergament: #f1e4c6;
  --vir-honig: #ded6c1;
  --vir-warmgrau: #d9d9d9;
  --panel-bg: rgb(241 228 198 / 86%);
  --panel-border: rgb(68 68 68 / 18%);
  --text: var(--vir-graphit);
  --muted: var(--vir-dunkelgruen);
  --accent: var(--vir-hauptgruen);
  --tap: 46px;
  --font-body: "Open Sans", sans-serif;
  --font-heading: "Montserrat", "Open Sans", sans-serif;
  --font-accent: "ZT Mota", "Montserrat", "Open Sans", sans-serif;
  --font-logo: "Zennor", "Montserrat", "Open Sans", sans-serif;
  font-family: var(--font-body);
}

* {
  box-sizing: border-box;
}

html,
body,
.app-shell,
.map {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: var(--text);
  background: var(--vir-warmgrau);
}

body.has-image-modal {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

.app-shell {
  position: relative;
}

.map {
  z-index: 1;
}

.tranchot-attribution {
  position: absolute;
  z-index: 460;
  left: max(10px, env(safe-area-inset-left));
  bottom: max(8px, env(safe-area-inset-bottom));
  max-width: min(520px, calc(100vw - 20px));
  display: none;
  padding: 4px 7px;
  border-radius: 6px;
  color: rgb(68 68 68 / 82%);
  background: rgb(241 228 198 / 74%);
  box-shadow: 0 2px 8px rgb(68 68 68 / 12%);
  font-size: 10px;
  line-height: 1.25;
  backdrop-filter: blur(8px);
}

.tranchot-attribution.is-visible {
  display: block;
}

.tranchot-attribution a {
  color: inherit;
}

.kulatainment-credit {
  position: absolute;
  z-index: 470;
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 24px);
  display: grid;
  width: 132px;
  min-height: 32px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.kulatainment-credit:hover,
.kulatainment-credit:focus-visible {
  opacity: 0.86;
  outline: 0;
  transform: translateY(-1px);
}

.kulatainment-credit img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 34px;
  object-fit: contain;
}

@media (max-width: 759px) {
  .tranchot-attribution {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 62px);
  }

  .kulatainment-credit {
    top: max(10px, env(safe-area-inset-top));
    bottom: auto;
    left: max(10px, env(safe-area-inset-left));
    right: auto;
    width: 118px;
  }

  .map-panel.is-collapsed {
    right: auto;
    width: 112px;
    max-height: 44px;
    border-radius: 14px;
  }

  .map-panel.is-collapsed .panel-handle {
    min-height: 42px;
    grid-template-columns: minmax(0, 1fr) 16px;
    gap: 6px;
    padding: 6px 11px 7px 12px;
  }

  .map-panel.is-collapsed .panel-handle::before {
    content: none;
  }

  .map-panel.is-collapsed .panel-handle__title {
    justify-self: start;
    font-size: 13px;
  }

  .map-panel.is-collapsed .panel-handle__state {
    font-size: 12px;
  }
}

.leaflet-right {
  right: 10px;
}

.leaflet-right .leaflet-control {
  margin-right: 0;
}

.leaflet-control-zoom.leaflet-bar,
.leaflet-bar.locate-control {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.leaflet-control-zoom {
  display: grid;
  gap: 9px;
}

.leaflet-bar.leaflet-control-zoom a,
.leaflet-bar.locate-control a.locate-button {
  width: 42px;
  height: 42px;
  padding: 0 !important;
  border: 3px solid rgb(44 148 53 / 78%);
  border-radius: 999px !important;
  display: grid !important;
  place-items: center;
  line-height: 1;
  color: rgb(44 148 53 / 86%);
  background: rgb(241 228 198 / 10%);
  box-shadow: 0 3px 10px rgb(68 68 68 / 12%);
  backdrop-filter: blur(7px);
  transition:
    background 150ms ease,
    border-color 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.leaflet-bar.leaflet-control-zoom a:first-child,
.leaflet-bar.leaflet-control-zoom a:last-child {
  border-radius: 999px !important;
}

.leaflet-bar.leaflet-control-zoom a + a {
  border-top: 3px solid rgb(44 148 53 / 78%);
}

.leaflet-bar.leaflet-control-zoom a:hover,
.leaflet-bar.leaflet-control-zoom a:focus-visible,
.leaflet-bar.locate-control a.locate-button:hover,
.leaflet-bar.locate-control a.locate-button:focus-visible {
  border-color: rgb(44 148 53 / 95%);
  color: var(--vir-hauptgruen);
  background: rgb(241 228 198 / 60%);
  box-shadow: 0 4px 14px rgb(68 68 68 / 18%);
}

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  position: relative;
  overflow: hidden;
  font-size: 0 !important;
  text-indent: 0;
}

.leaflet-control-zoom-in::before,
.leaflet-control-zoom-out::before {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -53%);
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.leaflet-control-zoom-in::before {
  content: "+";
}

.leaflet-control-zoom-out::before {
  content: "−";
  transform: translate(-50%, -50%);
}

.locate-button {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.locate-button__icon {
  width: 23px;
  height: 23px;
  border: 2.5px solid currentColor;
  border-radius: 999px;
  position: relative;
  background: radial-gradient(circle at center, currentColor 0 2.5px, transparent 3px);
}

.locate-button__icon::before {
  content: "";
  position: absolute;
  left: -7px;
  right: -7px;
  top: 50%;
  height: 2.5px;
  background: currentColor;
  transform: translateY(-50%);
}

.locate-button__icon::after {
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: 50%;
  width: 2.5px;
  background: currentColor;
  transform: translateX(-50%);
}

.map-panel {
  --menu-bg: rgb(241 228 198 / 40%);
  --menu-surface: rgb(222 214 193 / 74%);
  --menu-surface-strong: rgb(217 217 217 / 55%);
  --menu-border: rgb(68 68 68 / 18%);
  --menu-text: var(--vir-graphit);
  --menu-muted: var(--vir-dunkelgruen);
  --menu-accent: var(--vir-hauptgruen);
  --menu-accent-strong: var(--vir-dunkelgruen);
  position: absolute;
  z-index: 500;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  max-height: calc(100dvh - 20px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--menu-border);
  border-radius: 22px;
  color: var(--menu-text);
  background: var(--menu-bg);
  box-shadow: 0 22px 55px rgb(68 68 68 / 24%);
  overflow: hidden;
  backdrop-filter: blur(14px) saturate(130%);
  transition:
    max-height 180ms ease,
    transform 180ms ease;
}

.panel-handle {
  width: 100%;
  min-height: 54px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 10px 18px;
  border: 0;
  color: var(--vir-pergament);
  background: rgb(68 68 68 / 82%);
  transition:
    background 150ms ease,
    color 150ms ease,
    box-shadow 150ms ease;
}

.panel-handle::before {
  content: "";
}

.panel-handle:hover,
.panel-handle:focus-visible {
  color: var(--vir-pergament);
  background: rgb(46 93 51 / 82%);
  box-shadow: inset 0 -1px 0 rgb(241 228 198 / 42%);
  outline: 0;
}

.panel-handle__title {
  justify-self: center;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.panel-handle__state {
  justify-self: end;
  color: rgb(241 228 198 / 72%);
  transform: rotate(180deg);
  transition:
    color 150ms ease,
    transform 180ms ease;
}

.panel-handle:hover .panel-handle__state,
.panel-handle:focus-visible .panel-handle__state {
  color: var(--vir-pergament);
}

.map-panel.is-collapsed {
  max-height: 58px;
}

@media (max-width: 759px) {
  .map-panel.is-collapsed {
    max-height: 44px;
  }
}

.map-panel.is-collapsed .map-panel__header {
  display: none;
}

.map-panel.is-collapsed .panel-handle__state {
  transform: rotate(0deg);
}

.map-panel__header {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px 18px 15px;
  border-top: 1px solid rgb(217 217 217 / 12%);
  border-bottom: 1px solid var(--menu-border);
  background:
    radial-gradient(circle at 50% 0%, rgb(222 214 193 / 74%), transparent 54%),
    rgb(241 228 198 / 42%);
}

.map-brand__badge {
  width: 62px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgb(68 68 68 / 42%));
}

.map-brand__text {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: center;
  text-transform: uppercase;
}

.map-brand__subtitle {
  color: var(--vir-rubinrot);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

.map-brand__title {
  color: var(--menu-accent);
  font-family: var(--font-accent);
  font-size: 24px;
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1;
}

.panel-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding: 12px 12px max(20px, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.control-section {
  padding: 12px;
  border: 1px solid var(--menu-border);
  border-radius: 18px;
  background: var(--menu-surface);
}

.control-section h2 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--menu-accent);
  font-family: var(--font-heading);
  text-transform: uppercase;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.section-title-row--collapsible {
  margin-bottom: 10px;
}

.section-toggle {
  min-width: 0;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  color: var(--menu-accent);
  background: transparent;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}

.section-toggle:hover,
.section-toggle:focus-visible {
  color: var(--menu-accent-strong);
  outline: 0;
}

.section-toggle__icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: block;
  border: 1px solid rgb(44 148 53 / 42%);
  border-radius: 999px;
  color: transparent;
  background: rgb(222 214 193 / 72%);
  line-height: 1;
  transition:
    background 180ms ease,
    border-color 180ms ease;
}

.section-toggle__icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--menu-accent);
  border-bottom: 2px solid var(--menu-accent);
  transform: translate(-50%, -58%) rotate(-45deg);
  transform-origin: 50% 50%;
  transition:
    border-color 180ms ease,
    transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.section-toggle:hover .section-toggle__icon,
.section-toggle:focus-visible .section-toggle__icon {
  border-color: rgb(46 93 51 / 58%);
  background: rgb(241 228 198 / 88%);
}

.section-toggle:hover .section-toggle__icon::before,
.section-toggle:focus-visible .section-toggle__icon::before {
  border-color: var(--menu-accent-strong);
}

.control-section:not(.is-section-collapsed) .section-toggle__icon {
  transform: none;
}

.control-section:not(.is-section-collapsed) .section-toggle__icon::before {
  transform: translate(-50%, -58%) rotate(45deg);
}

.control-section.is-section-collapsed .layer-list {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scaleY(0.94);
}

.control-section:not(.is-section-collapsed) .layer-list {
  max-height: 520px;
  opacity: 1;
  transform: translateY(0) scaleY(1);
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  background: var(--menu-surface-strong);
}

.segmented-control label {
  min-height: var(--tap);
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 10px;
  color: var(--menu-text);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  transition:
    background 150ms ease,
    color 150ms ease;
}

.segmented-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-control label:has(input:checked) {
  color: var(--vir-pergament);
  background: var(--menu-accent);
  box-shadow: 0 5px 14px rgb(68 68 68 / 24%);
}

.layer-list {
  display: grid;
  gap: 3px;
  overflow: hidden;
  transform-origin: top;
  transition:
    max-height 360ms cubic-bezier(0.34, 1.28, 0.64, 1),
    opacity 190ms ease,
    transform 360ms cubic-bezier(0.34, 1.28, 0.64, 1);
}

.layer-row {
  min-height: var(--tap);
  display: grid;
  grid-template-columns: 22px 32px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--menu-text);
  font-size: 14px;
  font-weight: 650;
}

.layer-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--menu-accent);
}

.line-swatch {
  width: 28px;
  height: 0;
  border-top: 4px solid var(--swatch-color);
  border-radius: 999px;
}

.line-swatch--dash {
  border-top-style: dashed;
}

.marker-swatch {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: url("assets/img/drohne.png") center / contain no-repeat;
}

.marker-swatch--camera {
  background-image: url("assets/img/panoramacamera.png");
}

.marker-swatch--digital-twin {
  background-image: url("assets/img/matterport.png");
}

.category-swatch {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--category-icon) center / contain no-repeat;
}

.switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: auto;
  align-items: center;
}

.switch input {
  position: absolute;
  opacity: 0;
}

.switch__track {
  width: 48px;
  height: 28px;
  padding: 3px;
  border: 1px solid rgb(139 58 58 / 46%);
  border-radius: 999px;
  background: rgb(68 68 68 / 62%);
  box-shadow:
    inset 0 0 0 1px rgb(241 228 198 / 16%),
    0 1px 4px rgb(68 68 68 / 18%);
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.switch--small .switch__track {
  width: 42px;
  height: 24px;
}

.switch__thumb {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--vir-pergament);
  box-shadow:
    0 1px 5px rgb(68 68 68 / 34%),
    inset 0 0 0 1px rgb(68 68 68 / 16%);
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}

.switch--small .switch__thumb {
  width: 18px;
  height: 18px;
}

.switch input:checked + .switch__track {
  border-color: rgb(44 148 53 / 64%);
  background: var(--menu-accent);
  box-shadow:
    inset 0 0 0 1px rgb(241 228 198 / 22%),
    0 2px 7px rgb(44 148 53 / 28%);
}

.switch input:checked + .switch__track .switch__thumb {
  transform: translateX(20px);
}

.switch--small input:checked + .switch__track .switch__thumb {
  transform: translateX(18px);
}

.panorama-marker-icon {
  filter: drop-shadow(0 4px 10px rgb(68 68 68 / 34%));
}

.panorama-camera-marker-icon {
  filter: drop-shadow(0 4px 10px rgb(68 68 68 / 34%));
}

.matterport-marker-icon {
  filter: drop-shadow(0 4px 10px rgb(68 68 68 / 34%));
}

.infrastructure-marker-icon {
  filter: drop-shadow(0 4px 10px rgb(68 68 68 / 30%));
}

.leaflet-marker-icon.panorama-marker-icon,
.leaflet-marker-icon.panorama-camera-marker-icon,
.leaflet-marker-icon.matterport-marker-icon,
.leaflet-marker-icon.infrastructure-marker-icon {
  cursor: pointer;
  transition:
    filter 170ms ease,
    opacity 170ms ease,
    width 170ms cubic-bezier(0.34, 1.28, 0.64, 1),
    height 170ms cubic-bezier(0.34, 1.28, 0.64, 1),
    margin 170ms cubic-bezier(0.34, 1.28, 0.64, 1);
}

.leaflet-marker-icon.panorama-marker-icon:hover,
.leaflet-marker-icon.panorama-marker-icon:focus-visible,
.leaflet-marker-icon.panorama-camera-marker-icon:hover,
.leaflet-marker-icon.panorama-camera-marker-icon:focus-visible,
.leaflet-marker-icon.matterport-marker-icon:hover,
.leaflet-marker-icon.matterport-marker-icon:focus-visible,
.leaflet-marker-icon.infrastructure-marker-icon:hover,
.leaflet-marker-icon.infrastructure-marker-icon:focus-visible {
  opacity: 0.92;
  filter: drop-shadow(0 7px 14px rgb(68 68 68 / 42%));
  outline: 0;
}

.leaflet-marker-icon.panorama-marker-icon:hover,
.leaflet-marker-icon.panorama-marker-icon:focus-visible,
.leaflet-marker-icon.panorama-camera-marker-icon:hover,
.leaflet-marker-icon.panorama-camera-marker-icon:focus-visible,
.leaflet-marker-icon.matterport-marker-icon:hover,
.leaflet-marker-icon.matterport-marker-icon:focus-visible {
  width: 41px !important;
  height: 41px !important;
  margin-left: -21px !important;
  margin-top: -21px !important;
}

.leaflet-marker-icon.infrastructure-marker-icon:hover,
.leaflet-marker-icon.infrastructure-marker-icon:focus-visible {
  width: 37px !important;
  height: 37px !important;
  margin-left: -19px !important;
  margin-top: -19px !important;
}

.leaflet-marker-icon.is-marker-flashing {
  animation: marker-click-flash 380ms ease-out;
}

@keyframes marker-click-flash {
  0%,
  100% {
    opacity: 1;
    filter: drop-shadow(0 4px 10px rgb(68 68 68 / 34%));
  }

  34% {
    opacity: 0.42;
    filter: drop-shadow(0 0 0 rgb(68 68 68 / 0%));
  }

  68% {
    opacity: 1;
    filter: drop-shadow(0 8px 16px rgb(44 148 53 / 58%));
  }
}

.map-marker-cluster {
  display: grid;
  place-items: center;
  border: 3px solid rgb(241 228 198 / 95%);
  border-radius: 999px;
  color: var(--vir-pergament);
  background: rgb(44 148 53 / 92%);
  box-shadow: 0 5px 14px rgb(68 68 68 / 26%);
  font-size: 14px;
  font-weight: 800;
}

.map-marker-cluster span {
  line-height: 1;
}

.leaflet-cluster-spider-leg {
  stroke-linecap: round;
  stroke-dasharray: 4 4;
}

.leaflet-popup-content-wrapper {
  border-radius: 14px;
}

.leaflet-popup-content {
  width: min(260px, calc(100vw - 64px));
  margin: 12px;
}

.popup-card {
  display: grid;
  gap: 10px;
}

.popup-card--compact {
  min-width: 190px;
}

.popup-card__image-link {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  transition:
    box-shadow 170ms ease,
    transform 170ms ease;
}

.popup-card__image-button {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  text-align: inherit;
}

.popup-card__image-link:hover,
.popup-card__image-link:focus-visible {
  box-shadow: 0 5px 14px rgb(68 68 68 / 18%);
  outline: 0;
  transform: translateY(-1px);
}

.popup-card__image-link--static:hover,
.popup-card__image-link--static:focus-visible {
  box-shadow: 0 5px 14px rgb(68 68 68 / 18%);
  transform: translateY(-1px);
}

.popup-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--vir-warmgrau);
  transition: transform 180ms ease;
}

.popup-card__image-link:hover img,
.popup-card__image-link:focus-visible img {
  transform: scale(1.025);
}

.popup-card__image-link--static:hover img,
.popup-card__image-link--static:focus-visible img {
  transform: scale(1.025);
}

.popup-card h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.popup-card__meta {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.popup-card__description {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.popup-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.popup-card__actions--single {
  grid-template-columns: 1fr;
}

.popup-card__actions a {
  min-height: 42px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--vir-pergament);
  background: var(--accent);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 3px 10px rgb(68 68 68 / 14%);
  transition:
    background 170ms ease,
    box-shadow 170ms ease,
    color 170ms ease,
    transform 170ms cubic-bezier(0.34, 1.28, 0.64, 1);
}

.popup-card__actions a:hover,
.popup-card__actions a:focus-visible {
  color: var(--vir-pergament);
  background: var(--vir-dunkelgruen);
  box-shadow: 0 6px 16px rgb(68 68 68 / 22%);
  outline: 0;
  transform: translateY(-1px);
}

.popup-card__actions a:nth-child(2) {
  color: var(--vir-graphit);
  background: rgb(44 148 53 / 12%);
}

.popup-card__actions a:nth-child(2):hover,
.popup-card__actions a:nth-child(2):focus-visible {
  color: var(--vir-pergament);
  background: var(--vir-dunkelgruen);
}

.image-modal[hidden] {
  display: none;
}

.image-modal {
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}

.image-modal__backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: rgb(68 68 68 / 72%);
  cursor: zoom-out;
}

.image-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(920px, 100%);
  max-height: min(86dvh, 760px);
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgb(68 68 68 / 18%);
  border-radius: 16px;
  color: var(--vir-graphit);
  background: rgb(241 228 198 / 94%);
  box-shadow: 0 22px 55px rgb(68 68 68 / 34%);
}

.image-modal__dialog img {
  display: block;
  width: 100%;
  max-height: calc(min(86dvh, 760px) - 74px);
  object-fit: contain;
  border-radius: 10px;
  background: var(--vir-warmgrau);
}

.image-modal__dialog figcaption {
  padding: 0 4px 2px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--vir-graphit);
}

.image-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(68 68 68 / 18%);
  border-radius: 999px;
  color: var(--vir-pergament);
  background: rgb(68 68 68 / 82%);
  box-shadow: 0 3px 10px rgb(68 68 68 / 22%);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.image-modal__close:hover,
.image-modal__close:focus-visible {
  background: rgb(46 93 51 / 82%);
  outline: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 760px) {
  .map-panel {
    top: 16px;
    right: auto;
    bottom: auto;
    left: 16px;
    width: 328px;
    max-height: calc(100dvh - 32px);
    border-radius: 16px;
  }

  .map-panel.is-collapsed {
    width: 148px;
  }

  .panel-handle {
    min-height: 58px;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    text-align: center;
  }

  .panel-handle__title {
    font-size: 17px;
  }

  .panel-content {
    max-height: none;
  }
}