/* =============================================================================
 *  tour-skin.css  -  SOURCE FILE
 *
 *  Do not edit the copies in assets/tour/ and assets/tour-1og/. Edit this one
 *  and run `npm run sync:tour`, which copies it into both tours and makes sure
 *  each index.html links it. Two hand-maintained copies had already started to
 *  drift once; one source removes the possibility.
 *
 *  Loaded AFTER the generated style.css and overriding it, rather than editing
 *  that file: style.css is Marzipano Tool output, so keeping the changes
 *  separate means a tour can be regenerated without losing this work.
 *
 *  Layout, following a gamepad:
 *
 *      [ nav ]          [ scene name ]          [ autorotate ]
 *
 *      [ D-pad ]                                    [ +/- ]
 *
 *  The arrows sit in a cross bottom-left and the zoom pair bottom-right, the
 *  way a controller puts the d-pad under the left thumb and the buttons under
 *  the right.
 * ========================================================================== */

:root {
  --ui-bg: rgba(18, 22, 30, 0.58);
  --ui-bg-hover: rgba(18, 22, 30, 0.82);
  --ui-border: rgba(255, 255, 255, 0.16);
  --ui-fg: #fff;
  --ui-accent: #3357a1;
  --ui-blur: blur(14px) saturate(1.4);
  --ui-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  --ui-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --btn: 46px;      /* control diameter        */
  --cell: 50px;     /* d-pad grid pitch        */
  --edge: 20px;     /* distance from the edges */

  /* Must match viewer.setIdleMovement() in index.js. */
  --idle: 3000ms;
}

/* -----------------------------------------------------------------------------
 *  Szenenliste - entfernt
 *  Every scene carries link hotspots, so the panorama itself is the way
 *  between them and the list on the left was redundant. Hidden rather than
 *  deleted from the markup: index.js queries these elements on load and would
 *  throw on null.
 * -------------------------------------------------------------------------- */

#sceneList,
#sceneListToggle {
  display: none !important;
}

/* -----------------------------------------------------------------------------
 *  Icons
 *  The markup's <img class="icon"> bitmaps are hidden and replaced by a mask on
 *  the button itself, so every icon is a crisp vector in one colour.
 * -------------------------------------------------------------------------- */

#autorotateToggle .icon,
#fullscreenToggle .icon,
.viewControlButton .icon {
  display: none !important;
}

#autorotateToggle::after,
#fullscreenToggle::after,
.viewControlButton::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 21px;
  height: 21px;
  background-color: var(--ui-fg);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  transition: background-color 180ms var(--ui-ease);
}

/* -----------------------------------------------------------------------------
 *  Shared button look
 * -------------------------------------------------------------------------- */

/* `display` is deliberately NOT set for all of them at once: Marzipano keeps
   #fullscreenToggle hidden unless the tour enables the fullscreen button, and
   forcing it visible here made it overlap the autorotate button. */
#autorotateToggle,
.viewControlButton,
body.fullscreen-enabled #fullscreenToggle {
  display: grid !important;
}

#autorotateToggle,
#fullscreenToggle,
.viewControlButton {
  place-items: center;
  width: var(--btn) !important;
  height: var(--btn) !important;
  padding: 0 !important;
  background-color: var(--ui-bg) !important;
  border: 1px solid var(--ui-border);
  border-radius: 50%;
  box-shadow: var(--ui-shadow);
  -webkit-backdrop-filter: var(--ui-blur);
  backdrop-filter: var(--ui-blur);
  cursor: pointer;
  transition: background-color 200ms var(--ui-ease),
              transform 260ms var(--ui-ease),
              border-color 200ms var(--ui-ease);
}

#autorotateToggle:hover,
#fullscreenToggle:hover,
.viewControlButton:hover {
  background-color: var(--ui-bg-hover) !important;
  border-color: rgba(255, 255, 255, 0.34);
  transform: translateY(-2px);
}

