/* ==========================================================================
   360-Grad-Rundgang - Stilregeln der Standalone-Vorlage

   Diese Datei traegt NUR den Rundgang. Kein Theme, kein Raster, keine
   Kopfleiste, keine Typografie einer Website - alles das gehoert der Seite,
   in die der Rundgang spaeter eingebettet wird.

   Herkunft: der Abschnitt "360-Grad-Tour" aus dem Stylesheet, in dem der
   Rundgang zuerst entstanden ist, plus die Regeln der Bereichsknoepfe
   (.filter-tab). Uebernommen und entkoppelt am 25.08.2026.

   DREI ABWEICHUNGEN VOM URSPRUNG - bewusst, hier festgehalten:

   1. Die Farb- und Schriftvariablen sind AUFGELOEST und stehen unten im
      :root. Im Ursprung lagen sie ueber zwei Ebenen verteilt
      (--accent zeigte auf eine Markenfarbe, die woanders stand); diese Vorlage
      hat kein Theme unter sich.

   2. Die Markenschriften sind ERSETZT. Der Ursprung lud sie von
      fonts.googleapis.com. Diese Vorlage darf keine Anfrage nach aussen
      ausloesen, deshalb stehen dort Systemschriften. Betroffen sind nur die
      kleinen Bedienelemente - Bereichsknoepfe, Bildunterschrift,
      Hinweistexte. Die Panoramen sind unberuehrt.

   3. Die Farben sind NEUTRAL. Ein dunkles Grau mit einem ruhigen Blaugruen
      als Akzent - unauffaellig genug, um ueberall zu passen, und deutlich
      genug, um Hotspots erkennbar zu machen.

   JE KUNDE ANZUPASSEN: der :root-Block direkt darunter, sonst nichts.
   ========================================================================== */

:root {
  /* --- Je Kunde anpassen ------------------------------------------------
     --marke      Akzentfarbe: Rand und Icon der Hotspots, aktiver Knopf
     --marke-hell dieselbe Farbe eine Spur heller, fuer Hover und Leuchten
     Alles andere darunter ist neutrales Grau und passt meist unveraendert.
     --------------------------------------------------------------------- */
  --marke: #2FA6A0;
  --marke-hell: #4FC3BC;

  --grund-600: #242429;
  --grund-700: #1A1A1E;
  --grund-800: #121214;
  --grau-300: #9DA0A8;
  --grau-400: #71747C;
  --weiss: #FAFAFA;

  --accent: var(--marke);
  --accent-glow: var(--marke-hell);
  --bg-card: var(--grund-600);
  --bg-elevated: var(--grund-700);
  --bg-secondary: var(--grund-800);
  --border-color: rgba(255, 255, 255, 0.1);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
  --text-muted: var(--grau-400);
  --text-primary: var(--weiss);
  --text-secondary: var(--grau-300);

  /* Ersatz fuer die Markenschriften - siehe Abweichung 2 */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Segoe UI Semibold", system-ui, -apple-system, sans-serif;
}

/* Die Vorlage ist eine eigene Seite, kein Theme. Diese Grundlage sorgt dafuer,
   dass der Viewer auf dunklem Grund sitzt und die volle Hoehe bekommt. */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--grund-800);
  color: var(--text-primary);
  font-family: var(--font-body);
}

.filter-tab {
  padding: 10px 20px;
  border: 1px solid var(--grund-600);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.filter-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.filter-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 4px 12px rgba(255, 107, 74, 0.3);
}

/* ==========================================================================
   360-Grad-Tour (page-tour.php)
   ========================================================================== */

.tour-page {
  /* Die Kopfleiste liegt fix ueber der Seite und wuerde die Ueberschrift sonst
     verdecken. Gleicher Abstand wie .page-header, damit der Rundgang oben
     genauso sitzt wie jede andere Unterseite. */
  padding-top: 10rem;
  padding-bottom: 0;
}

.tour-wrap {
  margin: 2.5rem 0 3.5rem;
}

/* --- Viewer ---------------------------------------------------------- */

.tour-viewer {
  width: 100%;
  height: min(70vh, 700px);
  border-radius: 16px;
  overflow: hidden;
  /* Bezugsrahmen fuer den Kompass, der als Kind darin liegt. */
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
}

