/* Ostseelodges 3D-Modell – Prototyp. Farben und Schriften nach Brandbook 2026:
   Förden-Petrol #0E2A3D, Cream #F6EFE4, Tinte #1C1C1C, Treibholz #7E7468,
   Ostseelodges-Akzent Moos #5E7C5A, CTA Bernstein #C68A3B. */
:root {
  --petrol: #0e2a3d;
  --petrol-hell: #1f4a66;
  --cream: #f6efe4;
  --sand: #e8ddc8;
  --tinte: #1c1c1c;
  --treibholz: #7e7468;
  --moos: #5e7c5a;
  --moos-hell: #dce6d6;
  --bernstein: #c68a3b;
  --bernstein-hell: #e0b987;
  --wasser: #2e6e8e;
  --papier: #fffdf9;
  --schrift: 'Inter', system-ui, -apple-system, sans-serif;
  --display: 'Cormorant Garamond', Georgia, serif;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: var(--cream);
  color: var(--tinte);
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.55;
}
a {
  color: inherit;
}
button {
  font: inherit;
}

.ol-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 40px;
  background: var(--papier);
  border-bottom: 1px solid var(--sand);
}
.ol-marke {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.ol-marke__wort {
  font-family: var(--display);
  font-weight: 600;
  font-size: 28px;
  color: var(--petrol);
  letter-spacing: 0.01em;
}
.ol-marke__unter {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--treibholz);
}
.ol-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-weight: 500;
  font-size: 15px;
}
.ol-nav a {
  text-decoration: none;
  color: var(--petrol);
}
.ol-knopf {
  display: inline-block;
  background: var(--bernstein);
  color: var(--cream) !important;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}
.ol-knopf--voll[hidden] {
  display: none;
}
.ol-knopf--voll {
  display: block;
  text-align: center;
  margin-top: 14px;
}

.ol-3d {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  /* minmax(0, 1fr): sonst zieht die Liste rechts die Zeile ueber die Fensterhoehe
     hinaus und Kompass wie Zoomknoepfe landen unter dem sichtbaren Rand */
  grid-template-rows: minmax(0, 1fr);
  gap: 0 24px;
  padding: 20px 40px 20px;
  height: calc(100vh - 72px);
}
.ol-3d__kopf {
  grid-column: 1;
  grid-row: 1;
  max-width: 640px;
  position: relative;
  z-index: 2;
}
.ol-eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--moos);
}
.ol-3d__h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 46px;
  line-height: 1.05;
  margin: 6px 0 10px;
  color: var(--petrol);
}
.ol-3d__lead {
  margin: 0;
  color: var(--treibholz);
  font-size: 15px;
  max-width: 560px;
}

