/* =========================================================
   Immozione – Weißes Corporate Layout, zentrierte Navbar
   ========================================================= */

/* -------------------- Design Tokens -------------------- */
:root {
  --brand: #1f4d7a;
  --brand-700: #163a5a;
  --accent: #cda95a;
  --text: #1e1e1e;
  --bg: #ffffff;
}

/* -------------------- Grundlayout ---------------------- */
html, body {
  font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  margin: 0;
}

/* Container/Section dürfen sich strecken */
main > .container,
main > section.fill,
main > .container > .fill { flex: 1 1 auto; display: flex; flex-direction: column; }

/* ----- Carousel füllt den Main-Bereich ----- */
.carousel.viewport-fill { flex: 1 1 auto; height: 100%; margin: 0; overflow: hidden; }
.carousel.viewport-fill .carousel-item { height: 100%; position: relative; overflow: hidden; }

/* Unscharfer Hintergrund zum Füllen */
.carousel.viewport-fill .slide-bg{
  position:absolute; inset:0; background-position:center; background-size:cover;
  filter:blur(20px); transform:scale(1.15); opacity:.55;
}

/* Bild vollständig anzeigen */
.carousel.viewport-fill .carousel-item img{
  position:relative; z-index:1; max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain; display:block; margin:0 auto;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--brand-700);
  font-weight: 700;
  margin-bottom: .75rem;
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover, a:focus {
  color: var(--brand-700);
  text-decoration: underline;
}

/* -------------------- Navbar (einheitlich & zentriert) -- */
.navbar {
  --bar-h: 56px;                       /* Gesamthöhe der Leiste */
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 0;                          /* kein zusätzliches Padding */
}

.navbar .container {
  min-height: var(--bar-h);
  display: flex;
  align-items: center;                  /* Logo + Menü mittig */
  justify-content: space-between;
}

.navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}
.navbar-brand img {
  height: 52px;                        /* FIXED: Logo 32px */
  width: auto;
  display: block;
}

.navbar-nav {
  display: flex;
  align-items: center;                  /* Text vertikal mittig */
  gap: .75rem;
  margin: 0;
}
.navbar-nav .nav-link {
  display: flex;
  align-items: center;                  /* zentriert Text vertikal */
  height: var(--bar-h);                 /* gleiche Höhe wie Navbar */
  padding: 0 .5rem;                     /* horizontale Klickfläche */
  line-height: 1;
  color: var(--brand-700) !important;
  font-weight: 500;
}

/* Mobile: niedrigere Links, volle Breite klickbar */
@media (max-width: 991.98px){
  .navbar-nav { align-items: flex-start; width: 100%; }
  .navbar-nav .nav-item { width: 100%; }
  .navbar-nav .nav-link {
    height: auto;
    padding: .5rem 0;
    width: 100%;
    border-bottom: 1px solid rgba(0,0,0,.05);
  }
  .navbar-nav .nav-item:last-child .nav-link { border-bottom: none; }
}

/* -------------------- Badge-Pills ---------------------- */
.badge-pill{
  display:inline-block;
  line-height: 1;
  padding: .45rem .9rem;
  border-radius: 100rem;
  background:#edf2f7;
  color:#163a5a;
  border:1px solid rgba(0,0,0,.05);
  font-weight:500;
  white-space: nowrap;
}
.hero .d-flex.flex-wrap.gap-2{
  margin-top: .75rem;
  margin-bottom: 0;
}

/* -------------------- Service Cards (feiner Rahmen) ---- */
.service-card {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);   /* feine Kontur */
  border-top: 4px solid var(--accent);     /* goldene Linie oben */
  border-radius: 0.75rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
  padding: 1.5rem 1.5rem 1.25rem;
  transition: all 0.25s ease-in-out;
}

 /* Fixe, elegante Bühne fürs Carousel */
.carousel.wrap {
  max-width: 1100px;      /* optional: Breitenlimit */
  margin: 0 auto;
}
.carousel.wrap .carousel-item {
  height: 520px;          /* feste Höhe */
  position: relative;
  overflow: hidden;
  border-radius: .6rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* Unscharfer, vergrößerter Hintergrund als Füller */
.carousel.wrap .carousel-item .slide-bg {
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  filter: blur(18px);
  transform: scale(1.15);
  opacity: .55;                 /* dezent */
}

/* Vorderes Bild: komplett sichtbar, nicht beschnitten */
.carousel.wrap .carousel-item img {
  position: relative; z-index: 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;               /* zentrieren */
}

/* Caption kompakt & sauber */
.carousel.wrap .carousel-caption {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 18px;
  background: rgba(0,0,0,.45);
  padding: .6rem .9rem;
  border-radius: .5rem;
}
.carousel.wrap .carousel-caption h5,
.carousel.wrap .carousel-caption p {
  color: #fff; margin: 0;
}

/* Indikatoren & Pfeile im Corporate */
.carousel.wrap .carousel-indicators [data-bs-target]{ background-color:#cda95a; }
.carousel.wrap .carousel-control-prev-icon,
.carousel.wrap .carousel-control-next-icon{ filter: invert(1) brightness(1.8); }

/* Mobile: geringere Höhe */
@media (max-width: 576px){
  .carousel.wrap .carousel-item{ height: 320px; }
}

/* =============================================
   Carousel füllt den Bereich zwischen Navbar & Footer
   ============================================= */
.carousel.viewport-fill {
  width: 100%;
  min-height: calc(100vh - var(--navbar-h) - var(--footer-h));
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

/* Definiere Variablen für Navbar- und Footer-Höhe */
:root {
  --navbar-h: 60px;  /* tatsächliche Höhe deiner Navbar */
  --footer-h: 40px;  /* tatsächliche Höhe deines Footers */
}

.carousel.viewport-fill .carousel-item {
  height: calc(100vh - var(--navbar-h) - var(--footer-h));
  position: relative;
  overflow: hidden;
}

/* Hintergrund mit Blur-Effekt zum Auffüllen */
.carousel.viewport-fill .slide-bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  filter: blur(20px);
  transform: scale(1.15);
  opacity: 0.55;
}

/* Bild wird vollständig angezeigt (contain) */
.carousel.viewport-fill .carousel-item img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Caption – edel mit Schatten */
.carousel.viewport-fill .carousel-caption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2rem;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  text-align: center;
}
.carousel.viewport-fill .carousel-caption h5,
.carousel.viewport-fill .carousel-caption p {
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Pfeile + Indikatoren */
.carousel.viewport-fill .carousel-indicators [data-bs-target] {
  background-color: #cda95a;
}
.carousel.viewport-fill .carousel-control-prev-icon,
.carousel.viewport-fill .carousel-control-next-icon {
  filter: invert(1) brightness(1.8);
}

/* Mobile: etwas kleinere Abstände */
@media (max-width: 768px) {
  :root {
    --navbar-h: 60px;
    --footer-h: 50px;
  }
  .carousel.viewport-fill .carousel-caption {
    bottom: 1rem;
    padding: 0.5rem 0.75rem;
  }
}