.tour-viewer.is-focused {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Navbar des Viewers an das Theme angleichen */
.tour-viewer .psv-navbar {
  background: rgba(10, 10, 11, 0.75);
  backdrop-filter: blur(6px);
}

.tour-viewer .psv-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* --- Kompass ----------------------------------------------------------
   Liegt im Viewer-Container und geht deshalb ins Vollbild mit. Das Gehaeuse
   steht, Norden bleibt oben - gedreht wird allein der Kegel, aus tour.js.
   Der dunkle Grund bleibt in beiden Farbschemata gleich, wie bei der
   Viewer-Leiste: die Scheibe liegt auf dem Bild, nicht auf der Seite.
   -------------------------------------------------------------------- */

.tour-compass {
  position: absolute;
  left: 14px;
  bottom: 54px;   /* ueber der 40 px hohen Viewer-Leiste */
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(10, 10, 11, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  /* Rein anzeigend: Ziehen und Wischen muessen zum Panorama durchgehen. */
  pointer-events: none;
  z-index: 5;
}

.tour-compass svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tour-compass-cone {
  fill: var(--accent);
  opacity: 0.32;
}

.tour-compass-north {
  fill: var(--accent);
}

.tour-compass-label {
  font-family: var(--font-body);
  font-size: 17px;      /* Nutzereinheiten im viewBox - skaliert mit */
  font-weight: 500;
  fill: #FFFFFF;
}

.tour-compass-tick {
  fill: rgba(255, 255, 255, 0.28);
}

.tour-compass-center {
  fill: rgba(255, 255, 255, 0.5);
}

/* --- Minimap -------------------------------------------------------------
   Runde Karte, die den Kompass ersetzt. Erscheint nur, wenn tour.json einen
   "minimap"-Block hat; ohne ihn baut tour.js nichts und diese Regeln greifen
   ins Leere - die Kompassregeln daruber bleiben dann unangetastet.

   Sie sitzt an der Stelle, an der bisher der Kompass stand. Das ist Absicht:
   der Kreis leistet dasselbe und mehr, also nimmt er den Platz ein statt
   einen zweiten zu belegen. Ausgeblendet wird der Kompass ueber die Klasse
   .hat-minimap, die tour.js erst setzt, wenn die Karte wirklich steht.

   Aufbau, von aussen nach innen:
     .tour-minimap          Huelle, traegt das Ein- und Ausblenden
     .tour-minimap-kreis    runde Maske, Grund und Rand
     .tour-minimap-dreher   dreht sich um -blickwinkelGrad()
     .tour-minimap-lage     Kartenbild und Marken, wird verschoben
     .tour-minimap-nord     Nordmarke am Rand, dreht mit
     .tour-minimap-kegel    Sichtkegel, steht fest und zeigt nach oben
   --------------------------------------------------------------------- */

/* Der alte Kompass tritt zurueck, sobald die Karte steht. */
.tour-viewer.hat-minimap .tour-compass {
  display: none;
}

.tour-minimap {
  position: absolute;
  left: 14px;
  bottom: 54px;          /* dieselbe Hoehe, auf der der Kompass sass */
  z-index: 5;
  /* Rein anzeigend: Ziehen und Wischen muessen zum Panorama durchgehen.
     Der Schalter dafuer sitzt in der Leiste, nicht auf der Karte.
     Der Kreis nimmt sich das gleich darunter gezielt zurueck - er braucht
     den Zeiger fuer die Aufhellung bei Kontakt. */
  pointer-events: none;
}

.tour-minimap.is-aus {
  display: none;
}

.tour-minimap-kreis {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  /* Grundflaeche auf 72 %: das Panorama scheint durch, die Karte draengt sich
     nicht vor. Damit das ueberhaupt wirkt, muss BEIDES durchscheinend sein -
     dieser Grund UND das Kartenbild darueber (.tour-minimap-lage). Die SVG
     traegt eine deckende blaue Flaeche; waere nur eines von beiden gesetzt,
     bliebe der Kreis undurchsichtig und die Regel wirkungslos. */
  background: rgba(0, 32, 96, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.30);
  /* Weicher, tiefer Schatten: der Kreis steht sonst ueber hellem Himmel
     kantenlos da und franst aus. */
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.45);
  /* Nimmt sich den Zeiger zurueck, den .tour-minimap abgegeben hat - ohne ihn
     gibt es kein :hover und damit keine Aufhellung bei Kontakt. Preis: ein
     Zug, der auf dem Kreis beginnt, dreht das Panorama nicht mehr. Der Kreis
     ist 132 px in einer Ecke; daneben bleibt die ganze Flaeche zum Ziehen. */
  pointer-events: auto;
  transition: background-color 0.18s ease;
}

/* Aufhellung bei Kontakt - Grund und Kartenbild gehen gemeinsam auf voll. */
.tour-minimap-kreis:hover {
  background: rgba(0, 32, 96, 1);
}

.tour-minimap-dreher {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  /* KEINE Uebergangsanimation. Die Karte folgt dem Ziehen unmittelbar -
     eine Verzoegerung fuehlte sich hier wie Trägheit an, nicht wie Ruhe. */
  transition: none;
  will-change: transform;
}

.tour-minimap-lage {
  position: absolute;
  background-repeat: no-repeat;
  /* Die SVG ist randlos und traegt das Seitenverhaeltnis des Gelaendes;
     Breite und Hoehe setzt tour.js aus der viewBox. Deshalb fuellt sie
     diesen Kasten genau, und left/top in Prozent treffen dieselbe Stelle
     wie map.x/map.y. */
  background-size: 100% 100%;
  /* Zweite Haelfte der 72 % - siehe .tour-minimap-kreis. Marken, Sichtkegel
     und Nordmarke bleiben davon unberuehrt und stehen weiter voll da: das
     Gelaende tritt zurueck, die Zeichen darauf nicht. */
  opacity: 0.72;
  /* left/top gleiten mit, damit der Ausschnitt beim STANDPUNKTWECHSEL
     nachzieht statt zu springen - man sieht dann, wohin man gewechselt ist.
     Nur bei gesetztem Zoom faellt das ueberhaupt auf; ohne ihn steht die
     Gelaendemitte fest und left/top aendern sich nie.

     DAS IST DIE EINZIGE STELLE mit einem Uebergang an der Karte, und das
     ist Absicht. Bis zum 07.09.2026 abends lag derselbe Uebergang auch auf
     den Marken und dem Kegel; da beide damals pro Frame einzeln gesetzt
     wurden, lief die Traegheit beim Drehen mit - die Marken hingen hinter
     dem Bild her. Jetzt liegen sie IN der Lage und bewegen sich mit ihr,
     ohne eigenen Uebergang.

     Die Drehung ist ausdruecklich nicht dabei: sie sitzt auf
     .tour-minimap-dreher und muss dem Ziehen unmittelbar folgen.
     Beim Zoomen wird der Uebergang ueber .ohne-uebergang abgeschaltet -
     dort aendern sich Groesse und Lage zugleich, und ein Uebergang nur auf
     der Lage liesse die Karte erst springen und sich dann finden. */
  transition: opacity 0.18s ease, left 0.35s ease, top 0.35s ease;
}

.tour-minimap-kreis:hover .tour-minimap-lage {
  opacity: 1;
}

/* Feste Pixelgroesse, unabhaengig vom Massstab der Karte. */
.tour-minimap-marke {
  position: absolute;
  width: 9px;
  height: 9px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  /* Leuchtend weiss mit dunkler Kontur. Vorher war die Marke innen
     durchsichtig mit weissem Rand - auf dem gruenen Rasen einer Golfkarte
     verschwand sie darin. Die dunkle Kontur traegt sie auch ueber hellem
     Sand und Wasser. */
  border: 1.5px solid rgba(9, 12, 16, 0.85);
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* KEIN Uebergang auf left/top. Die Marke sitzt in Prozent der Karte und
     bewegt sich mit ihr - da gibt es nichts zu interpolieren. Ein Uebergang
     hier war bis zum 07.09.2026 abends die Ursache dafuer, dass die Marken
     beim Drehen hinter dem Bild herhingen. */
  transition: transform .12s ease, background-color .12s ease;
}

.tour-minimap-marke:hover,
.tour-minimap-marke:focus-visible {
  background: #fffbe8;
  transform: translate(-50%, -50%) scale(1.25);
}

.tour-minimap-marke:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Der eigene Standpunkt: farblich abgesetzt und nicht anklickbar. */
.tour-minimap-marke.is-hier {
  background: var(--tour-akzent, #f5b301);
  cursor: default;
  transform: translate(-50%, -50%);
}

.tour-minimap-marke.is-hier:hover {
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  /* Hart statt gleitend: der Ausschnitt steht beim Knotenwechsel sofort an
     seiner neuen Stelle. Das ist keine Verschlechterung - es ist dieselbe
     Karte, nur ohne den Weg dorthin. Drehen und Zoomen sind ohnehin ohne
     Uebergang, hier faellt also nur der Standpunktwechsel weg. */
  .tour-minimap-lage,
  .tour-minimap-kegel { transition: none; }
  .tour-minimap-marke { transition: none; }
  .tour-minimap-marke:hover,
  .tour-minimap-marke:focus-visible { transform: translate(-50%, -50%); }
}

/* Nordmarke: kurzer Strich am Rand mit einem N darunter. Sie haengt im
   Dreher und wandert deshalb mit der Karte um den Kreis - genau das macht
   sie zum Ersatz fuer die Kompassnadel. */
.tour-minimap-nord {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding-top: 3px;
}

.tour-minimap-nord i {
  display: block;
  width: 1.5px;
  height: 7px;
  background: #fff;
  border-radius: 1px;
}

.tour-minimap-nord b {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Der Kegel ist so gross wie der Kreis und wird auf seinen Punkt zentriert.
   left/top setzt tour.js in Pixeln - dieselbe Rechnung wie fuer die Marken,
   damit Kegelspitze und Standpunkt nicht auseinanderfallen. In der
   Knotenfassung ergibt das genau die Kreismitte, und der Keil deckt sich dann
   Pixel fuer Pixel mit der frueheren Fassung (inset: 0).

   Er steht VOR den Marken im DOM und liegt damit darunter. */
.tour-minimap-kegel {
  position: absolute;
  /* Breite und Hoehe setzt tour.js in Pixeln. Sie duerfen NICHT in Prozent
     stehen: der Kegel liegt seit dem 07.09.2026 abends in der Lage, und
     100 % waeren dort die Kartengroesse - bei vierfachem Zoom ein Keil ueber
     das ganze Gelaende. Er zeigt eine Richtung, keine Reichweite. */
  transform: translate(-50%, -50%);
  pointer-events: none;
  /* Kein Uebergang: er sitzt in derselben Ebene wie die Marken und bewegt
     sich mit ihr. Seine Drehung setzt tour.js in denselben transform. */
}

.tour-minimap-kegel svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tour-minimap-kegel path {
  fill: #fff;
  opacity: 0.25;
}

/* --- Grosse Karte neben dem Panorama -------------------------------------
   Greift NUR, wenn tour.json "minimap": { "layout": "gross-rechts" } traegt
   UND der Schirm mindestens 769 px breit ist. Beides prueft tour.js; es
   setzt dann .ist-gross auf die Karte und .mit-karte-rechts auf die Buehne.
   Ohne diese Klassen greift hier keine einzige Regel - die Kreisfassung und
   der gesamte mobile Pfad bleiben unberuehrt.

   Die Masse kommen aus tour.js, nicht von hier: Breite und Hoehe des Kastens
   folgen dem Seitenverhaeltnis der viewBox. Ein aspect-ratio im Stylesheet
   waere eine zweite Wahrheit darueber und koennte der ersten widersprechen.
   -------------------------------------------------------------------------- */

/* Die Buehne ist ohne die Klasse ein gewoehnliches div und aendert nichts. */
.tour-buehne.mit-karte-rechts {
  display: flex;
  align-items: flex-start;
  gap: 16px;

  /* AUSBRUCH AUS DEM SEITENCONTAINER, seit dem 07.09.2026 nachmittags.
     .container deckelt bei 1240 px. Fuer Panorama UND Karte nebeneinander
     ist das zu eng: das Panorama blieb mit 784 px schmaler als die 1200 px,
     die es im kreis-Layout hat - die Karte nahm ihm die Breite weg, statt
     dass die Seite welche dazugewonnen haette.

     Gedehnt wird NUR die Buehne, nicht .container selbst. Die Ueberschrift,
     die Bereichsknoepfe und die Bildbeschreibung behalten damit ihre
     Zeilenlaenge - eine Ueberschrift ueber 1800 px waere schwer zu lesen.
     Der Weg dahin ist der uebliche: eigene Breite setzen und mit einem
     Rand nach links aus der Mitte des Elternteils herausschieben.
     calc(50% - <halbe Breite>) trifft die Seitenmitte unabhaengig davon,
     wie breit .container gerade ist.

     94vw statt 100vw laesst links und rechts Luft stehen und vermeidet
     einen waagerechten Balken, wenn eine Bildlaufleiste Platz nimmt. */
  width: min(1800px, 94vw);
  margin-left: calc(50% - min(900px, 47vw));
}

/* min-width: 0 ist noetig, sonst weigert sich ein Flex-Kind zu schrumpfen,
   und das Panorama draengt die Karte aus der Zeile. */
.tour-buehne.mit-karte-rechts .tour-viewer {
  flex: 1 1 auto;
  min-width: 0;

  /* HOEHE WAECHST MIT DER BREITE.
     Die Karte ist hochformatig (512:765) und bekommt die Hoehe des
     Panoramas; ihre Breite folgt daraus. Bei den bisherigen 700 px Hoehe
     konnte sie deshalb nie breiter als 468 px werden, egal wie viel Platz
     daneben stand - die Hoehe war der Begrenzer, nicht der Platz.
     Mehr Hoehe heisst hier also: breitere Karte.

     Der Deckel bleibt: 84vh laesst die Leiste des Browsers und ein Stueck
     Seite darunter stehen, 900 px verhindern, dass die Tour auf einem sehr
     hohen Schirm die ganze Seite einnimmt. */
  height: min(84vh, 900px);
}

.tour-minimap.ist-gross {
  /* Aus dem Overlay wird ein Nachbar: keine absolute Lage mehr, kein
     Abstand von unten links. */
  position: static;
  flex: 0 0 auto;
  z-index: auto;
  /* Als Overlay gab die Huelle den Zeiger ab, damit Ziehen zum Panorama
     durchgeht. Neben dem Panorama gibt es nichts, wozu etwas durchgehen
     muesste - und die Marken brauchen ihn. */
  pointer-events: auto;
}

.tour-minimap.ist-gross .tour-minimap-kreis {
  /* Kein Kreis mehr, sondern eine Karte mit denselben Ecken wie der Viewer. */
  border-radius: 16px;
  /* KEIN Rand. Er verschoebe jeden Standpunkt um seine Breite gegen die
     Karte darunter - gemessen am 07.09.2026, 1 px auf allen neun Punkten.
     Die Kante traegt hier der Schatten; im Kreis, wo die Karte ueber dem
     Panorama liegt, bleibt der Rand noetig und steht deshalb dort. */
  border: 0;
  /* Voll deckend: die Karte steht nicht mehr ueber dem Panorama, sondern
     daneben. Die 72 % waren dafuer da, das Panorama durchscheinen zu lassen;
     hier waere davon nur ein blasser Grund uebrig. */
  background: rgba(0, 32, 96, 1);
  box-shadow: var(--shadow-card, 0 4px 18px rgba(0, 0, 0, 0.45));
}

.tour-minimap.ist-gross .tour-minimap-lage {
  /* Aus demselben Grund wie oben - und gleich voll, nicht erst bei Kontakt. */
  opacity: 1;
}

/* Die Karte steht fest, also ist auch die Nordmarke nicht mehr in Bewegung.
   Sie bleibt oben - die erzeugten Karten sind genordet, siehe das
   desc-Element der SVG. */
.tour-minimap.ist-gross .tour-minimap-nord {
  opacity: 0.75;
}

/* Auf der grossen Karte ist mehr Platz; ein groesserer Punkt trifft sich
   leichter und verdeckt trotzdem nichts. */
.tour-minimap.ist-gross .tour-minimap-marke {
  width: 12px;
  height: 12px;
  border-width: 2px;
}

/* Der Sichtkegel dreht sich hier selbst (tour.js setzt die Drehung in den
   transform mit hinein). Er darf deshalb nicht so gross sein wie im Kreis,
   wo er den ganzen Ausschnitt fuellt - auf der grossen Karte waere das ein
   Keil ueber das halbe Gelaende. */
.tour-minimap.ist-gross .tour-minimap-kegel {
  width: 96px;
  height: 96px;
}

.tour-minimap.ist-gross .tour-minimap-quelle {
  font-size: 10px;
}

/* Waehrend am Zoomregler gezogen wird: keine Uebergaenge. tour.js setzt die
   Klasse bei "input" und nimmt sie bei "change" - also beim Loslassen -
   wieder weg. Ohne das laeuft die Karte jedem Zwischenwert des Reglers
   0,35 s lang hinterher, und aus dem Skalieren wird ein Springen und
   Nachfinden. */
.tour-minimap.ohne-uebergang .tour-minimap-lage,
.tour-minimap.ohne-uebergang .tour-minimap-marke,
.tour-minimap.ohne-uebergang .tour-minimap-kegel {
  transition: none;
}

/* --- Zoomregler am Kreis --------------------------------------------------
   Nur im kreis-Layout; im Grossformat nimmt tour.js ihn aus dem Baum.
   Er sitzt unter dem Kreis und ist so breit wie dieser.
   -------------------------------------------------------------------------- */

.tour-minimap-zoom {
  /* Die Huelle .tour-minimap gibt den Zeiger ab, damit Ziehen zum Panorama
     durchgeht. Der Regler braucht ihn zurueck - sonst laesst er sich weder
     ziehen noch anklicken. */
  pointer-events: auto;
  margin-top: 6px;
  padding: 0 2px;
}

.tour-minimap-zoom-regler {
  display: block;
  width: 100%;
  height: 14px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Die Bahn. Firefox und WebKit brauchen eigene Selektoren; sie lassen sich
   NICHT in einer Regel zusammenfassen - ein unbekannter Selektor macht in
   manchen Browsern die ganze Regel ungueltig. Deshalb steht hier zweimal
   dasselbe. */
.tour-minimap-zoom-regler::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.tour-minimap-zoom-regler::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
}

.tour-minimap-zoom-regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;          /* mittig auf der 4-px-Bahn */
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(9, 12, 16, 0.85);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
}

.tour-minimap-zoom-regler::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(9, 12, 16, 0.85);
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.55);
}