.ol-3d__buehne {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 6px;
}
.ol-3d__buehne canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  outline: none;
}
.ol-3d__buehne.ist-zeiger canvas {
  cursor: pointer;
}
.ol-3d__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* nur ein schmaler Rand, sonst bleicht die Vignette Foerde und Gelaende aus */
  background: radial-gradient(
    ellipse 78% 76% at 50% 52%,
    rgba(246, 239, 228, 0) 88%,
    rgba(246, 239, 228, 0.55) 97%,
    rgba(246, 239, 228, 0.85) 100%
  );
}
.ol-3d__status {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: var(--treibholz);
  font-size: 14px;
  z-index: 3;
}
.ol-3d__laden {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  z-index: 3;
}
.ol-3d__laden[hidden] {
  display: none;
}
.ol-3d__laden-titel {
  font-family: var(--display);
  font-size: 22px;
  color: var(--petrol);
}
.ol-3d__balken {
  width: 100%;
  height: 4px;
  background: var(--sand);
  border-radius: 2px;
  overflow: hidden;
}
.ol-3d__balken-fuell {
  display: block;
  height: 100%;
  width: 0;
  background: var(--moos);
  transition: width 0.2s;
}
.ol-3d__laden-schritt {
  font-size: 13px;
  color: var(--treibholz);
}
.ol-3d__hilfe {
  position: absolute;
  right: 16px;
  bottom: 10px;
  margin: 0;
  font-size: 12px;
  color: var(--treibholz);
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.ol-3d__hilfe.ist-weg {
  opacity: 0;
}

/* Marken im Modell (HTML-Overlays, per Kamera projiziert) */
.ol-3d__marken {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.ol-marke3d {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  white-space: nowrap;
}
.ol-marke3d[hidden] {
  display: none;
}
.ol-poi {
  border: 1px solid var(--petrol);
  background: var(--papier);
  color: var(--petrol);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(14, 42, 61, 0.12);
}
.ol-poi::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 1px;
  height: 14px;
  background: var(--petrol);
}
.ol-poi::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--papier);
  border: 1px solid var(--petrol);
}
.ol-poi.ist-aktiv,
.ol-poi:hover {
  background: var(--petrol);
  color: var(--cream);
}
.ol-plakette {
  border: 1px solid rgba(14, 42, 61, 0.35);
  background: var(--papier);
  color: var(--petrol);
  font-size: 12px;
  padding: 4px 9px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  box-shadow: 0 1px 4px rgba(14, 42, 61, 0.1);
}
.ol-plakette strong {
  font-weight: 600;
}
.ol-plakette span {
  color: var(--treibholz);
  font-size: 11px;
}
.ol-plakette.ist-aktiv {
  background: var(--petrol);
  color: var(--cream);
  border-color: var(--petrol);
}
.ol-plakette.ist-aktiv span {
  color: var(--bernstein-hell);
}
.ol-plakette::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 1px;
  height: 10px;
  background: rgba(14, 42, 61, 0.5);
}
/* Musste ein Schild ausweichen - zur Seite oder nach oben/unten -, dann zeigt
   seine Leine nicht mehr auf seinen Punkt, sondern irgendwohin, oft auf ein
   fremdes Gebaeude. Dann wird aus der Leine ein kleiner Pfeil, der in die
   richtige Richtung weist (Julian, 07.11.2026). Den Winkel setzt
   markenAktualisieren als --pfeil. */
.ol-marke3d.ist-versetzt::after {
  left: 50%;
  bottom: -9px;
  width: 0;
  height: 0;
  margin-left: -5px;
  background: none;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 9px solid var(--petrol);
  transform: rotate(var(--pfeil, 0deg));
  transform-origin: 50% 0;
}
.ol-marke3d.ist-versetzt::before {
  display: none;
}

.ol-nummer {
  font-size: 11px;
  font-weight: 600;
  color: var(--cream);
  background: var(--petrol);
  border-radius: 3px;
  padding: 1px 5px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ol-nummer.ist-aktiv {
  background: var(--bernstein);
}
.ol-name {
  font-size: 12px;
  color: var(--petrol);
  font-weight: 500;
  transform: translate(-50%, -50%);
  text-shadow:
    0 0 4px var(--cream),
    0 0 8px var(--cream);
  pointer-events: none;
}
.ol-name--ort-hier {
  font-size: 14px;
  font-weight: 600;
}
.ol-name--weiler {
  font-size: 11px;
  color: var(--treibholz);
  font-weight: 400;
}
.ol-name--haus {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
}

/* Kompass im Modell */
.ol-kompass-feld {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.ol-kompass {
  position: relative;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--sand);
  border-radius: 50%;
  background: var(--papier);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(14, 42, 61, 0.12);
}
.ol-kompass svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.ol-kompass circle {
  fill: none;
  stroke: var(--sand);
  stroke-width: 1;
}
.ol-kompass__nord {
  fill: var(--bernstein);
}
.ol-kompass__sued {
  fill: var(--petrol);
  opacity: 0.45;
}
.ol-kompass__mark {
  fill: var(--petrol);
  font-size: 8px;
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: 0.02em;
}
.ol-kompass__nord {
  fill: var(--bernstein);
}
/* Feste Marke am oberen Rand: dort steht immer die Blickrichtung */
.ol-kompass__blick {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--petrol);
  pointer-events: none;
}
.ol-kompass__richtung {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--petrol);
  background: var(--papier);
  border: 1px solid var(--sand);
  border-radius: 999px;
  padding: 1px 7px;
  pointer-events: none;
}
.ol-kompass:hover {
  border-color: var(--moos);
}

