/* =========================================================
   HEADER (fixed, 300px) + NAV (start unter Header, bleibt beim Scroll sichtbar)
   ========================================================= */

:root{
  --header-h: 300px;   /* Headerhöhe */
  --nav-h: 64px;       /* Navhöhe Desktop */
}

/* =========================
   BASIS
   ========================= */

body{
  padding-top: calc(var(--header-h) + var(--nav-h));
  overflow-x: hidden;
  margin: 0;
}

/* =========================
   HEADER
   ========================= */

.header-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 1040;
  transition: transform .25s ease;
  will-change: transform;
}

.header-content{
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Logo (Desktop) */
.header-logo img{
  width: 240px;
  height: auto;
  max-height: 240px;
  display: block;
}

/* User / Avatar */
.header-user{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
}

.header-user a{
  display: block;
  line-height: 0;
}

.header-user .avatar-lg{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Schriftzug-Grafik im Header */
.header-slogan{
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* =========================
   NAV
   ========================= */

#cms-menu{
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100%;
  z-index: 1060;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  transition: top .25s ease;
}

#cms-menu .container{
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Beim Scrollen: Nav nach ganz oben */
body.header-collapsed #cms-menu{
  top: 0;
}

/* Header ausblenden, aber Dokumenthöhe nicht ändern */
body.header-collapsed .header-wrapper{
  transform: translateY(calc(-1 * var(--header-h)));
}

/* =========================
   CONTENT
   ========================= */

main,
.main-content,
.container-custom{
  overflow: visible;
  height: auto;
  max-height: none;
  min-height: 0;
}

/* =========================
   NAV: Dropdown (2. Ebene)
   ========================= */

#cms-menu .dropdown-menu{
  width: auto;
  min-width: max-content;
}

#cms-menu .dropdown-menu .nav-link,
#cms-menu .dropdown-menu .dropdown-item{
  white-space: nowrap;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px){
  .header-logo img{
    width: 170px;
    max-height: 170px;
  }

  .header-user .avatar-lg{
    width: 104px;
    height: 104px;
  }

  .header-slogan{
    max-height: 120px;
  }
}

@media (max-width: 576px){
  :root{
    --nav-h: 88px;
  }

  .header-logo img{
    width: 140px;
    max-height: 140px;
  }

  .header-user .avatar-lg{
    width: 96px;
    height: 96px;
  }

  .header-slogan{
    max-height: 100px;
  }
}

.card-body p {
    margin-bottom: 0.5rem;
}

.card-body p:last-child {
    margin-bottom: 0;
}