.tour-minimap-zoom-regler:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Feste Schriftgroesse - die Namensnennung muss lesbar bleiben. Sie steht
   ausserhalb der SVG, damit sie nicht mitskaliert. ODbL verlangt sie
   sichtbar an der Karte; sie ist nicht wegzulassen. */
.tour-minimap-quelle {
  margin: 3px 0 0;
  font-size: 8px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.60);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* Der Schalter in der Leiste.
   Photo Sphere Viewer gibt eigenen Knoepfen .psv-custom-button mit
   width: auto - gedacht fuer Beschriftungen. Hier steht ein Symbol wie bei
   den Nachbarn, also wird die Breite auf dieselben 20 px zurueckgeholt.
   Groesse, Farbe, Innenabstand und die Vergroesserung bei Kontakt kommen
   dadurch unveraendert aus psv-bundle.css - hier steht nur, was abweicht. */
.psv-button.psv-custom-button.tour-karte-btn {
  width: 20px;
}

/* Karte ausgeblendet: der Knopf steht gedaempft, aber lesbar. */
.psv-button.tour-karte-btn.is-aus {
  opacity: 0.45;
}

.tour-keyboard-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.tour-keyboard-hint svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* --- Bereichs-Leiste (Vorbild: .filter-tab) --------------------------- */

