/* ==========================================================================
   Feierzauber – Custom-Ergänzungen zum Original-Theme (theme.css/libs.css)
   Eigene Nachbauten für Features, die im Original per JS-Library liefen:
   - Deko-Karussell (Original: Flickity)  -> hier: nutzergesteuertes Karussell
     mit definiertem Anfang/Ende (Snap + Punkte-Navigation), ohne Auto-Play
   - Bild-Lightbox (Original: BigPicture)  -> hier: einfaches CSS/JS-Overlay
   - Parallax-Header (Original: Jarallax)  -> hier: eigener, echter
     Scroll-Parallax per Transform (siehe .parallax-bg unten + Script am
     Ende von partials/SiteHero.html & partials/ParallaxQuote.html) – im
     Gegensatz zu `background-attachment:fixed` (frühere Version) wirkt das
     auch auf Mobile (iOS Safari ignoriert `fixed` de facto).
   - Navbar-Farbwechsel beim Scrollen (Original: JS-Scroll-Listener) -> hier:
     eigener Scroll-Listener in p_base.html + .is-scrolled unten
   Partner-Logo-Grid und Serviceoptionen nutzen jetzt die Original-Bootstrap-
   Klassen (col-4/row gx-3) direkt aus theme.css, kein eigenes CSS nötig.
   ========================================================================== */

/* ---- Parallax-Ersatz --------------------------------------------------- */
.parallax-bg {
  position: relative;
  overflow: hidden;
}
.parallax-bg__layer {
  position: absolute;
  left: 0;
  right: 0;
  top: -15%;
  bottom: -15%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;
}
/* alle direkten Kind-Elemente außer dem Hintergrund-Layer sollen darüber
   liegen (werden dafür selbst "positioniert", siehe Stacking-Kontext) */
.parallax-bg > :not(.parallax-bg__layer) {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .parallax-bg__layer { transform: none !important; }
}

/* ---- Deko-Karussell ----------------------------------------------------- */
.deco-carousel { position: relative; overflow: hidden; }
.deco-carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  cursor: grab;
  /* Scrollbar unsichtbar, bleibt aber per Touch/Drag/Tastatur bedienbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.deco-carousel-track::-webkit-scrollbar { display: none; height: 0; }
.deco-carousel-track:active { cursor: grabbing; }

.deco-carousel-item {
  flex: 0 0 82%;
  scroll-snap-align: center;
  box-sizing: border-box;
  user-select: none;
}
@media (min-width: 576px)  { .deco-carousel-item { flex: 0 0 58%; } }
@media (min-width: 768px)  { .deco-carousel-item { flex: 0 0 40%; } }
@media (min-width: 992px)  { .deco-carousel-item { flex: 0 0 31%; } }
@media (min-width: 1200px) { .deco-carousel-item { flex: 0 0 24%; } }

.deco-carousel-item img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.deco-carousel-nav,
.deco-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
}
.deco-carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 0;
  border: 1px solid #f5a637;
  background: transparent;
  color: #f5a637;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.deco-carousel-btn:hover { background: #f5a637; color: #fff; }
.deco-carousel-btn:disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

.deco-carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #f5a637;
  background: transparent;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.deco-carousel-dot.is-active { background: #f5a637; transform: scale(1.2); }

/* ---- Lightbox ------------------------------------------------------------ */
.lightbox-trigger { cursor: zoom-in; }
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 2rem;
}
.lightbox-overlay.is-open { display: flex; }
.lightbox-overlay img {
  max-width: 92vw;
  max-height: 88vh;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
}



/* ---- Kleine Layout-Helfer ------------------------------------------------ */
.page-header-offset { padding-top: 6.5rem; }
@media (min-width: 992px) { .page-header-offset { padding-top: 8rem; } }

/* ---- Navbar: Lesbarkeit im transparenten (nicht gescrollten) Zustand ----
   Direkt auf dem Hero-Bild lag die Navi bisher ganz ohne Hintergrund und war
   je nach Bildmotiv schwer lesbar. Ein dezenter dunkler Verlauf von oben nach
   unten plus ein Hintergrund-Weichzeichner (Blur) sorgen für Kontrast, ohne
   die transparente Optik des Originals komplett aufzugeben. Browser ohne
   Blur-Unterstützung sehen einfach nur den Verlauf (immer noch besser lesbar
   als reine Transparenz). Im gescrollten (weißen) Zustand wird beides wieder
   entfernt, dort sorgt bereits die feste weiße Fläche für Kontrast. -------- */
.navbar-togglable {
  background-color: transparent;
  background-image: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color .25s ease, background-image .25s ease, backdrop-filter .25s ease, box-shadow .25s ease;
}
.navbar-togglable .nav-link,
.navbar-togglable .navbar-brand {
  transition: color .25s ease;
}
.navbar-togglable.is-scrolled {
  background-color: #fff;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.navbar-togglable.is-scrolled .nav-link,
.navbar-togglable.is-scrolled .navbar-brand {
  color: #000 !important;
}
.navbar-togglable.is-scrolled .navbar-toggler-icon {
  filter: invert(1);
}

/* ---- Navbar: Hover/Fokus im gescrollten (hellen) Zustand -----------------
   Die Zeile oben setzt die Grundfarbe im is-scrolled-Zustand mit !important
   auf Schwarz. Ohne eigene Hover-Regel "gewinnt" dieses !important auch bei
   :hover (Theme liefert dafür nur eine Regel ohne !important) -> es gab
   keinen sichtbaren Hover-Effekt. Diese Regel hat dank :hover/:focus eine
   höhere Selektor-Spezifität und setzt bei Hover/Fokus wieder die
   Markenfarbe Orange. ---------------------------------------------------- */
.navbar-togglable.is-scrolled .nav-link:hover,
.navbar-togglable.is-scrolled .nav-link:focus {
  color: #f5a637 !important;
}

/* ---- Navbar: aktive Seite hervorheben (orange) --------------------------- */
.navbar-nav .nav-link.active,
.navbar-togglable.is-scrolled .nav-link.active {
  color: #f5a637 !important;
}

/* ---- Kontakt-Seite: Info-Spalte neben dem Formular ----------------------
   Original nutzt Bootstrap-Grid (col-md-3 Info / col-md-9 Formular, per
   order-md vertauscht). Da Magnum-Blöcke als eigenständige <section>-Elemente
   untereinander gerendert werden, bauen wir die Zwei-Spalten-Optik ab Tablet
   per Float nach: die Info-Sektion (layout:"sidebar") schwebt rechts mit 25%
   Breite, der direkt folgende Block (hier: das Formular) füllt die restlichen
   75% links daneben – exakt wie im Original. Auf Mobil bleibt es gestapelt
   (Info zuerst, dann Formular), ebenfalls wie im Original.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .contact-info-section--sidebar {
    float: right;
    width: 25%;
  }
  .contact-info-section--sidebar .container {
    padding-left: 1.5rem;
  }
  .contact-info-section--sidebar + * {
    width: 75%;
    float: none;
  }
  .contact-info-section--sidebar + * .container {
    padding-right: 1.5rem;
  }
}
main::after {
  content: "";
  display: table;
  clear: both;
}