/* === Grundfarben === */
:root {
  --cassiopeia-color-primary: #B8860B;      /* Goldbraun */
  --cassiopeia-color-hover:   #D6A755;      /* Messing-Hover */
  --cassiopeia-color-text:    #111111;      /* Tiefschwarz */
  --cassiopeia-color-dark:    #2F2F2F;      /* Graphitgrau */
  --cassiopeia-color-bg:      #FAFAFA;      /* Hintergrund */
}

/* === Grundlayout === */
body {
  background-color: var(--cassiopeia-color-bg);
  color: var(--cassiopeia-color-text);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* === Links === */
a {
  color: var(--cassiopeia-color-primary);
  text-decoration: none;
}
a:hover {
  color: var(--cassiopeia-color-hover);
  text-decoration: underline;
}

/* === Navigation === */
.navbar-nav .nav-link {
  color: white;
}
.navbar-nav .nav-link:hover {
  color: var(--cassiopeia-color-hover);
}

/* === Buttons === */
.btn {
  background-color: var(--cassiopeia-color-primary);
  color: white;
  border: none;
}
.btn:hover {
  background-color: var(--cassiopeia-color-hover);
  color: white;
}

/* === Footer === */
footer {
  background-color: var(--cassiopeia-color-dark);
  color: white;
}
footer a {
  color: #D6A755;
}
footer a:hover {
  color: #ffffff;
}

@media print {
  .myDisablePrint {
    display: none !important;
  }
}

/* === Schaltet das Drucken vom Suchenfeld und von den Menüs aus  === */
@media print {
  .mod-menu {
    display: none !important;
  }
}

@media print {
  .mod-finder {
    display: none !important;
  }
}

@media print {
  .navbar {
    display: none !important;
  }
}

/* === Slideshow für die Anzeige der Bilder === */
/* Slideshow-Container */
.slideshow {
  position: relative;
  width: 100%;
  height: 55vh;            /* bei Bedarf pro Instanz im HTML überschreiben */
  background: #fff;
  overflow: hidden;
}

/* Jede Slide: Bild oben, Caption unten */
.slideshow figure {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto; /* Bildbereich + Captionhöhe automatisch */
  opacity: 0;
  transition: opacity .8s ease-in-out;
  z-index: 1;
  pointer-events: none;        /* Blockiert keine Klicks */
}
.slideshow figure.is-active {
  opacity: 1;
  z-index: 2;
}

/* Bild-Wrapper (für contain/cover) */
.slideshow .slide-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

/* Bilder */
.slideshow img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Caption unten auf weiß */
.slideshow figcaption {
  background: #fff;
  color: #000;
  text-align: center;
  font-size: 1rem;
  line-height: 1.35;
  padding: 10px 12px;
  border-top: 1px solid #eee;
  box-sizing: border-box;
}

/* Prev/Next Buttons */
.slideshow .nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.85);
  border: 1px solid #ddd;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 18px;
  border-radius: 8px;
  user-select: none;
  z-index: 1000;             /* Sicher über Slides */
  pointer-events: auto;      /* Klickbar */
}
.slideshow .nav-prev { left: 10px; }
.slideshow .nav-next { right: 10px; }

/* Pager-Dots */
.slideshow .dots {
  position: absolute;
  bottom: 10px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 500;              /* Unter Buttons, über Slides */
}
.slideshow .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.25);
  cursor: pointer;
}
.slideshow .dot.is-active {
  background: rgba(0,0,0,.6);
}

/* Optional: auf Touch/Mouse sichtbarer */
.slideshow:hover .nav-btn {
  background: rgba(255,255,255,.95);
}