.tour-nodes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 1.4rem;
}

/* Eine display-Angabe per Klasse schlaegt das [hidden] des Browsers. Ohne
   diese Regel bleiben Tastaturhinweis und Bereichsleiste im WebGL-Fallback
   sichtbar, obwohl tour.js sie versteckt. */
.tour-keyboard-hint[hidden],
.tour-nodes[hidden] {
  display: none;
}

/* Der aktive Zustand kommt vollstaendig aus .filter-tab.active (gefuellte
   Pille in --accent). Hier bewusst keine eigene Farbe setzen - eine zweite
   Regel mit color: var(--accent) faerbt die Schrift orange auf orangem Grund
   und macht die Beschriftung unlesbar. */

.tour-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}

.tour-share-btn svg {
  width: 16px;
  height: 16px;
}

/* --- Hotspots --------------------------------------------------------
   Ein flaechig in --accent eingefaerbter Hotspot verschwindet, sobald die
   Wand dahinter eine aehnliche Farbe hat. Deshalb heller, halbtransparenter
   Grund und --accent nur als Rand und Icon - das haelt auf jedem Untergrund.
   -------------------------------------------------------------------- */

.tour-hotspot {
  cursor: pointer;
}

.tour-hotspot-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(250, 250, 250, 0.88);
  border: 2px solid var(--accent);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  color: var(--accent);
  transition: transform 0.2s ease, background 0.2s ease;
}