/* Seitenleiste */
.ol-3d__seite {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--papier);
  border: 1px solid var(--sand);
  border-radius: 6px;
  padding: 16px;
  align-self: stretch;
  position: relative;
  z-index: 2;
  min-height: 0;
  /* die Liste scrollt in sich, statt die Buehne zu verlaengern */
  overflow-y: auto;
}
.ol-3d__reiter {
  display: flex;
  gap: 4px;
  background: var(--cream);
  border-radius: 999px;
  padding: 4px;
}
.ol-3d__reiter button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--petrol);
  cursor: pointer;
}
.ol-3d__reiter button[aria-selected='true'] {
  background: var(--moos);
  color: var(--cream);
}
.ol-3d__leiste {
  overflow: auto;
  min-height: 0;
  flex: 1;
}
.ol-3d__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ol-3d__liste li {
  border-bottom: 1px solid var(--sand);
}
.ol-3d__liste li:last-child {
  border-bottom: 0;
}
/* nur die Eintraege selbst: Links in der Infokarte darunter wuerden sonst
   als volle Zeile mit Innenabstand dargestellt */
.ol-3d__liste li > a:not(.ol-knopf),
.ol-3d__liste li > button:not(.ol-knopf) {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 10px 6px;
  text-decoration: none;
  color: var(--tinte);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
}
.ol-3d__liste a:hover,
.ol-3d__liste button:hover,
.ol-3d__liste .ist-aktiv {
  background: var(--moos-hell);
}
.ol-3d__name {
  font-weight: 500;
  font-size: 15px;
  color: var(--petrol);
}
.ol-3d__kennzahl {
  font-size: 12px;
  color: var(--treibholz);
  white-space: nowrap;
}
.ol-3d__gruppe {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--treibholz);
  margin: 12px 6px 4px;
  font-weight: 600;
}
.ol-3d__gruppe:first-child {
  margin-top: 2px;
}
.ol-3d__info {
  border-top: 1px solid var(--sand);
  padding-top: 12px;
  position: relative;
}
.ol-3d__info[hidden] {
  display: none;
}
.ol-3d__zu {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: none;
  font-size: 15px;
  line-height: 1;
  color: var(--treibholz);
  cursor: pointer;
  opacity: 0.6;
}
.ol-3d__zu:hover {
  opacity: 1;
  background: var(--sand);
}
.ol-3d__foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 150px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 10px;
}
.ol-3d__foto[hidden] {
  display: none;
}
.ol-3d__titelzeile {
  position: relative;
  padding-right: 30px;
}
.ol-3d__info-titel {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 2px;
  color: var(--petrol);
  line-height: 1.1;
}
.ol-3d__info-zeile {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--treibholz);
}
.ol-3d__info-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}
.ol-3d__kontakt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  margin: 8px 0 0;
  font-size: 13px;
}
.ol-3d__kontakt[hidden] {
  display: none;
}
.ol-3d__kontakt dt {
  color: var(--treibholz);
  font-size: 12px;
  white-space: nowrap;
}
.ol-3d__kontakt dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.ol-3d__kontakt a {
  color: var(--petrol);
}
.ol-3d__bildquelle {
  margin: -6px 0 8px;
  font-size: 10px;
  color: var(--treibholz);
  opacity: 0.75;
}
.ol-3d__bildquelle[hidden] {
  display: none;
}
/* In der Liste nennt der Eintrag direkt darueber schon den Namen: Titelzeile
   und Schliesskreuz waeren eine Dopplung und kosten nur Hoehe. */
[data-liste] .ol-3d__titelzeile {
  display: none;
}
.ol-3d__hinweis {
  font-size: 12px;
  color: var(--treibholz);
  margin: 10px 6px 0;
}
.ol-3d__fuss {
  font-size: 11px;
  color: var(--treibholz);
  margin: 0;
}
.ol-3d__fuss a {
  color: inherit;
}

/* Kartenmodus (Reiter Umgebung) */
.ol-3d.ist-karte .ol-3d__kopf {
  background: rgba(246, 239, 228, 0.86);
  padding: 12px 16px 14px;
  margin: -12px -16px 0;
  border-radius: 8px;
}
.ol-pin {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bernstein);
  border: 2px solid var(--papier);
  box-shadow: 0 0 0 1px var(--petrol);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.ol-name--kreis {
  color: var(--moos);
  font-size: 11px;
  font-weight: 600;
  background: var(--papier);
  border: 1px dashed var(--moos);
  border-radius: 999px;
  padding: 2px 8px;
}