#autorotateToggle:active,
#fullscreenToggle:active,
.viewControlButton:active {
  transform: translateY(0) scale(0.94);
}

/* -----------------------------------------------------------------------------
 *  Autodreh - top right, and the most prominent control on screen
 * -------------------------------------------------------------------------- */

#autorotateToggle {
  position: absolute;
  top: var(--edge) !important;
  right: var(--edge) !important;
  width: 54px !important;
  height: 54px !important;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5.2v13.6L19 12z'/%3E%3C/svg%3E");
}

#autorotateToggle::after {
  width: 24px;
  height: 24px;
}

/* `enabled` means autorotate is running, so the button offers pause. Filled in
   the accent colour: this is the one control people look for. */
#autorotateToggle.enabled {
  background-color: var(--ui-accent) !important;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 6px 22px rgba(51, 87, 161, 0.55);
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='7' y='5' width='3.4' height='14' rx='1.2'/%3E%3Crect x='13.6' y='5' width='3.4' height='14' rx='1.2'/%3E%3C/svg%3E");
}

#autorotateToggle.enabled:hover {
  background-color: var(--ui-accent) !important;
  filter: brightness(1.12);
}

body.fullscreen-enabled #autorotateToggle {
  right: calc(var(--edge) + 62px) !important;
}

#fullscreenToggle {
  top: var(--edge) !important;
  right: var(--edge) !important;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E");
}

/* --- Countdown bis der Autodreh wieder einsetzt ----------------------------
 * Touching the panorama pauses the rotation for a moment and then it starts
 * again on its own, which is startling when nothing says it is coming. The
 * ring drains around the button over exactly that delay and the pill spells
 * out the seconds.
 * ------------------------------------------------------------------------- */

.ar-ring {
  position: absolute;
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  pointer-events: none;
  opacity: 0;
  transform: rotate(-90deg);          /* start the sweep at 12 o'clock */
  transition: opacity 200ms var(--ui-ease);
}

.ar-ring circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.ar-ring__track { stroke: rgba(255, 255, 255, 0.22); }

.ar-ring__bar {
  stroke: #fff;
  /* r = 30 -> circumference 188.5 */
  stroke-dasharray: 188.5;
  stroke-dashoffset: 188.5;
}

#autorotateToggle.is-counting .ar-ring { opacity: 1; }

#autorotateToggle.is-counting .ar-ring__bar {
  animation: ar-drain var(--idle) linear forwards;
}

@keyframes ar-drain {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: 188.5; }
}

.ar-countdown {
  position: absolute;
  top: calc(var(--edge) + 62px);
  right: var(--edge);
  padding: 0.4rem 0.7rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ui-fg);
  background-color: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  box-shadow: var(--ui-shadow);
  -webkit-backdrop-filter: var(--ui-blur);
  backdrop-filter: var(--ui-blur);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 200ms var(--ui-ease), transform 200ms var(--ui-ease);
}

.ar-countdown.is-on {
  opacity: 1;
  transform: none;
}

/* -----------------------------------------------------------------------------
 *  Navigation zurück zum Gebäudeplan und zwischen den Rundgängen
 * -------------------------------------------------------------------------- */

.tnav {
  position: absolute;
  bottom: var(--edge);
  right: var(--edge);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background-color: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  box-shadow: var(--ui-shadow);
  -webkit-backdrop-filter: var(--ui-blur);
  backdrop-filter: var(--ui-blur);
}

/* Zurück zur Startseite - oben links, nur das Zeichen. */
.thome {
  position: absolute;
  top: var(--edge);
  left: var(--edge);
  z-index: 10;
  display: grid;
  place-items: center;
  width: var(--btn);
  height: var(--btn);
  color: #fff;
  background-color: var(--ui-accent);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  box-shadow: var(--ui-shadow);
  transition: background-color 200ms var(--ui-ease),
              transform 260ms var(--ui-ease);
}