.tour-hotspot-dot svg {
  width: 22px;
  height: 22px;
}

.tour-hotspot:hover .tour-hotspot-dot,
.tour-hotspot:focus-visible .tour-hotspot-dot {
  background: var(--weiss);
  border-color: var(--accent-glow);
  color: var(--accent-glow);
  transform: scale(1.12);
}

.tour-hotspot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* --- Videokreise ------------------------------------------------------
   Ein Infopunkt mit Video ist kein Icon vor einem Video, sondern das Video
   selbst - rund, stumm, in Schleife. Die Groesse steht hier und nicht in
   tour.js: sie aendert sich mit der Bildschirmbreite, und zwei Zahlen an
   zwei Orten liefen frueher oder spaeter auseinander.

   Der Kreis waechst NICHT mit dem Zoom. Photo Sphere Viewer skaliert
   Marker vom Typ 'element' nur, wenn hoverScale gesetzt ist - das ist es
   nicht. Ein mitwachsender Kreis waere auch falsch: er ist ein
   Bedienelement, kein Teil des Bildes.
   -------------------------------------------------------------------- */

.tour-videopunkt {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(20, 20, 20, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

.tour-videopunkt-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  /* Der Rand liegt als eigener Ring darueber (siehe unten). Am <video>
     selbst wuerde er auf iOS unter dem Bild verschwinden, sobald die
     Wiedergabe beginnt. */
  background: #111;
}

/* Rand und Innenschatten als eigene Lage. Sie liegt ueber dem Video und
   nimmt keine Zeigerereignisse an, damit der Klick den Marker trifft. */
.tour-videopunkt-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(15, 15, 15, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  pointer-events: none;
}

/* Bei reduzierter Bewegung laeuft nichts - der Kreis zeigt nur sein
   Standbild. Ohne einen Hinweis waere er dann von einem runden Foto nicht
   zu unterscheiden, und niemand kaeme auf die Idee, ihn anzuklicken.
   Deshalb hier ein Dreieck, rein aus Rahmen gebaut: kein Emoji, keine
   zweite Datei. Es sitzt im Ring und nimmt keine Zeigerereignisse an. */
.tour-videopunkt.ist-ruhig .tour-videopunkt-ring::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.92);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

