/* ==================================================
   Kombinierte CSS‑Datei
   (Original‑Stile + Team‑Swiper + Timeline)
   ================================================== */

/* --------------------------------------------------
   Grundfarben / Bootstrap‑Overrides
-------------------------------------------------- */
:root{
  --bs-primary:#D23729;
  --bs-primary-rgb:210,55,41;
  --bs-link-color:var(--bs-primary);
  --bs-link-hover-color:#A52317;
}

/* --------------------------------------------------
   Basis‑Layout
-------------------------------------------------- */
html,body{
  height:100%;
  margin:0;
  overflow-x:hidden;              /* verhindert horizontales Scrollen */
}
html{scroll-behavior:smooth;}
body{
  display:flex;
  flex-direction:column;
  background:#ffffff;
  color:#212529;
  padding-top:70px;               /* Platz für fixe Navbar */
  min-height:100vh;
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  opacity:0;
  transition:opacity .6s ease-in-out;
}
body.page-loaded{opacity:1;}
main{flex:1 0 auto;}

/* --------------------------------------------------
   Buttons & Links
-------------------------------------------------- */
.btn-primary{
  background:var(--bs-primary);
  border-color:var(--bs-primary);
}
.btn-primary:hover,
.btn-primary:focus{
  background:#A52317;
  border-color:#A52317;
}
a,
.btn,
.card{
  transition:color .3s ease,background-color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease;
}

/* --------------------------------------------------
   Hero‑Carousel (Startseite)
-------------------------------------------------- */
#heroCarousel .carousel-item{
  height:60vh;
  min-height:320px;
  overflow:hidden;
}
#heroCarousel .carousel-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;   /* always keep the left side visible */
  animation:heroZoom 12s ease-out forwards;
}
@media(max-width:767.98px){
  #heroCarousel .carousel-item{height:40vh;min-height:200px;}
}

.hero{
  position:relative;
}
.hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:rgba(0,0,0,.4);
  color:#fff;
  padding:2rem;
}
.hero-overlay>*{
  opacity:0;
  transform:translateY(20px);
  animation:fadeInUp .8s forwards;
}
.hero-overlay>*:nth-child(2){animation-delay:.2s;}
.hero-overlay>*:nth-child(3){animation-delay:.4s;}
.hero-overlay h1,
.hero-overlay p{ text-shadow:0 2px 4px rgba(0,0,0,.6); }

.hero-overlay h1{
  font-size:clamp(1.75rem,5vw,2.5rem);
}

.hero-overlay p{
  font-size:clamp(1rem,3vw,1.25rem);
}

@keyframes heroZoom{
  from{transform:scale(1.1);}to{transform:scale(1);}
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}
}

/* --------------------------------------------------
   Karten‑Generics
-------------------------------------------------- */
.card-img-top{
  object-fit:cover;
  height:300px;
  width:100%;
}

/* ------------ Homepage Flipper-Highlights ----------------------- */
#homeFlipperGrid .img-stack{
  position:relative;
  height:200px;         /* einheitliche Höhe */
  overflow:hidden;
}
#homeFlipperGrid .img-stack .bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;      /* füllt Box komplett */
  filter:blur(5px) brightness(1.1) saturate(1.2); /* stärkerer Blur für Ambilight */
  transform:scale(1.3);  /* größer, damit Farben die Karte ausfüllen */
}
#homeFlipperGrid .card-img-top{
  position:relative;
  z-index:1;
  object-fit:contain;   /* komplette Bilder anzeigen */
  width:100%;
  height:100%;
  padding:.5rem;        /* etwas Abstand zum Kartenrand */
  border:1px solid rgba(255,255,255,.8); /* dezente weiße Umrandung */
  box-sizing:border-box;
  background:transparent;
}
#homeFlipperGrid .card{
  border:1px solid rgba(var(--bs-primary-rgb),.25);
  background:linear-gradient(#fff,rgba(var(--bs-primary-rgb),.03));
  box-shadow:0 .125rem .5rem rgba(var(--bs-primary-rgb),.1);
  transition:transform .2s,box-shadow .2s;
}
#homeFlipperGrid .card:hover{
  transform:translateY(-2px);
  box-shadow:0 .5rem 1rem rgba(var(--bs-primary-rgb),.15);
}
#homeFlipperGrid .card-body{
  background:rgba(var(--bs-primary-rgb),.03);
}
#homeFlipperGrid .card-title{
  color:var(--bs-primary);
}
.card-body p:last-child{margin-bottom:0;}

/* --------------------------------------------------
   Pfeil‑Button (Startseite‑Flipper)
-------------------------------------------------- */
.arrow-btn{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
}

/* -------- Section reveal animation --------------- */
.reveal{opacity:0;transform:translateY(-40px);transition:opacity .6s ease,transform .6s ease;}
.reveal.reveal-bottom{transform:translateY(100%);}
.reveal-visible{opacity:1;transform:none;}