.thome:hover {
  background-color: #2a4784;
  transform: translateY(-2px);
}

.thome:active { transform: translateY(0) scale(0.94); }

.thome svg {
  width: 20px;
  height: 20px;
}

.tnav__home,
.tnav__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  /* .tnav__home is a <button> now, so the UA's own chrome has to go. */
  margin: 0;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  height: 38px;
  padding: 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  transition: background-color 180ms var(--ui-ease), color 180ms var(--ui-ease);
}

.tnav__home:hover,
a.tnav__item:hover {
  color: var(--ui-fg);
  background-color: rgba(255, 255, 255, 0.14);
}

.tnav__home svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* The same button as on the homepage: the supplied mark as a mask so it takes
   the colour from here, the same blue, the same rounded rectangle. The path is
   one hop up from this file, exactly as it is from assets/css/main.css, so
   both stylesheets name the identical file. */
.tnav__home {
  gap: 0.5rem;
  padding: 0 1rem;
  color: #fff !important;
  background-color: var(--ui-accent);
  border-radius: 0.7rem;
}

.tnav__home:hover {
  background-color: #2a4784 !important;
}

.tnav__home::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: var(--gplan-mark) center / contain no-repeat;
  mask: var(--gplan-mark) center / contain no-repeat;
  --gplan-mark: url("../images/gebaeudeplan-icon.png");
}

.tnav__home svg { display: none; }

.tnav__sep {
  width: 1px;
  height: 20px;
  margin-inline: 0.15rem;
  background-color: rgba(255, 255, 255, 0.18);
}

/* -----------------------------------------------------------------------------
 *  Gebäudeplan über dem Panorama
 *  assets/plan.html in a frame, so the panel here is the same one the homepage
 *  shows rather than a second copy of it.
 * -------------------------------------------------------------------------- */

.tplan {
  position: fixed;
  inset: 0;
  /* Above everything the generated style.css puts on screen - its
     info-hotspot modal claims 11000, and the plan has to cover that. */
  z-index: 12000;
  background-color: rgba(8, 11, 18, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 220ms var(--ui-ease);
}

.tplan[hidden] { display: none; }

.tplan.is-open { opacity: 1; }

.tplan__frame {
  width: 100%;
  height: 100%;
  border: 0;
  /* Transparent so the panorama stays visible around the panel - the page
     inside sets no background of its own. */
  background: transparent;
  transform: scale(0.97);
  transition: transform 260ms var(--ui-ease);
}

.tplan.is-open .tplan__frame { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tplan,
  .tplan__frame { transition: none; }
}

/* The tour you are already in: filled, and not a link. */
.tnav__item.is-current {
  color: var(--ui-fg);
  background-color: var(--ui-accent);
  box-shadow: 0 3px 12px rgba(51, 87, 161, 0.5);
  cursor: default;
}

/* -----------------------------------------------------------------------------
 *  Titelleiste - der Ort, an dem man gerade steht
 * -------------------------------------------------------------------------- */

#titleBar {
  top: var(--edge) !important;
  left: 50% !important;
  right: auto !important;
  height: auto !important;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: min(46%, 24rem);
  padding: 0.6rem 1.25rem;
  background-color: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  box-shadow: var(--ui-shadow);
  -webkit-backdrop-filter: var(--ui-blur);
  backdrop-filter: var(--ui-blur);
  pointer-events: none;
}

/* A pin, so the bar reads as "you are here" rather than as a caption. */
#titleBar::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background-color: var(--ui-accent);
  -webkit-mask: var(--pin) center / contain no-repeat;
  mask: var(--pin) center / contain no-repeat;
  --pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

#titleBar .sceneName {
  width: auto;
  height: auto !important;
  margin: 0;
  padding: 0 !important;
  background: none !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2 !important;
  color: var(--ui-fg);
  text-align: start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------------------------------------------------------
 *  Blicksteuerung - D-Pad links unten, Zoom rechts unten
 *  Marzipano positions each button from left: 50% with its own margin-left, so
 *  both are reset here and every button is placed outright.
 * -------------------------------------------------------------------------- */