/* Aufklappbare Gruppen im Reiter Umgebung */
.ol-3d__gruppe-kopf {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  border: 0;
  background: var(--cream);
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--petrol);
  cursor: pointer;
  margin-top: 8px;
}
.ol-3d__gruppe-kopf:first-child {
  margin-top: 0;
}
.ol-3d__gruppe-kopf[aria-expanded='true'] {
  background: var(--moos-hell);
}
.ol-3d__anzahl {
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--petrol);
  border-radius: 999px;
  padding: 1px 8px;
  margin-left: auto;
}
.ol-3d__gruppe-kopf::after {
  content: '⌄';
  font-size: 14px;
  line-height: 1;
}
.ol-3d__gruppe-kopf[aria-expanded='true']::after {
  content: '⌃';
}

/* Infokarte klappt unter dem angeklickten Eintrag auf */
[data-liste] .ol-3d__info {
  border-top: 0;
  border-left: 2px solid var(--moos);
  padding: 8px 0 10px 12px;
  margin: 0 0 8px;
  background: var(--cream);
  border-radius: 0 6px 6px 0;
}
[data-liste] .ol-3d__foto {
  max-height: 128px;
  margin-bottom: 8px;
}
[data-liste] .ol-3d__info-zeile {
  margin-bottom: 4px;
}
[data-liste] .ol-knopf--voll {
  margin-top: 10px;
  padding: 8px 16px;
  font-size: 13px;
}

