/* Overrides to ensure consistent gallery sizing (Kirby thumbs) */
/* NICHT .img-wrap img — das überschreibt Thumbnails (niedrigere Spezifität als .img-wrap img). */

/*
 * WICHTIG (Layout / Bootstrap-Spalten):
 * Kein erzwungenes width:100% / max-width:100% auf .gallery oder .gallery .vertical-scroll —
 * das hat die Spalte gebrochen (Hero + Galerie volle Containerbreite statt col-md-6).
 * Nur box-sizing + min-width:0 wo nötig für Flex/Scroll-Innenbereich.
 */

.gallery.col-md-6,
.gallery {
  box-sizing: border-box;
}

/* Kein horizontales Mitscrollen der ganzen Seite (iframe, Karte, Formular-Spalten, breite Inhalte) */
.main.container {
  overflow-x: clip;
  max-width: 100%;
}

.about-main-col,
.about-sidebar-col {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* About: Tabelle unter Galerie in rechter Spalte */
.about-sidebar-col .table-wrapper {
  margin-top: 1.25rem;
  clear: both;
}

.about-main-col .about-pdf-downloads-wrap,
.about-sidebar-col .about-pdf-downloads-wrap {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  clear: both;
}

.about-sidebar-col .about-gruppenhaus-iframe-wrap {
  margin-top: 1.25rem;
  clear: both;
}

.about-gruppenhaus-iframe-heading {
  margin: 2.65rem 0 1rem 0;
  font-weight: 600;
}

.about-gruppenhaus-iframe-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.about-gruppenhaus-iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 720px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
}

.about-pdf-downloads-sectiontitle {
  margin: 2.65rem 0 1.65rem 0;
  /* font-size: 1.05em; */
  font-weight: 600;
}

.about-pdf-downloads__item + .about-pdf-downloads__item {
  margin-top: 0.4025rem;
}

.about-pdf-downloads__link {
  display: inline-flex;
  align-items: center;
  gap: 1.15rem;
  text-decoration: none;
  font-weight: 500;
  max-width: 100%;
  font-size: 1.15em;
}

.about-pdf-downloads__link:hover,
.about-pdf-downloads__link:focus,
.about-pdf-downloads__link:active {
  text-decoration: none;
  color: #0056b3;
}

.about-pdf-downloads__link:hover .about-pdf-downloads__label,
.about-pdf-downloads__link:focus .about-pdf-downloads__label,
.about-pdf-downloads__link:active .about-pdf-downloads__label {
  text-decoration: underline;
}

.about-pdf-downloads__link:focus-visible {
  outline: 2px solid #006edc;
  outline-offset: 2px;
}

.about-pdf-downloads__badge {
  flex-shrink: 0;
  display: inline-block;
  font-size: 1.495rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: #fff;
  background: #b83232;
  padding: 0.2em 0.35em 0.18em;
  border-radius: 6px;
  text-decoration: none;
  vertical-align: middle;
}

/* Startseite: Hero volle Spaltenbreite (picture ist sonst oft schmal/inline) */
.home-hero-col {
  min-width: 0;
  box-sizing: border-box;
}

.home-hero-visual {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f0f0f0;
}

.home-hero-visual > picture {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
}

.home-hero-visual .home-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@supports not (aspect-ratio: 16 / 9) {
  .home-hero-visual {
    height: clamp(220px, 30vw, 360px);
  }
}

/*
 * Haus/About: ul.list-inline.gallery — alle li sind per .pull-left gefloatet.
 * Ohne Clearfix kollabiert die ul auf Höhe 0; unterhalb von 992px stapeln die
 * col-md-6-Spalten, die folgende col-md-12 (Tabelle) liegt dann über den
 * Thumbnails und blockiert Klicks auf Fancybox-Links.
 */
ul.list.list-inline.gallery::after {
  content: "";
  display: table;
  clear: both;
}

.gallery .img-wrap.crop.fullsize {
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

/* === Thumbnail-Zeile: eine Reihe, zentriert wenn wenig Platzbedarf; Scroll + Wischen auf Mobil === */
.gallery-thumbs-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  min-width: 0; /* erlaubt Schrumpfen in col-md-6 */
  width: 100%;
  max-width: 100%;
}