/* The whole cluster is centred on the screen: the cross on the left of the
   group, the zoom pair on its right, the way a controller puts the d-pad
   under the left thumb and the buttons under the right. Offsets are multiples
   of --cell from the centre line, so the arrangement scales with the buttons
   instead of being re-typed for every size. */
.viewControlButton {
  left: 50% !important;
  right: auto !important;
}

/* The four arrows carry their own colour so the directions read apart from
   the zoom pair at a glance. */
#viewUp,
#viewDown,
#viewLeft,
#viewRight {
  background-color: rgba(51, 87, 161, 0.74) !important;
  border-color: rgba(255, 255, 255, 0.3);
}

#viewUp:hover,
#viewDown:hover,
#viewLeft:hover,
#viewRight:hover {
  background-color: rgba(51, 87, 161, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.5);
}

/* The cross. */
#viewUp {
  margin-left: calc(-1.6 * var(--cell)) !important;
  bottom: calc(var(--edge) + 2 * var(--cell)) !important;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}
#viewLeft {
  margin-left: calc(-2.6 * var(--cell)) !important;
  bottom: calc(var(--edge) + var(--cell)) !important;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
}
#viewRight {
  margin-left: calc(-0.6 * var(--cell)) !important;
  bottom: calc(var(--edge) + var(--cell)) !important;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}
#viewDown {
  margin-left: calc(-1.6 * var(--cell)) !important;
  bottom: var(--edge) !important;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* Zoom, the "buttons" side of the pad. */
#viewIn {
  margin-left: calc(1.65 * var(--cell)) !important;
  bottom: calc(var(--edge) + var(--cell)) !important;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
#viewOut {
  margin-left: calc(1.65 * var(--cell)) !important;
  bottom: var(--edge) !important;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
 *  Klein
 * -------------------------------------------------------------------------- */

/* The cluster is centred and the nav is pinned right, so on a narrow window
   the zoom pair ends up underneath the bar. Below roughly 2 x (nav + half a
   cluster) they stop fitting side by side, and the controls move up above it.
   `margin-bottom` on an absolutely positioned box with `bottom` set shifts it
   clear, which keeps this to one rule instead of six new offsets. */
@media (max-width: 980px) {
  .viewControlButton { margin-bottom: 60px; }
}

@media (max-width: 760px) {
  :root {
    --btn: 40px;
    --cell: 44px;
    --edge: 12px;
  }

  #autorotateToggle {
    width: 46px !important;
    height: 46px !important;
  }

  #titleBar {
    max-width: calc(100% - 200px);
    padding: 0.45rem 0.9rem;
  }

  #titleBar .sceneName { font-size: 0.86rem; }

  .tnav__home span { display: none; }   /* icon only, to keep the bar short */

  .tnav__home,
  .tnav__item {
    height: 32px;
    padding: 0 0.6rem;
    font-size: 0.72rem;
  }

  .ar-countdown {
    top: calc(var(--edge) + 54px);
    font-size: 0.66rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #autorotateToggle,
  #fullscreenToggle,
  .viewControlButton,
  .tnav__home,
  .tnav__item {
    transition: none !important;
  }

  .ar-ring__bar { animation: none !important; }
}

/* -----------------------------------------------------------------------------
 *  Marken im Panorama
 *  A marker lies ON the thing it names - Marzipano places it with a
 *  perspective hotspot, so it keeps covering the same patch as you zoom. The
 *  ring is drawn with an outward box-shadow spread, which puts it AROUND the
 *  object rather than over it.
 * -------------------------------------------------------------------------- */

.tmark {
  position: relative;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95),
              0 0 18px 5px rgba(255, 255, 255, 0.5);
  animation: tmark-breathe 3s ease-in-out infinite;
  transition: box-shadow 220ms var(--ui-ease);
}

