#location-detail {
  height: 100dvh;
  max-height: 940px;
  transform: translateX(0);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 1;
}

#location-detail {
  position: relative;
  height: 100dvh;
  max-height: 940px;
  overflow: hidden;
  overscroll-behavior: none;
  transform: translateX(0);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 1;
}

#location-detail.active ~ header {
  display: none !important;
}

.story-content {
  position: absolute;
  right: 1rem;
  bottom: 2rem;
  left: 1rem;
  padding: 1rem;
  border-radius: 8px;
  background: rgb(0 0 0 / 70%);
  color: white;
  transition: opacity 0.3s ease;
}

.story-content {
  position: absolute;
  right: 20px;
  bottom: 100px;
  left: 20px;
  padding: 20px;
  border-radius: 8px;
  background: rgb(255 255 255 / 90%);
  color: #000;
  text-align: center;
  transition: all 0.5s ease;
}

.story-content h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.story-content p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.story-image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: all 1s ease;
}

.story-image {
  width: auto;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  transform: translate(0, 0) scale(1);
  transform-origin: center;
  transition: transform 0.5s ease;
}

.story-navigation {
  position: absolute;
  right: 0;
  bottom: 20px;
  left: 0;
  z-index: 1002;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background: rgb(0 0 0 / 50%);
}

.story-progress-bar {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  width: 60%;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
}

.door-story-container {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  max-height: 940px;
  background-color: #000;
  transform: translateX(0);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.door-story-container {
  position: fixed;
  inset: 0;
  height: 100dvh;
  max-height: 940px;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.door-story-container::-webkit-scrollbar {
  display: none;
}

@media (min-width: 426px) {
  .door-story-container {
    width: 430px;
    max-width: 430px;
    margin: 0 auto;
    transform: translateX(-50%);
  }
}

.detail-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: default;
  overflow: hidden;
  will-change: transform, opacity;
}

.detail-image-container,
.detail-info {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.detail-image-container.fade-out,
.detail-info.fade-out {
  transform: translateY(-20px);
  opacity: 0;
}

.detail-image-container.fade-in,
.detail-info.fade-in {
  transform: translateY(0);
  opacity: 1;
}

.detail-image-container.is-overview .highlight-area-focus {
  border: 2px solid var(--highlight-border-color);
  box-shadow: 0 0 0 9999px var(--highlight-overlay-color);
}

.detail-image-container.zoomed-in .detail-image {
  transform: scale(1.5);

  transform-origin: center center;
  transition: transform 1s ease-in-out, filter 1s ease-in-out;
}

.detail-image-container.no-zoom-out {
  overflow: hidden;
}

.detail-image-container.zoomed-in .detail-image {
  transform: scale(1.5);
  transform-origin: center center;
}

.detail-image-container.no-zoom-out {
  overflow: hidden;
}

.detail-image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: transform 1s ease-in-out, filter 1s ease-in-out;
}

.detail-image,
.highlight-area-focus,
.color-area {
  transform: translateZ(0);
  will-change: transform;
}

.detail-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: transform 1s ease-in-out, filter 1s ease-in-out;
  overflow: hidden;
}

.detail-info {
  position: absolute;
  bottom: 0;
  width: auto;
  height: auto;
  background-color: var(--loading-bg);
  color: var(--background-color);
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.5s ease,
    transform 0.5s ease;
  box-sizing: border-box;
  overflow-y: hidden;
  padding-bottom: 50px;
  width: 100%;
}

.detail-info {
  scroll-behavior: smooth;
}

.detail-info {
  transition: opacity 0.3s ease-in-out;
}

.detail-info p {
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
}

.detail-info p.visible {
  transform: translateY(0);
  opacity: 1;
}

.detail-info p {
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
}

.detail-info p.visible {
  transform: translateY(0);
  opacity: 1;
}

.story-slide .detail-info {
  background: rgb(250 245 245 / 50%);
  transition: all 0.3s ease;
}

.story-slide .details {
  padding-top: 2rem;
}

.story-slide .story-title {
  margin: 0;
  color: var(--secondary-color);
  text-align: center;
}