/* ==============================================================
   Team‑Section – Swiper‑Styles
   ============================================================== */
.team-fullheight{
  height:calc(100vh - 70px);
  padding:1rem 0;
  box-sizing:border-box;
  background:#f8f9fa;
}
.team-fullheight>.container{
  height:100%;
  display:flex;
  flex-direction:column;
  max-width:1140px;
  margin:0 auto;
  padding-left:var(--bs-gutter-x,.75rem);
  padding-right:var(--bs-gutter-x,.75rem);
  position:relative;
}
.team-fullheight>.container>h1{
  flex-shrink:0;
  text-align:center;
  margin-bottom:1rem;
}
.team-fullheight .teamSwiper{
  height:100%;
  width:100%;
  overflow:hidden;
  position:static;
  flex-grow:1;
  min-height:0;
}
.team-fullheight .teamSwiper .swiper-wrapper{
  height:100%;
  align-items:stretch;
}
.team-fullheight .teamSwiper .swiper-slide{
  height:100%;
  width:440px!important;
}
@media(min-width:768px){
  .team-fullheight .teamSwiper .swiper-slide{width:480px!important;}
}
@media(min-width:992px){
  .team-fullheight .teamSwiper .swiper-slide{width:520px!important;}
}
@media(max-width:767.98px){
  .team-fullheight .teamSwiper .swiper-slide{width:100%!important;}
}
.team-fullheight .teamSwiper .card{
  height:100%;
  display:flex;
  flex-direction:column;
  width:100%;
  background:#fff;
  border:1px solid rgba(0,0,0,.125);
  border-radius:.25rem;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075);
}
.team-fullheight .teamSwiper .card-img-top{
  height:280px;
  object-fit:cover;
  flex-shrink:0;
  border-top-left-radius:calc(.25rem - 1px);
  border-top-right-radius:calc(.25rem - 1px);
}
.team-fullheight .teamSwiper .card-body{
  flex-grow:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:1rem;
  text-align:center;
  box-sizing:border-box;
}
.team-fullheight .teamSwiper .card-body .bio-scroll-area{
  flex-grow:1;
  overflow-y:auto;
  min-height:50px;
  text-align:left;
  padding-right:5px;
  margin-top:.5rem;
  word-wrap:break-word;
  overflow-wrap:break-word;
  white-space:normal;
  box-sizing:border-box;
}
.team-fullheight .teamSwiper .card-body .bio-scroll-area p{
  word-break:break-word;
  box-sizing:border-box;
}
/* Scrollbar */
.team-fullheight .bio-scroll-area::-webkit-scrollbar{width:6px;}
.team-fullheight .bio-scroll-area::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px;}
.team-fullheight .bio-scroll-area::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px;}
.team-fullheight .bio-scroll-area::-webkit-scrollbar-thumb:hover{background:#aaa;}
/* Swiper‑Pfeile */
.teamSwiper .swiper-button-prev,
.teamSwiper .swiper-button-next{
  color:var(--bs-primary);
  width:44px;
  height:44px;
  z-index:10;
  top:50%;
  transform:translateY(-50%);
  position:absolute;
}
.teamSwiper .swiper-button-prev{left:10px;}
.teamSwiper .swiper-button-next{right:10px;}
.teamSwiper .swiper-button-prev::after,
.teamSwiper .swiper-button-next::after{font-size:28px;}

/* ==============================================================
   Timeline – vertikal, Slide‑In‑Animation
   ============================================================== */
   .timeline{
    position:relative;
    padding:2rem 0;
  }
  .timeline::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:4px;
    background:var(--bs-primary);
    transform:translateX(-50%);
  }


/* ---------- Jahrzehnt‑Label (nur einmal) ---------- */
.timeline-epoch{
  position:relative;
  width:100%;
  text-align:center;
  margin:1.5rem 0;
}
.timeline-epoch .epoch-label{
  display:inline-block;
  padding:.25rem .75rem;
  border:2px solid var(--bs-primary);
  border-radius:999px;
  color:var(--bs-primary);
  background:#fff;
  font-weight:700;
  letter-spacing:.5px;
}

/* ---------- Items ---------- */
.timeline-item{
  position:relative;
  width:50%;
  padding:1rem 2rem;
  margin-bottom:2rem;
  transform:translateY(30px);        /* Start‑Versatz */
  transition:transform .6s ease-out;
}
.timeline-item.show{transform:none;}

.timeline-item .timeline-year{
  font-weight:700;
  color:var(--bs-primary);
}
.timeline-item::after{
  content:"";
  position:absolute;
  top:1.2rem;
  width:16px; height:16px;
  border-radius:50%;
  background:#fff;
  border:4px solid var(--bs-primary);
}