.gallery-thumbs-viewport.vertical-scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  touch-action: pan-x pinch-zoom;
  text-align: center;
  margin: 0;
  /* Scrollbar dezent */
  scrollbar-width: thin;
}

.gallery-thumbs-viewport.vertical-scroll::-webkit-scrollbar {
  height: 6px;
}

.gallery-thumbs-viewport.vertical-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* Eine Zeile, zentriert: inline-flex + text-align center im Viewport */
.gallery-thumbs-viewport .img-thumbnails {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  vertical-align: top;
  box-sizing: border-box;
}

.gallery-thumbs-viewport .img-thumbnails > li.preview-thumbnail {
  float: none !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.gallery-thumbs-viewport .img-thumbnails figure {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.gallery-thumbs-viewport .img-thumbnails a.fancybox,
.gallery-thumbs-viewport .img-thumbnails .slideshow-thumb-btn {
  display: block;
  line-height: 0;
}

.gallery-thumbs-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f8f8f8;
  color: #333;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.gallery-thumbs-btn:hover:not(:disabled) {
  background: #eee;
}

.gallery-thumbs-btn:disabled,
.gallery-thumbs-btn.is-disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* Uniform look for the large room preview image */
.img-wrap.crop.fullsize {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.img-wrap.crop.fullsize > a.fancybox-hero,
.img-wrap.crop.fullsize > .slideshow-hero-btn {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hero als Button (Slideshow): Lightbox per Klick, kein Link-Styling */
.slideshow-hero-btn {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: zoom-in;
  text-align: left;
  font: inherit;
  color: inherit;
}

.slideshow-hero-btn:focus {
  outline: none;
}

.slideshow-hero-btn:focus-visible {
  outline: 2px solid #006edc;
  outline-offset: 2px;
}

/* Slideshow: aktives Thumb */
.slideshow-thumb-btn {
  display: block;
  margin: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  box-sizing: content-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.slideshow-thumb-btn:focus {
  outline: none;
}

.slideshow-thumb-btn:focus-visible {
  outline: 2px solid #006edc;
  outline-offset: 2px;
}

.slideshow-thumb.is-active .slideshow-thumb-btn {
  border-color: #006edc;
  box-shadow: 0 0 0 1px rgba(0, 110, 220, 0.35);
}

/* Hero-Bild im 16:9-Container */
.hero-img-stack {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* <picture> ist sonst oft inline und bricht den Stack */
.hero-img-stack > picture {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Slideshow (about): zwei Ebenen, Crossfade */
.gallery-slideshow .hero-img-stack--crossfade > .hero-img-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: opacity 0.65s ease-in-out;
  pointer-events: none;
}

.gallery-slideshow .hero-img-stack--crossfade > .hero-img-layer.is-visible {
  opacity: 1;
}

.gallery-slideshow .hero-img-stack--crossfade > .hero-img-layer picture {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-slideshow .hero-img-stack--crossfade > .hero-img-layer {
    transition: none;
  }
}

.hero-img-stack .hero-img-base {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.img-wrap.crop.fullsize > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery .img-thumbnails img,
.img-wrap .img-thumbnails img {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: top;
}

@supports not (aspect-ratio: 16 / 9) {
  .img-wrap.crop.fullsize {
    height: clamp(220px, 30vw, 360px);
  }
}
.list-group .col-md-12.room-row {
  background: #fdfdfd ;
  /* background: #fff ; */
}
a {
  color: #006EDC; /* kontraststark für Links auf weißem Hintergrund */
  text-decoration: none;
}

a:visited,
a:hover,
a:focus,
a:active {
  color: #0056B3;
  text-decoration: underline;
}
footer a {
  color: #fff;
  /* text-decoration: line-through; */
  border-bottom: 1px dashed #fff;
}
footer a:hover, footer a:visited, footer a:focus, footer a:active {
  color: #fff !important;
  text-decoration: none;
  border-bottom: none;
}

/* Text-danger: kontraststark, auch wenn es auf Links genutzt wird */
.text-danger {
  color: #8a1f1f !important;
}

a.text-danger,
a.text-danger:visited,
a.text-danger:hover,
a.text-danger:focus,
a.text-danger:active {
  color: #8a1f1f !important;
}