/* 3D-Rundgang — mobile-first (390 zuerst), Desktop per Media-Query. Titelband: faq.css. */

.rundgang-titel { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.25; margin-top: 8px; }

/* Tour: hochkant am Handy (Matterport ist dort gut bedienbar), quer am Desktop */
.tour-rahmen { position: relative; margin-top: 20px; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--tinte); }
.tour-rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tour-platzhalter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.tour-hinweis { font-size: 13.5px; color: var(--text-gedaempft); max-width: 420px; }
.tour-rahmen .tour-hinweis { color: rgba(251, 247, 239, 0.75); }
@media (min-width: 760px) { .tour-rahmen { aspect-ratio: 16 / 9; } }

/* Drohnen-Panorama: Bild-Karte öffnet die Vollbild-Ebene */
.rundgang-split { display: grid; gap: 24px; }
.drohne-karte { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: pointer; background: var(--tinte); aspect-ratio: 2 / 1; }
.drohne-karte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drohne-badge { position: absolute; top: 14px; left: 14px; background: rgba(166, 36, 42, 0.92); color: var(--weiss-warm); font-weight: 800; font-size: 14px; border-radius: 20px; padding: 6px 12px; }
.drohne-knopf { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); background: var(--rot); color: var(--weiss-warm); font-weight: 800; font-size: 15px; border-radius: 24px; padding: 11px 22px; white-space: nowrap; }
.drohne-karte:hover .drohne-knopf { background: var(--rot-tief); }
.rundgang-text .fliesstext { margin-top: 14px; }
@media (min-width: 1100px) { .rundgang-split { grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; } }

.pano-ebene { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; padding: 0; border: 0; background: #000; }
.pano-ebene::backdrop { background: rgba(0, 0, 0, 0.8); }
.pano-ebene iframe { width: 100%; height: 100%; border: 0; display: block; }
.pano-zu { position: absolute; top: 12px; right: 12px; z-index: 1; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(251, 247, 239, 0.95); color: var(--tinte); font-size: 30px; line-height: 1; cursor: pointer; }

/* Gigapixel: breite Panorama-Streifen */
.rundgang-intro { margin-top: 12px; max-width: 760px; }
.gpix-liste { display: grid; gap: 14px; margin-top: 20px; }
.gpix-karte { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.gpix-karte img { width: 100%; height: 110px; object-fit: cover; display: block; border-radius: 12px; }
.gpix-titel { display: block; margin-top: 6px; font-weight: 800; font-size: 14.5px; color: var(--rot); }
.gpix-karte:hover .gpix-titel { color: var(--rot-tief); }
@media (min-width: 760px) { .gpix-liste { grid-template-columns: 1fr 1fr; gap: 18px 22px; } .gpix-karte img { height: 130px; } }

/* Webcams */
.cam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.cam-grid--gross { grid-template-columns: 1fr; }
.cam { margin: 0; }
.cam-knopf { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.cam img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 12px; background: var(--surface-card); cursor: zoom-in; }
.cam-knopf img { aspect-ratio: 4 / 3; cursor: pointer; }
.cam figcaption { font-size: 13.5px; font-weight: 700; margin-top: 6px; }
.cam-titel { display: block; margin-top: 6px; font-weight: 800; font-size: 14.5px; color: var(--rot); }
/* Orts-Webcams: fünf Kacheln plus Panorama — unter 1100 zwei Spalten mit der ersten Kachel quer
   darüber (1 + 2 + 2), ab 1100 alle fünf in einer Reihe; das Panorama immer über die volle Breite. */
.cam-grid:not(.cam-grid--gross) .cam:first-child { grid-column: 1 / -1; }
@media (min-width: 760px) { .cam-grid { gap: 16px; } .cam-grid--gross { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cam-grid:not(.cam-grid--gross) { grid-template-columns: repeat(5, 1fr); } .cam-grid:not(.cam-grid--gross) .cam:first-child { grid-column: auto; } }

/* Lightbox der Orts-Webcams: Die Quellen sind klein (640 × 360) oder Panoramen (Koasaburg) —
   das Bild füllt die freie Fläche im eigenen Format (contain), Rand für Knöpfe und Zähler.
   Gilt nur hier, rundgang.css lädt nur diese Seite. */
.lightbox-bild { width: 100%; height: calc(100vh - 140px); max-width: 1600px; object-fit: contain; border-radius: 0; }
@media (min-width: 760px) { .lightbox-bild { width: calc(100% - 120px); } } /* Platz für die Pfeile links und rechts */
@media (max-width: 759px) {
    .lightbox-pfeil { top: auto; bottom: 4px; transform: none; font-size: 44px; }
    .lightbox-zaehler { bottom: 24px; }
    .lightbox-bild { height: calc(100vh - 180px); }
}
.cam--panorama { grid-column: 1 / -1; }
.cam--panorama img { aspect-ratio: auto; }