/* linke / rechte Spalte */
.timeline-item:nth-of-type(odd){
  left:0;
  text-align:right;
}
.timeline-item:nth-of-type(odd)::after{right:-8px;}
.timeline-item:nth-of-type(even){
  left:50%;
}
.timeline-item:nth-of-type(even)::after{left:-8px;}

/* ---------- Mobile: einspaltig ---------- */
@media(max-width:767.98px){
  .timeline::before{left:8px;transform:none;}
  .timeline-item{
    width:100%;
    padding-left:2.5rem;
    text-align:left;
  }
  .timeline-item:nth-of-type(odd),
  .timeline-item:nth-of-type(even){left:0;}
  .timeline-item::after{left:0;}
}

/* ---------- Dezente Hintergrund‑Tönung pro Jahrzehnt ---------- */
.timeline-item.decade-1970,
.timeline-item.decade-1990,
.timeline-item.decade-2010,
.timeline-item.decade-2030{
  background:rgba(var(--bs-primary-rgb),.03);
}
.timeline-item.decade-1980,
.timeline-item.decade-2000,
.timeline-item.decade-2020{
  background:rgba(var(--bs-primary-rgb),.06);
}

/* --------------------------------------------------
   Pulsierender Pfeil (Startseite)
-------------------------------------------------- */
.pulse-arrow-box{position:relative;}
.pulse-arrow{
  position:absolute;
  top:50%;
  right:0;
  transform:translate(50%,-50%);
  font-size:3rem;
  color:var(--bs-primary);
  line-height:1;
  text-decoration:none;
  animation:arrowPulse 2.4s ease-in-out infinite;
}
@keyframes arrowPulse{
  0%,100%{transform:translate(50%,-50%) scale(1);opacity:1;}
  50%    {transform:translate(50%,-50%) scale(1.3);opacity:.6;}
}
.pulse-arrow:hover,
.pulse-arrow:focus{transform:translate(50%,-50%) scale(1.4);}
@media(max-width:575.98px){
  .pulse-arrow{
    position:static;
    display:block;
    margin:1rem auto 0;
    transform:none;
  }
}

/* ==============================================================
   „Nächster Öffnungstag“‑Sektion
   ============================================================== */
#next-opening-section{
  background:var(--bs-primary);
  color:#ffffff;
  overflow:hidden;
}
#next-opening-section h2{color:#ffffff;}
#next-opening-section h2 .bi{vertical-align:baseline;}
#next-opening-section p{color:#ffffff;margin-bottom:0;}
@keyframes pulseWhite{
  0%,100%{opacity:1;}
  50%    {opacity:.75;}
}
#next-opening-section .date-pulse{
  animation:pulseWhite 2.5s infinite ease-in-out;
  display:inline-block;
}

/* --------------------------------------------------
   Footer
-------------------------------------------------- */
footer{
  flex-shrink:0;
  background:#f8f9fa;
  border-top:1px solid #dee2e6;
  font-size:.9rem;
  color:#6c757d;
  padding:1rem 0;
  margin-top:auto;
}
footer a{color:inherit;text-decoration:none;}
footer a:hover{color:var(--bs-primary);text-decoration:underline;}

/* --------------------------------------------------
   Sonstige Überschriften
-------------------------------------------------- */
.letter-heading{color:var(--bs-primary);}

/* Footer-Logo – passend zur Textfarbe (grau/muted) */
.footer-logo {
  height: 20px;
  filter: brightness(0) saturate(0%) opacity(0.6);
}



/* --------------------------------------------------
   Navbar
-------------------------------------------------- */
.navbar {
  background-color:#fff;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
  transition:background-color .3s ease, box-shadow .3s ease;
}
.navbar.scrolled {
  background-color:rgba(255,255,255,.9);
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.navbar .nav-link {
  color:#555;
  transition:color .3s ease;
}
.navbar .nav-link:hover {
  color:var(--bs-primary)!important;
}


/* --------------------------------------------------
   Modern Glass Navbar
   -------------------------------------------------- */
   .glassnav{
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(0,0,0,.05);
    box-shadow:0 2px 4px rgba(0,0,0,.04);
    transition:background .3s ease;
  }
  .glassnav .navbar-brand img{
    height:34px;                /* leicht größer für bessere Sichtbarkeit */
  }
  .glassnav .nav-link{
    position:relative;
    font-weight:500;
  }
  .glassnav .nav-link::after{
    content:"";
    position:absolute;
    left:0; bottom:0;
    width:0; height:2px;
    background:var(--bs-primary);
    transition:width .2s ease;
  }
  .glassnav .nav-link:hover::after,
  .glassnav .nav-link:focus::after{
    width:100%;
  }
  .navbar .nav-link.active,
  .navbar .nav-link:focus{
    color:var(--bs-primary)!important;
  }
  .navbar-toggler{
    border:none;
  }
  .navbar-toggler:focus{
    box-shadow:none;
  }