.story-slide .story-subtitle {
  color: var(--secondary-color);
  font-size: 1rem;
  font-weight: 100;
  text-align: center;
}

.story-slide .detail-info {
  z-index: 2;
  background: transparent;
  transition: all 0.3s ease;
}

.story-slide .detail-info::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: rgb(255 255 255 / 60%);
  content: "";
  backdrop-filter: blur(4px);
}

.story-slide {
  position: relative;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.story-slide .details {
  position: relative;
  z-index: 2;
}

.story-slide .story-title {
  position: relative;
  margin: 0;
  color: var(--secondary-color);
  text-align: center;
}

.story-slide .story-subtitle {
  position: relative;
  margin: 1rem 1rem 2rem;
  color: var(--secondary-color);
  font-size: 1rem;
  font-weight: 100;
  line-height: 22px;
  text-align: center;
}

.story-slide .navigation-controls {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 50px;
  background-color: white;
}

#google-maps-link {
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-to-map-button {
  width: 100%;
  margin: 20px 0;
  padding: 12px 20px;
  border: none !important;
  border-radius: 16px;
  background-color: #0044cc;
  color: white;
  font-size: 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.back-to-map-button {
  display: block;
  width: calc(100% - 2rem);
  margin: 1rem;
  padding: 12px 20px;
  border: none;
  border-radius: 16px;
  background-color: #0044cc;
  color: white;
  transition: all 0.2s ease;
  cursor: pointer;
}

.back-to-map-button:focus {
  outline: none;
}

.back-to-map-button:active {
  outline: none;
  border: none;
}

/* Remove tap highlight on mobile */
.back-to-map-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.highlight-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.highlight-area-focus {
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

.highlight-area-focus {
  position: absolute;
  border: 2px solid var(--primary-color);
  background-color: transparent;
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 70%);
}

.highlight-area {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.highlight-area-focus {
  position: absolute;
  border: 2px solid var(--highlight-border-color);
  background: transparent;
  transition: opacity 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  opacity: 0;
  box-shadow: 0 0 0 9999px var(--highlight-overlay-color);
}

.highlight-area-focus {
  transition: opacity 0.5s ease, box-shadow 0.5s ease;
}

.color-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  mix-blend-mode: normal;
  clip-path: inset(0 0 0 0);
}

.color-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  mix-blend-mode: normal;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s ease-in-out;
}

.color-area {
  filter: grayscale(0%) !important;
}

.rathaustuer-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 1rem;
}

.rathaustuer-image {
  width: 48%;
  height: 100%;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  will-change: transform, box-shadow;
}

.rathaustuer-image:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgb(0 0 0 / 30%);
}

.rathaustuer-image:active {
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}

.back-to-map-button + .navigation-controls {
  margin-top: 0.5rem;
}

.congratulations {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  background-color: rgb(76 175 80 / 90%);
  color: white;
  font-weight: bold;
  text-align: center;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0;
}

.congratulations.animate-fade-in {
  transform: translateY(0);
  opacity: 1;
}

.story-progress-fill {
  height: 100%;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
  border-radius: 8px;
}

.story-progress-fill {
  height: 100%;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
  border-radius: 8px;
}
#location-detail {
  height: 100dvh;
  max-height: 940px;
  transform: translateX(0);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 1;
}

#location-detail {
  position: relative;
  height: 100dvh;
  max-height: 940px;
  overflow: hidden;
  overscroll-behavior: none;
  transform: translateX(0);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 1;
}

#location-detail.active ~ header {
  display: none !important;
}

.story-content {
  position: absolute;
  right: 1rem;
  bottom: 2rem;
  left: 1rem;
  padding: 1rem;
  border-radius: 8px;
  background: rgb(0 0 0 / 70%);
  color: white;
  transition: opacity 0.3s ease;
}

.story-content {
  position: absolute;
  right: 20px;
  bottom: 100px;
  left: 20px;
  padding: 20px;
  border-radius: 8px;
  background: rgb(255 255 255 / 90%);
  color: #000;
  text-align: center;
  transition: all 0.5s ease;
}

.story-content h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

.story-content p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.story-image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: all 1s ease;
}