.tmark:hover,
.tmark:focus-visible {
  outline: none;
  animation: none;
  box-shadow: 0 0 0 3px #4a90ff,
              0 0 26px 9px rgba(74, 144, 255, 0.8),
              0 0 60px 18px rgba(51, 87, 161, 0.5);
}

@keyframes tmark-breathe {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9),
                         0 0 14px 4px rgba(255, 255, 255, 0.4); }
  50%      { box-shadow: 0 0 0 2px rgba(255, 255, 255, 1),
                         0 0 24px 8px rgba(255, 255, 255, 0.7); }
}

/* -----------------------------------------------------------------------------
 *  Plakat gross
 * -------------------------------------------------------------------------- */

.tspot {
  position: fixed;
  inset: 0;
  z-index: 12500;
  display: grid;
  place-items: center;
  background-color: rgba(6, 9, 16, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 240ms var(--ui-ease);
}

.tspot[hidden] { display: none; }
.tspot.is-open { opacity: 1; }

/* The stage carries the flight out of the wall; the sheet inside carries the
   turning. Two elements, because one cannot be transitioned and dragged on
   the same property at once. */
.tspot__stage {
  transition: transform 420ms var(--ui-ease), opacity 240ms var(--ui-ease);
  will-change: transform;
}

.tspot__sheet {
  display: block;
  max-width: min(88vw, 60vh);
  max-height: 86vh;
  border-radius: 6px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  /* Just shown - it does not turn and does not zoom, so it should not invite
     a grab either. */
  user-select: none;
  -webkit-user-drag: none;
}

.tspot__close {
  position: absolute;
  top: var(--edge);
  right: var(--edge);
  width: var(--btn);
  height: var(--btn);
  display: grid;
  place-items: center;
  color: #fff;
  background-color: var(--ui-accent);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: background-color 180ms var(--ui-ease),
              box-shadow 180ms var(--ui-ease);
}

.tspot__close:hover {
  background-color: #2a4784;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.tspot__hint {
  position: absolute;
  bottom: var(--edge);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.5rem 1rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.75);
  background-color: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 999px;
}

/* -----------------------------------------------------------------------------
 *  Infotafel zur Tastatur - rechts neben dem Startseiten-Knopf
 * -------------------------------------------------------------------------- */

.tinfo {
  position: absolute;
  top: var(--edge);
  left: calc(var(--edge) + var(--btn) + 0.5rem);
  z-index: 11;
  display: grid;
  place-items: center;
  width: var(--btn);
  height: var(--btn);
  padding: 0;
  color: #fff;
  background-color: var(--ui-accent);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  box-shadow: var(--ui-shadow);
  cursor: pointer;
  transition: background-color 200ms var(--ui-ease),
              transform 260ms var(--ui-ease);
}

.tinfo:hover,
.tinfo.is-open {
  background-color: #2a4784;
  transform: translateY(-2px);
}

.tinfo svg { width: 20px; height: 20px; }

.tkeys {
  position: absolute;
  top: calc(var(--edge) + var(--btn) + 0.6rem);
  left: var(--edge);
  z-index: 11;
  width: 17rem;
  max-height: calc(100% - var(--btn) - 3rem);
  overflow-y: auto;
  padding: 0.9rem 1rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ui-fg);
  background-color: var(--ui-bg);
  border: 1px solid var(--ui-border);
  border-radius: 0.9rem;
  box-shadow: var(--ui-shadow);
  -webkit-backdrop-filter: var(--ui-blur);
  backdrop-filter: var(--ui-blur);
  animation: tkeys-in 200ms var(--ui-ease) both;
}

.tkeys[hidden] { display: none; }

@keyframes tkeys-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.tkeys h2,
.tkeys h3 {
  margin: 0 0 0.5rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.tkeys h3 { margin-top: 0.9rem; }

.tkeys__list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.7rem;
  margin: 0;
  font-size: 0.78rem;
}

