/*
 * Feinschliff - kleine Ergaenzungen zum Durable-Stylesheet.
 * Aendert bewusst kein Aussehen der Seite, sondern nur Verhalten in
 * Sonderfaellen: Bedienung per Tastatur, reduzierte Bewegung, Ausdruck.
 */

/* --- Tastaturbedienung ---------------------------------------------------
   Wer mit der Tabulatortaste navigiert, sieht bisher nur den blassen
   Standardrahmen des Browsers. Jetzt ein Rahmen in der Akzentfarbe der Marke -
   fuer Mausbedienung unveraendert unsichtbar. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #b38b6d;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Reduzierte Bewegung -------------------------------------------------
   Wer im Betriebssystem "Bewegung reduzieren" eingestellt hat (Barrierefreiheit,
   Schwindelempfindlichkeit), bekommt die Einblend-Effekte ohne Bewegung. Die
   Inhalte bleiben vollstaendig sichtbar. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  html {
    scroll-behavior: auto !important;
  }
}

/* Bewusst NICHT: .opacity-0 auf sichtbar setzen. Die Einblend-Animation laeuft
   durch die Dauer von 0,01 ms ohnehin sofort in den Endzustand - und dieselbe
   Klasse versteckt an anderer Stelle den "Jetzt geoeffnet"-Hinweis der
   Oeffnungszeiten. Ein pauschales Ueberschreiben liesse ihn an jedem Wochentag
   erscheinen. */

/* --- 360-Grad-Rundgang über die volle Seitenbreite ------------------------
   Einbettungs-Bloecke sitzen normalerweise in einem zentrierten Container mit
   Innenabstand. Fuer diesen einen Block wird die Begrenzung aufgehoben, damit
   der Rundgang wie die Karte als randlose Bahn laeuft.
   Der Attribut-Selektor ist noetig, weil die Block-Kennung mit einer Ziffer
   beginnt und "#66a2…" kein gueltiger CSS-Selektor waere. */
[id="66a24083ac77013a728befc3"] .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

[id="66a24083ac77013a728befc3"] .embed-content {
  display: block;
}

.jk-rundgang iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Kartensektion: Zoom-Knoepfe bedienbar machen -------------------------
   Die Container-Ebene mit der Adress-Infokarte liegt mit z-10 ueber der
   gesamten Karte und faengt alle Taps ab. Am Desktop ragen die Zoom-Knoepfe
   oben rechts zufaellig neben den zentrierten Container hinaus, auf dem Handy
   liegen sie (unten links) komplett darunter und reagieren nicht.
   Loesung: Die Ebene fuer Zeigereingaben durchlaessig machen, nur die
   eigentliche Infokarte faengt weiter Taps. Nebeneffekt: Auch das Ziehen der
   Karte funktioniert jetzt ueberall, nicht nur in den Randstreifen. */
[id="6617c40d6423c1912e916425"] > .container {
  pointer-events: none;
}

[id="6617c40d6423c1912e916425"] > .container .flex.flex-row > div {
  pointer-events: auto;
}

/* --- Ausdruck ------------------------------------------------------------
   Kunden drucken die Seite gelegentlich wegen Adresse und Oeffnungszeiten.
   Auf Papier stoeren Karte, Schaltflaechen und Hintergrundbilder. */
@media print {
  .leaflet-container,
  .commonninja_component,
  [class*="whatsapp"],
  #website-header ul,
  .leaflet-control-container {
    display: none !important;
  }

  body,
  section {
    background: #ffffff !important;
    color: #000000 !important;
  }

  section {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    word-break: break-all;
  }

  a[href^="tel:"]::after,
  a[href^="mailto:"]::after {
    content: "";
  }
}