.tour-hotspot:hover .tour-videopunkt,
.tour-hotspot:focus-visible .tour-videopunkt {
  transform: scale(1.06);
}

.tour-hotspot:hover .tour-videopunkt-ring,
.tour-hotspot:focus-visible .tour-videopunkt-ring {
  border-color: var(--accent);
}

@media (max-width: 600px) {
  .tour-videopunkt {
    width: 72px;
    height: 72px;
  }

  .tour-videopunkt-ring {
    border-width: 2px;
  }
}

/* --- Panel eines Infopunkts -------------------------------------------
   PSV oeffnet sein eigenes Panel und legt diesen Inhalt hinein. Gestaltet
   wird nur das Innere; Rahmen, Breite und Schliessknopf gehoeren dem
   Viewer.
   -------------------------------------------------------------------- */

.tour-panel {
  padding: 4px 2px 8px;
}

.tour-panel-titel {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--text-primary);
}

/* Das Video im Panel nimmt die volle Panelbreite und rechnet seine Hoehe
   selbst aus.

   Bis zum 09.09.2026 stand hier zusaetzlich max-height: 60vh und
   background: #111. Das war der Grund fuer die schwarzen Streifen auf dem
   Handy: die Hoehendeckelung machte den Kasten breiter als das Bild -
   die Clips sind Hochformat 540x960 -, und ein <video> zeichnet sein Bild
   von Haus aus mit object-fit: contain hinein. Was rechts und links
   uebrig blieb, war der Hintergrund des Kastens.

   Deshalb beides weg. Ohne feste Hoehe gibt es keinen Rest, der
   eingefaerbt werden koennte, und ohne Hintergrund faellt auch beim
   Laden nichts Schwarzes auf. max-width haelt es sicher im Panel; das
   Panel selbst ist 400 px breit und auf calc(100% - 9px) gedeckelt,
   auf schmalen Schirmen also schmaler als der Bildschirm. */