.story-image {
  width: auto;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
  transform: translate(0, 0) scale(1);
  transform-origin: center;
  transition: transform 0.5s ease;
}

.story-navigation {
  position: absolute;
  right: 0;
  bottom: 20px;
  left: 0;
  z-index: 1002;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background: rgb(0 0 0 / 50%);
}

.story-progress-bar {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1001;
  width: 60%;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(4px);
}

.door-story-container {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  max-height: 940px;
  background-color: #000;
  transform: translateX(0);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.door-story-container {
  position: fixed;
  inset: 0;
  height: 100dvh;
  max-height: 940px;
  overflow: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.door-story-container::-webkit-scrollbar {
  display: none;
}

@media (min-width: 426px) {
  .door-story-container {
    width: 430px;
    max-width: 430px;
    margin: 0 auto;
    transform: translateX(-50%);
  }
}

.detail-image-container {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: default;
  overflow: hidden;
  will-change: transform, opacity;
}

.detail-image-container,
.detail-info {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.detail-image-container.fade-out,
.detail-info.fade-out {
  transform: translateY(-20px);
  opacity: 0;
}

.detail-image-container.fade-in,
.detail-info.fade-in {
  transform: translateY(0);
  opacity: 1;
}

.detail-image-container.is-overview .highlight-area-focus {
  border: 2px solid var(--highlight-border-color);
  box-shadow: 0 0 0 9999px var(--highlight-overlay-color);
}

.detail-image-container.zoomed-in .detail-image {
  transform: scale(1.5);

  transform-origin: center center;
  transition: transform 1s ease-in-out, filter 1s ease-in-out;
}

.detail-image-container.no-zoom-out {
  overflow: hidden;
}

.detail-image-container.zoomed-in .detail-image {
  transform: scale(1.5);
  transform-origin: center center;
}

.detail-image-container.no-zoom-out {
  overflow: hidden;
}

.detail-image {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: transform 1s ease-in-out, filter 1s ease-in-out;
}

.detail-image,
.highlight-area-focus,
.color-area {
  transform: translateZ(0);
  will-change: transform;
}

.detail-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: transform 1s ease-in-out, filter 1s ease-in-out;
  overflow: hidden;
}

.detail-info {
  position: absolute;
  bottom: 0;
  width: auto;
  height: auto;
  background-color: var(--loading-bg);
  color: var(--background-color);
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.5s ease,
    transform 0.5s ease;
  box-sizing: border-box;
  overflow-y: hidden;
  padding-bottom: 50px;
  width: 100%;
}

.detail-info {
  scroll-behavior: smooth;
}

.detail-info {
  transition: opacity 0.3s ease-in-out;
}

.detail-info p {
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
}

.detail-info p.visible {
  transform: translateY(0);
  opacity: 1;
}

.detail-info p {
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 0;
}

.detail-info p.visible {
  transform: translateY(0);
  opacity: 1;
}

.story-slide .detail-info {
  background: rgb(250 245 245 / 50%);
  transition: all 0.3s ease;
}

.story-slide .details {
  padding-top: 2rem;
}

.story-slide .story-title {
  margin: 0;
  color: var(--secondary-color);
  text-align: center;
}

.story-slide .story-subtitle {
  color: var(--secondary-color);
  font-size: 1rem;
  font-weight: 100;
  text-align: center;
}

.story-slide .detail-info {
  z-index: 2;
  background: transparent;
  transition: all 0.3s ease;
}

.story-slide .detail-info::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: rgb(255 255 255 / 60%);
  content: "";
  backdrop-filter: blur(4px);
}

.story-slide {
  position: relative;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease-in-out;
  opacity: 1;
}

.story-slide .details {
  position: relative;
  z-index: 2;
}

.story-slide .story-title {
  position: relative;
  margin: 0;
  color: var(--secondary-color);
  text-align: center;
}

.story-slide .story-subtitle {
  position: relative;
  margin: 1rem 1rem 2rem;
  color: var(--secondary-color);
  font-size: 1rem;
  font-weight: 100;
  line-height: 22px;
  text-align: center;
}

.story-slide .navigation-controls {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 50px;
  background-color: white;
}

#google-maps-link {
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-to-map-button {
  width: 100%;
  margin: 20px 0;
  padding: 12px 20px;
  border: none !important;
  border-radius: 16px;
  background-color: #0044cc;
  color: white;
  font-size: 1rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.back-to-map-button {
  display: block;
  width: calc(100% - 2rem);
  margin: 1rem;
  padding: 12px 20px;
  border: none;
  border-radius: 16px;
  background-color: #0044cc;
  color: white;
  transition: all 0.2s ease;
  cursor: pointer;
}

.back-to-map-button:focus {
  outline: none;
}

.back-to-map-button:active {
  outline: none;
  border: none;
}

/* Remove tap highlight on mobile */
.back-to-map-button {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.highlight-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.highlight-area-focus {
  transition: opacity 0.5s ease-in-out;
  opacity: 0;
}

.highlight-area-focus {
  position: absolute;
  border: 2px solid var(--primary-color);
  background-color: transparent;
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 70%);
}

.highlight-area {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.highlight-area-focus {
  position: absolute;
  border: 2px solid var(--highlight-border-color);
  background: transparent;
  transition: opacity 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
  opacity: 0;
  box-shadow: 0 0 0 9999px var(--highlight-overlay-color);
}

.highlight-area-focus {
  transition: opacity 0.5s ease, box-shadow 0.5s ease;
}

.color-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  mix-blend-mode: normal;
  clip-path: inset(0 0 0 0);
}

.color-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  mix-blend-mode: normal;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s ease-in-out;
}

.color-area {
  filter: grayscale(0%) !important;
}

.rathaustuer-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 1rem;
}

