/* Hotel Bergland Sillian – wiederverwendbare Komponenten fürs Apple-Design
   Ersetzt Swiper (Karussell), Lightgallery (Lightbox) und den Bootstrap
   Dark-/Light-Mode-Switcher durch schlanke, abhängigkeitsfreie Varianten. */

/* ===== Dark mode ===== */
:root[data-theme="dark"]{
  --ink:#f5f5f7;
  --muted:#a1a1a6;
  --hair:rgba(255,255,255,.12);
  --bg:#000000;
  --bg-alt:#1c1c1e;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#f5f5f7;
    --muted:#a1a1a6;
    --hair:rgba(255,255,255,.12);
    --bg:#000000;
    --bg-alt:#1c1c1e;
  }
}
.theme-toggle{
  margin-left:6px;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;border:1px solid var(--hair);
  background:transparent;color:var(--ink);cursor:pointer;flex:none;
}
.theme-toggle svg{width:16px;height:16px}
.theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}

/* ===== Carousel (ersetzt Swiper) ===== */
.carousel{position:relative}
.carousel-track{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track>*{flex:0 0 auto;scroll-snap-align:start;width:min(78vw,320px)}
.carousel-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.carousel-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--hair);
  background:var(--bg);color:var(--ink);cursor:pointer;font-size:16px;line-height:1;
}
.carousel-btn:hover{background:var(--bg-alt)}
.carousel-btn:disabled{opacity:.35;cursor:default}
.tile-card{
  position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;
  text-decoration:none;color:#fff;display:block;box-shadow:0 16px 34px -18px rgba(0,0,0,.4);
}
.tile-card img{width:100%;height:100%;object-fit:cover}
.tile-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.72) 100%);
}
.tile-card span{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;font-size:1.1rem;font-weight:700}

/* ===== Lightbox (ersetzt Lightgallery) ===== */
.lightbox-overlay{
  position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;padding:24px;
}
.lightbox-overlay.open{display:flex}
.lightbox-overlay img{max-width:min(92vw,1100px);max-height:88vh;border-radius:12px;object-fit:contain}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:50%;width:44px;height:44px;cursor:pointer;font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.22)}
.lightbox-close{top:20px;right:20px}
.lightbox-prev{left:20px;top:50%;transform:translateY(-50%)}
.lightbox-next{right:20px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){ .lightbox-prev,.lightbox-next{width:36px;height:36px;font-size:16px} }