.tkeys__list dt {
  display: flex;
  gap: 0.2rem;
}

.tkeys__list dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.3;
}

.tkeys kbd {
  display: grid;
  place-items: center;
  /* Every key the same square, whatever is printed on it - an arrow is a
     wider glyph than a letter, so letting them size to content made the rows
     ragged. */
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
  .tmark { animation: none; }
  .tspot,
  .tspot__stage,
  .tkeys { transition: none; animation: none; }
}

/* -----------------------------------------------------------------------------
 *  Infokarte - Text links, Bild rechts
 *  Shares the overlay, the backdrop and the flight-out-of-the-wall with the
 *  poster; only what sits on the stage differs.
 * -------------------------------------------------------------------------- */

.tcard {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1.75rem;
  align-items: center;
  width: min(54rem, 90vw);
  max-height: 86vh;
  padding: 1.6rem 1.8rem;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}

.tcard h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #1b2432;
}

.tcard__sub {
  margin: 0.15rem 0 1rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ui-accent);
}

.tcard__text {
  max-height: 72vh;
  overflow-y: auto;
}

.tcard__text p {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #44505f;
}

.tcard__note {
  margin: 1rem 0 0 !important;
  padding: 0.7rem 0.9rem;
  font-size: 0.84rem !important;
  color: #7a4a00 !important;
  background-color: #fff6e5;
  border-inline-start: 3px solid #f0a020;
  border-radius: 0.4rem;
}

.tcard__media {
  display: grid;
  place-items: center;
  padding: 1rem;
  background-color: #f4f6f9;
  border-radius: 0.75rem;
}

.tcard__media img {
  display: block;
  max-width: 100%;
  max-height: 58vh;
  object-fit: contain;
}

/* Narrow: the picture goes above the text rather than beside it. */
@media (max-width: 860px) {
  .tcard {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
  }

  .tcard__media { order: -1; }
  .tcard__media img { max-height: 32vh; }
  .tcard h2 { font-size: 1.2rem; }
}

/* Eigener Schliessen-Knopf auf der Karte - der auf dem Hintergrund steht weit
   weg vom Text, und auf der Karte sucht man ihn an der Karte. */
.tcard { position: relative; }

.tcard__close {
  position: absolute;
  /* On the corner itself, half outside the card, so it is impossible to
     miss. Needs .tcard to keep overflow visible - the text column is what
     scrolls. */
  top: -1rem;
  right: -1rem;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: #fff;
  background-color: var(--ui-accent);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(12, 23, 48, 0.45);
  cursor: pointer;
  /* No transform on hover. Growing a button that is pinned by `top`/`right`
     reads as the thing sliding, and the cross is the only part that is
     supposed to be the centre - so the hover changes colour and depth only,
     and nothing on screen moves. */
  transition: background-color 180ms var(--ui-ease),
              box-shadow 180ms var(--ui-ease);
}

