@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,700;1,9..40,700&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  background: #fff;
  color: #000;
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.page {
  display: none;
  height: 100vh;
  padding: 52px 56px 52px;
  overflow: hidden;
  flex-direction: column;
}
.page.active { display: flex; }
@media (max-width: 600px) {
  .page { padding: 36px 24px 36px; }
}

.back {
  display: inline-block;
  flex-shrink: 0;
  font-size: 17px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  user-select: none;
}

/* STARTSEITE */
.site-title {
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.03em;
  line-height: 1;
  flex-shrink: 0;
}
.site-title a { color: #000; text-decoration: none; cursor: pointer; }

.areal-list {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.areal-list a {
  color: #000;
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 1px;
  cursor: pointer;
  width: fit-content;
}
.datum { font-size: 12px; color: #000; font-weight: 400; }

/* UME TEXTSEITE */
.ume-text {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 28px 0 40px;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge */
}
.ume-text::-webkit-scrollbar {
  display: none;               /* Safari/Chrome/Mobile */
}
.ume-text-inner {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}
}
.ume-text-inner { max-width: 560px; width: 100%; }
.ume-text-inner p {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
  color: #000;
  margin-bottom: 18px;
}
.ume-text-inner p:last-child { margin-bottom: 0; }
em { font-style: italic; font-weight: 400; }

/* KARTE */
.page-karte { padding: 52px 56px 52px; }
@media (max-width: 600px) { .page-karte { padding: 36px 24px 36px; } }

.karte-outer {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
}

/* karte-wrap hat exakt die Bildproportionen (3390:1962)
   → left/top in % stimmen immer exakt mit dem Bild überein */
.karte-wrap {
  position: relative;
  /* Maximale Breite = verfügbare Breite */
  width: 100%;
  /* Maximale Höhe = verfügbarer Platz */
  max-height: calc(100vh - 160px);
  /* Aspect-ratio hält die Proportionen */
  aspect-ratio: 3390 / 1962;
  /* Wenn Höhe begrenzt wird, Breite kleiner machen */
  max-width: calc((100vh - 160px) * 3390 / 1962);
}

.karte-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill; /* füllt den wrap exakt – kein Leerraum */
}

/* Punkte – % stimmen jetzt exakt weil wrap = Bildproportionen */
.kp {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #f5c500;
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
@media (max-width: 600px) {
  .kp { width: 8px; height: 8px; }
}

/* STANDORT */
.standort-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 20px;
  gap: 16px;
}
.standort-img {
  display: block;
  max-height: calc(100vh - 220px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}
.standort-info { width: 340px; max-width: 90vw; }
.standort-titel {
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 3px;
}
.standort-text { font-size: 13px; font-weight: 400; line-height: 1.5; }

@media (max-width: 600px) {
  .standort-img { max-height: 45vh; }
}