/* Zoomknoepfe */
.ol-zoom {
  position: absolute;
  right: 14px;
  bottom: 44px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 3;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(14, 42, 61, 0.12);
}
.ol-zoom button {
  width: 38px;
  height: 36px;
  border: 1px solid var(--sand);
  background: var(--papier);
  color: var(--petrol);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.ol-zoom button:hover {
  background: var(--moos-hell);
}

@media (max-width: 1100px) {
  .ol-3d {
    grid-template-columns: 1fr;
    grid-template-rows: 58dvh auto;
    height: auto;
    gap: 12px 0;
    padding: 12px;
  }
  .ol-3d__buehne {
    grid-row: 1;
    min-height: 58dvh;
  }
  .ol-3d__seite {
    grid-column: 1;
    grid-row: 2;
    max-height: none;
    padding: 12px;
  }
  .ol-kopfzeile {
    padding: 10px 12px;
  }
  .ol-nav {
    display: none;
  }
  .ol-marke__wort {
    font-size: 22px;
  }
  .ol-3d__maus {
    display: none;
  }
  /* Marken kleiner, sonst verdecken sie auf schmalen Geraeten das Modell */
  .ol-poi {
    font-size: 11px;
    padding: 4px 9px;
  }
  .ol-plakette {
    font-size: 11px;
    padding: 3px 7px;
  }
  .ol-plakette span {
    font-size: 10px;
  }
  .ol-nummer {
    font-size: 10px;
    padding: 1px 4px;
  }
  .ol-name {
    font-size: 11px;
  }
  .ol-3d__hilfe {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    bottom: 10px;
    max-width: calc(100% - 150px); /* Platz fuer Kompass links, Zoom rechts */
    font-size: 10px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(246, 239, 228, 0.82);
    border-radius: 999px;
    padding: 3px 10px;
  }
  .ol-3d__reiter button {
    padding: 8px 4px;
    font-size: 12px;
  }
  .ol-3d__name {
    font-size: 14px;
  }
  .ol-3d__liste li > a:not(.ol-knopf),
  .ol-3d__liste li > button:not(.ol-knopf) {
    padding: 12px 6px; /* groessere Trefferflaeche fuer den Finger */
  }
  .ol-3d__info-titel {
    font-size: 21px;
  }
  [data-liste] .ol-3d__foto {
    max-height: 150px;
  }
  .ol-3d__vignette {
    display: none; /* auf kleinen Flaechen frisst die Vignette zu viel Bild */
  }
}

@media (max-width: 560px) {
  .ol-3d {
    grid-template-rows: 52dvh auto;
    padding: 8px;
  }
  .ol-3d__buehne {
    min-height: 52dvh;
    border-radius: 4px;
  }
  .ol-marke__unter {
    display: none;
  }
  .ol-knopf {
    padding: 8px 14px;
    font-size: 14px;
  }
  /* Kontaktdaten kompakt: Beschriftung und Wert in einer Zeile */
  .ol-3d__kontakt {
    font-size: 12px;
  }
}

/* --- Telefon: ein Modell, ein Kartenstreifen -------------------------------
   Kein Reiter, keine Dauerliste. Zwei Oberflaechen auf einem Handyschirm sind
   immer eine zu viel - darum gibt es nur noch das Modell, darueber einen
   waagerecht wischbaren Streifen fester Hoehe. Angetippt wird genau ein Ziel,
   dann faehrt die Infokarte als Blatt hoch (Julian, 07.11.2026). */
.ol-handy {
  display: none;
}
@media (max-width: 760px) {
  .ol-3d {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: var(--buehne-hoehe, 86dvh);
    padding: 0;
    gap: 0;
    position: relative;
    overflow: hidden;
  }
  .ol-3d__buehne {
    grid-column: 1;
    grid-row: 1;
    min-height: 0;
    border-radius: 0;
  }
  /* Liste und Reiter entfallen auf dem Telefon vollstaendig */
  .ol-3d__seite {
    display: none;
  }
  /* Vollbild: auch die Kopfzeile der Webseite weicht. Die gemessene
     --buehne-hoehe ergibt dann von selbst die volle Fensterhoehe
     (Julian, 07.11.2026). */
  .ol-kopfzeile {
    display: none;
  }

  .ol-3d__buehne > .ol-handy {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    pointer-events: none; /* nur die Kinder fangen Beruehrungen */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Gruppenname des linken sichtbaren Kaertchens - ersetzt die Reiter */
  .ol-handy__gruppe {
    pointer-events: none;
    align-self: flex-start;
    margin: 0 0 6px 12px;
    padding: 4px 11px;
    border: 0;
    cursor: pointer;
    border-radius: 999px;
    background: rgba(246, 239, 228, 0.92);
    color: var(--petrol);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .ol-handy__streifen {
    pointer-events: auto;
    display: flex;
    gap: 10px;
    padding: 0 12px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ol-handy__streifen::-webkit-scrollbar {
    display: none;
  }

  .ol-handy__karte {
    scroll-snap-align: start;
    flex: 0 0 152px;
    height: 114px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--sand);
    border-radius: 12px;
    background: var(--papier);
    box-shadow: 0 3px 12px rgba(31, 42, 46, 0.18);
    text-align: left;
    cursor: pointer;
  }
  .ol-handy__karte.ist-aktiv {
    border-color: var(--moos);
    box-shadow: 0 0 0 2px var(--moos);
  }
  .ol-handy__bild {
    flex: none;
    height: 46px;
    background-size: cover;
    background-position: center;
    background-color: var(--cream);
  }
  .ol-handy__titel {
    padding: 6px 9px 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--petrol);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .ol-handy__zeile {
    margin-top: auto;
    padding: 0 9px 7px;
    font-size: 11px;
    color: var(--treibholz);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Schmale Leiste ganz unten: Auf der Anlage - Lodges - In der Umgebung.
     Ein Tipp springt in den jeweiligen Teil des Streifens. Sie fuellt genau
     den Streifen zwischen Kartenstreifen und der Navigationsleiste der
     Gaestemappe (Julian, 07.11.2026). */
  .ol-handy__bereiche {
    pointer-events: auto;
    display: flex;
    gap: 6px;
    padding: 0 12px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .ol-handy__bereiche::-webkit-scrollbar {
    display: none;
  }
  .ol-handy__bereiche button {
    flex: 1 1 0;
    text-align: center;
    flex: 0 0 auto;
    border: 1px solid var(--sand);
    border-radius: 999px;
    background: rgba(246, 239, 228, 0.93);
    color: var(--petrol);
    padding: 4px 11px;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
  }
  .ol-handy__bereiche button.ist-aktiv {
    background: var(--moos);
    border-color: var(--moos);
    color: var(--cream);
  }

  /* Infokarte als Blatt ueber dem Streifen - nur nach dem Antippen */
  .ol-handy__blatt {
    pointer-events: auto;
    /* So hoch, dass der Infotext einer Lodge am Stueck dasteht - mit 42dvh
       musste man im Blatt scrollen, um ihn zu Ende zu lesen (Julian,
       08.11.2026). Das Modell darueber schrumpft mit, die Hoehe wird
       gemessen (--buehne-hoehe). */
    max-height: 70dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 8px 8px;
    padding: 12px 14px 14px;
    background: var(--papier);
    border: 1px solid var(--sand);
    border-radius: 16px;
    box-shadow: 0 -8px 28px rgba(31, 42, 46, 0.2);
  }
  .ol-handy__blatt[hidden] {
    display: none;
  }
  .ol-handy__blatt .ol-3d__info {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
  }
  .ol-handy__blatt .ol-3d__foto {
    /* Flacher als vorher: das Foto nahm dem Text den Platz, den er zum
       Dastehen braucht. */
    max-height: 130px;
  }

  /* Bedienelemente nach oben, sonst liegen sie hinter dem Streifen */
  /* Alles unterhalb der Kameraaussparung: env(safe-area-inset-top) gibt an,
     wie weit der Schirm oben verdeckt ist. Der Hinweis stand genau darunter
     und war am Telefon von der Kamera ueberdeckt (Julian, 07.11.2026).
     Kompass links oben, Zoom rechts - in der Gaestemappe rutscht der Kompass
     unter den schwebenden Zurueck-Knopf, siehe Mappen-Ergaenzung. */
  .ol-zoom {
    bottom: auto;
    top: calc(env(safe-area-inset-top, 0px) + 46px);
    right: 12px;
  }
  .ol-kompass-feld {
    bottom: auto;
    top: calc(env(safe-area-inset-top, 0px) + 46px);
    left: 12px;
    right: auto;
  }
  .ol-3d__hilfe {
    bottom: auto;
    top: calc(env(safe-area-inset-top, 0px) + 52px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100% - 170px);
  }
}

.ol-3d__stand {
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

/* --- Ankunftsmodus (Empfangsmonitor) ---------------------------------------
   Aufruf mit ?ankunft=<Lodge>: das Modell fuellt den Schirm, die Liste
   verschwindet, oben steht die Begruessung. Fuer einen Fernseher gedacht,
   darum grosse Schrift und viel Kontrast. */
/* Der Monitor am Empfang zeigt nur das Modell, keine Webseiten-Navigation
   und keinen Mappen-Kopf. */
body:has(.ol-3d.ist-ankunft) .ol-kopfzeile,
body:has(.ol-3d.ist-ankunft) .ol-mappe-kopf {
  display: none;
}
.ol-3d.ist-ankunft {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  height: 100dvh;
  padding: 0;
  gap: 0;
}
.ol-3d.ist-ankunft .ol-3d__seite,
.ol-3d.ist-ankunft .ol-3d__hilfe,
.ol-3d.ist-ankunft .ol-kompass-feld,
.ol-3d.ist-ankunft .ol-zoom {
  display: none;
}
.ol-3d.ist-ankunft .ol-3d__buehne {
  border-radius: 0;
}
.ol-ankunft {
  position: absolute;
  left: 50%;
  top: 28px;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px 44px;
  border-radius: 10px;
  background: rgba(246, 239, 228, 0.93);
  box-shadow: 0 6px 28px rgba(14, 42, 61, 0.18);
  text-align: center;
  pointer-events: none;
}
.ol-ankunft[hidden] {
  display: none;
}
.ol-ankunft__name {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--petrol);
}
.ol-ankunft__lodge {
  font-size: 30px;
  font-weight: 600;
  color: var(--bernstein);
}
.ol-ankunft__hinweis {
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--treibholz);
}
@media (max-width: 1100px) {
  .ol-3d.ist-ankunft {
    grid-template-rows: minmax(0, 1fr);
    height: 100dvh;
  }
  .ol-ankunft {
    top: 12px;
    padding: 12px 24px;
  }
  .ol-ankunft__name {
    font-size: 26px;
  }
  .ol-ankunft__lodge {
    font-size: 19px;
  }
  .ol-ankunft__hinweis {
    font-size: 12px;
  }
}

/* --- Einbettung auf der Webseite -------------------------------------------
   Auf /hotel/areal laeuft die Ansicht in einem Rahmen: keine eigene Kopfzeile,
   die Hoehe gibt der Rahmen vor. Am Telefon zaehlt die gemessene Buehnenhoehe,
   nicht eine abgezogene Kopfzeile. */
body.ist-einbettung .ol-3d {
  height: 100dvh;
  padding: 16px 24px;
}
@media (max-width: 760px) {
  body.ist-einbettung .ol-3d {
    height: var(--buehne-hoehe, 100dvh);
    padding: 0;
  }
}