.tour-panel-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 0 14px;
  border-radius: 10px;
}

.tour-panel-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.tour-panel-text p {
  margin: 0 0 0.8em;
}

.tour-panel-text p:last-child {
  margin-bottom: 0;
}

.tour-panel-knopf {
  display: inline-block;
  margin-top: 16px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--weiss);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: background 0.2s ease;
}

.tour-panel-knopf:hover,
.tour-panel-knopf:focus-visible {
  background: var(--accent-glow);
}

/* Wechselpunkte zwischen den Raeumen
   Die Abhebung vom Panorama kommt als Kontur am SVG-Pfad, nicht als
   drop-shadow. Grund: filter legt auf iOS fuer jedes Element eine eigene
   Kompositionsebene an. Die Pfeile werden bei jeder Drehung neu gesetzt, die
   Filterebene zeichnet dabei nicht mit - auf einem iPhone 16 Pro (iOS 26.6)
   blieben ihre Schatten fest ueber dem Panorama stehen. Belegt am 20.08.2026
   am Livesystem: ohne diesen filter fehlerfrei, mit ihm nicht.
   Nicht auf drop-shadow zurueckbauen - stroke ist reine Malfarbe und braucht
   keine eigene Ebene. paint-order zeichnet den Umriss vor der Fuellung, damit
   er aussen liegt und die weisse Flaeche nicht beschneidet. */
.tour-link-arrow svg path {
  stroke: rgba(0, 0, 0, 0.6);
  stroke-width: 4;
  stroke-linejoin: round;
  paint-order: stroke;
}

.tour-link-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* --- Rueckmeldung ----------------------------------------------------- */