.rathaustuer-image {
  width: 48%;
  height: 100%;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  will-change: transform, box-shadow;
}

.rathaustuer-image:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgb(0 0 0 / 30%);
}

.rathaustuer-image:active {
  transform: scale(0.98);
  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
}

.back-to-map-button + .navigation-controls {
  margin-top: 0.5rem;
}

.congratulations {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  background-color: rgb(76 175 80 / 90%);
  color: white;
  font-weight: bold;
  text-align: center;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0;
}

.congratulations.animate-fade-in {
  transform: translateY(0);
  opacity: 1;
}

.story-progress-fill {
  height: 100%;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
  border-radius: 8px;
}

.story-progress-fill {
  height: 100%;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
  border-radius: 8px;
}

.story-slide .detail-info::before {
  will-change: backdrop-filter;
  transform: translateZ(0);
}

/* Fix rathaustuer-detail container height */
#rathaustuer-detail {
  position: relative;
  height: 100dvh;
  max-height: 940px;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-overflow-scrolling: none;
}

/* Prevent touch scrolling on all story sections */
#location-detail,
#rathaustuer-detail {
  touch-action: none;
  -webkit-overflow-scrolling: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Prevent dragging on navigation elements */
.navigation-controls,
.detail-image-container,
.rathaustuer-container {
  touch-action: none;
  -webkit-overflow-scrolling: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Center story container on larger screens (like tablets) */
@media (min-height: 941px) {
  .door-story-container {
    top: calc((100dvh - 940px) / 2);
    height: 940px;
  }
}

/* Responsive rathaustuer container for different screen heights */
@media (min-height: 941px) {
  #rathaustuer-detail {
    top: calc((100dvh - 940px) / 2);
    height: 940px;
  }

  .rathaustuer-container {
    height: 100%;
  }

  .rathaustuer-image {
    height: calc(940px - 2rem); /* Account for padding */
  }
}

/* Adjustments for large phones (iPhone Max, Samsung Ultra, etc.) */
@media (min-height: 800px) and (max-height: 940px) and (max-width: 430px) {
  .rathaustuer-container {
    padding: 0.8rem;
  }

  .rathaustuer-image {
    height: calc(100dvh - 1.6rem);
    background-size: contain;
    background-repeat: no-repeat;
  }
}

/* Fine-tuning for very tall narrow phones */
@media (min-height: 850px) and (max-width: 380px) {
  .rathaustuer-image {
    background-size: cover;
    background-position: center;
  }
}