.tcard__close svg,
.tspot__close svg {
  /* A drawn cross rather than the d7 glyph: a character is centred on its
     text box, not on its ink, so it sat a touch high and any scaling made
     that obvious. */
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.tcard__close:hover {
  background-color: #2a4784;
  box-shadow: 0 8px 22px rgba(12, 23, 48, 0.6);
}

/* --- Gebaeudeplan-Knopf: dieselbe Karte wie auf der Startseite --------------
   Vorher ein Textknopf, jetzt dasselbe Bild, damit beide Stellen wirklich
   dasselbe zeigen. */
.tnav__home {
  padding: 0 !important;
  background: none !important;
  border-radius: 0.8rem !important;
  line-height: 0;
  /* The shared rule pins both items to 38px. The card is taller than that, so
     it was overflowing the bar - which then stayed 38px tall and the room
     name above it overlapped the card. */
  height: auto !important;
}

.tnav__home:hover { background: none !important; }

.tnav__home::before { content: none !important; }

.tnav__home span { display: none !important; }

.tnav__home-art {
  display: block;
  width: 4.6rem;
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
  transition: transform 240ms var(--ui-ease);
}

.tnav__home:hover .tnav__home-art { transform: translateY(-2px); }

@media (max-width: 760px) {
  .tnav__home-art { width: 3.6rem; }
}

/* Die Leiste selbst traegt keinen Hintergrund mehr: die Karte bringt ihren
   eigenen mit, und der Ortsname oben behaelt seinen. Nur der Reiter des
   laufenden Rundgangs bleibt gefuellt, damit er lesbar bleibt. */
.tnav {
  padding: 0;
  gap: 0.5rem;
  background: none;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.tnav__sep { display: none; }

/* -----------------------------------------------------------------------------
 *  Ortsname ueber den Gebaeudeplan-Knopf
 *  Both belong to the same corner now, stacked: the name sits directly above
 *  the card. The offset is derived from --plan-card rather than typed, so
 *  resizing the card moves the name with it.
 * -------------------------------------------------------------------------- */

:root {
  --plan-card: 5.8rem;          /* width of the card; it is nearly square */
}

/* The card goes last in the row, so it ends up hard against the right edge. */
.tnav {
  right: 0.75rem;
  gap: 0.45rem;
}

.tnav__home { order: 2; }

.tnav__home-art { width: var(--plan-card); }

@media (max-width: 760px) {
  :root { --plan-card: 4.2rem; }
}

/* -----------------------------------------------------------------------------
 *  Rechte untere Ecke, gestapelt
 *      Ortsname
 *      [ Zahntechnik ]      <- blau
 *      [ 360-Karte    ]     <- weiss, gross
 * -------------------------------------------------------------------------- */

:root {
  /* Same size as the button on the homepage (.gplan__fab-art in
     scss/components/_gebaeudeplan.scss) - same button, same measure. */
  --plan-card: 10rem;
  --tour-chip-h: 2.4rem;                                 /* the blue tab */
  --tour-card-h: calc(var(--plan-card) * 0.977);         /* 432:422      */
  --tour-gap: 0.45rem;
}

.tnav {
  flex-direction: column;
  align-items: flex-end;
  gap: var(--tour-gap);
}

/* The blue tab on top, the card under it. */
.tnav__item { order: 1; }
.tnav__home { order: 2; }

.tnav__item.is-current { height: var(--tour-chip-h); }

@media (max-width: 760px) {
  :root {
    --plan-card: 7rem;
    --tour-chip-h: 2rem;
  }
}

/* Die Infokarte bringt ihren eigenen Schliessen-Knopf auf der Ecke mit, der
   in der Bildschirmecke ist daneben nur ein zweiter fuer dasselbe. Beim
   Plakat bleibt er: dort gibt es sonst keinen sichtbaren Weg hinaus. */
.tspot--card .tspot__close { display: none; }

/* Der Schliessen-Knopf in der Bildschirmecke ist weg - beide Arten tragen
   ihren eigenen auf der Ecke dessen, was sie geoeffnet haben. */
.tspot__close { display: none !important; }

/* Auf der Ecke des Plakats. Sitzt auf der Buehne, nicht auf dem Blatt: das
   Blatt dreht sich beim Ziehen, der Knopf soll stehen bleiben. */
.tspot__stage { position: relative; }

.tsheet__close {
  position: absolute;
  top: -1rem;
  right: -1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  color: #fff;
  background-color: var(--ui-accent);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(12, 23, 48, 0.5);
  cursor: pointer;
  transition: background-color 180ms var(--ui-ease),
              box-shadow 180ms var(--ui-ease);
}

.tsheet__close:hover {
  background-color: #2a4784;
  box-shadow: 0 8px 22px rgba(12, 23, 48, 0.65);
}

.tsheet__close svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}