.tour-toast {
  margin: 0.9rem 0 0;
  padding: 0.7rem 1.1rem;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  color: var(--text-primary);
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tour-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Bildbeschreibung ------------------------------------------------- */

.tour-description {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.tour-description summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 500;
}

.tour-description summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tour-description p {
  margin: 0.8rem 0 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* --- Fallback ohne WebGL ---------------------------------------------- */

.tour-fallback-hint {
  margin: 0 0 1.4rem;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.tour-fallback-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.tour-fallback-item {
  margin: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.tour-fallback-item img {
  display: block;
  width: 100%;
  height: auto;
}

.tour-fallback-item figcaption {
  display: block;
  padding: 1rem 1.1rem 1.2rem;
}

.tour-fallback-item figcaption strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.tour-fallback-item figcaption span {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- Hinweis bei deaktiviertem Modul ---------------------------------- */

.tour-notice {
  max-width: 620px;
  margin: 3rem auto;
  padding: 2.5rem 2rem;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.tour-notice-icon {
  color: var(--accent);
  margin-bottom: 1rem;
}

.tour-notice-icon svg {
  width: 40px;
  height: 40px;
}

.tour-notice-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--text-primary);
  margin: 0 0 0.7rem;
}

.tour-notice-text {
  color: var(--text-secondary);
  margin: 0 0 1.6rem;
  line-height: 1.65;
}

/* --- Debug-Overlay (nur Admin mit ?tour-debug=1) ----------------------- */

.tour-debug {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9000;
  width: 300px;
  max-height: 60vh;
  overflow: auto;
  padding: 0.9rem 1rem;
  background: rgba(10, 10, 11, 0.94);
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: #FAFAFA;
  font-size: 0.8rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.tour-debug-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.7rem;
}

.tour-debug-node {
  color: var(--accent);
  font-size: 0.9rem;
}

.tour-debug-coords {
  font-family: monospace;
}

.tour-debug-modes {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.7rem;
}

.tour-debug-modes label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.tour-debug-start {
  width: 100%;
  padding: 0.5rem 0.7rem;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tour-debug-start:hover {
  border-color: var(--accent-glow);
  color: var(--accent-glow);
}

.tour-debug-out {
  margin: 0.7rem 0 0;
  padding: 0.6rem;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-family: monospace;
  font-size: 0.72rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- Light-Themes ------------------------------------------------------
   Neue Komponenten erben die Light-Varianten nicht automatisch.
   ---------------------------------------------------------------------- */

[data-theme="light"] .tour-viewer,
[data-theme="light-blue"] .tour-viewer,
[data-theme="light-green"] .tour-viewer,
[data-theme="light-purple"] .tour-viewer,
[data-theme="light"] .tour-fallback-item,
[data-theme="light-blue"] .tour-fallback-item,
[data-theme="light-green"] .tour-fallback-item,
[data-theme="light-purple"] .tour-fallback-item,
[data-theme="light"] .tour-notice,
[data-theme="light-blue"] .tour-notice,
[data-theme="light-green"] .tour-notice,
[data-theme="light-purple"] .tour-notice {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
}

[data-theme="light"] .tour-description,
[data-theme="light-blue"] .tour-description,
[data-theme="light-green"] .tour-description,
[data-theme="light-purple"] .tour-description,
[data-theme="light"] .tour-fallback-hint,
[data-theme="light-blue"] .tour-fallback-hint,
[data-theme="light-green"] .tour-fallback-hint,
[data-theme="light-purple"] .tour-fallback-hint,
[data-theme="light"] .tour-toast,
[data-theme="light-blue"] .tour-toast,
[data-theme="light-green"] .tour-toast,
[data-theme="light-purple"] .tour-toast {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Auf hellem Grund braucht der Hotspot einen kraeftigeren Schatten, sonst
   verliert der helle Kreis seine Kontur. */
[data-theme="light"] .tour-hotspot-dot,
[data-theme="light-blue"] .tour-hotspot-dot,
[data-theme="light-green"] .tour-hotspot-dot,
[data-theme="light-purple"] .tour-hotspot-dot {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Die Viewer-Navbar liegt immer auf dem Panorama, bleibt also dunkel. */
[data-theme="light"] .tour-viewer .psv-navbar,
[data-theme="light-blue"] .tour-viewer .psv-navbar,
[data-theme="light-green"] .tour-viewer .psv-navbar,
[data-theme="light-purple"] .tour-viewer .psv-navbar {
  background: rgba(10, 10, 11, 0.75);
}

/* --- Mobile ----------------------------------------------------------- */

@media (max-width: 768px) {
  .tour-page {
    /* Mobil dieselbe Vorgabe wie .hero und .page-header. */
    padding-top: 80px;
  }

  .tour-viewer {
    height: min(60vh, 480px);
    border-radius: 12px;
  }

  .tour-compass {
    /* Der fixe Buchungsbalken liegt am Bildschirmrand und deckt die
       unteren rund 68 px ab - der Kompass gehoert darueber. */
    left: 10px;
    bottom: 76px;
    width: 56px;
    height: 56px;
  }

  /* Die Karte bleibt mobil - als Kreis ist sie klein genug. Der 240-px-Kasten
     musste hier noch weichen, weil er ueber die Haelfte des Panoramas deckte;
     108 px tun das nicht. Sie rueckt auf dieselbe Hoehe wie der Kompass zuvor,
     ueber den fixen Buchungsbalken am unteren Bildschirmrand. */
  .tour-minimap {
    left: 10px;
    bottom: 76px;
  }

  .tour-minimap-kreis {
    width: 108px;
    height: 108px;
  }

  .tour-nodes {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .tour-nodes::-webkit-scrollbar {
    display: none;
  }

  .tour-nodes .filter-tab {
    flex: 0 0 auto;
  }

  .tour-share-btn {
    margin-left: 0;
  }

  .tour-fallback-grid {
    grid-template-columns: 1fr;
  }

  .tour-debug {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: 8px;
  }
}

/* --- Reduzierte Bewegung ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .tour-hotspot-dot,
  .tour-toast,
  .tour-debug-start,
  .tour-videopunkt {
    transition: none;
  }

  .tour-hotspot:hover .tour-hotspot-dot,
  .tour-hotspot:focus-visible .tour-hotspot-dot,
  .tour-hotspot:hover .tour-videopunkt,
  .tour-hotspot:focus-visible .tour-videopunkt {
    transform: none;
  }
}

/* ==========================================================================
   SEITENRAHMEN — gehört NICHT zum Rundgang

   Der Rundgang endet oben. Was hier folgt, sind vier Klassen, die im Ursprung
   vom Theme der Kundenseite kamen: .container, .section-header, .section-title
   und .section-subtitle. Ohne sie stünde die Vorlage als eigenständige Seite
   ohne Rand und ohne Überschrift da.

   Wird der Rundgang in eine bestehende Website eingebaut, bringt diese ihre
   eigenen Regeln dafür mit — dann diesen Block LÖSCHEN, damit er nicht gegen
   das Layout der Seite arbeitet.
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-header {
  text-align: center;
  padding: 48px 0 28px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0 0 12px;
  color: var(--text-primary);
}

.section-subtitle {
  max-width: 60ch;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 600px) {
  .section-header { padding: 28px 0 20px; }
}