/* ===== Einstellungen: Logo-Größe, Abstände, Typo ===== */
:root {
  --logo-w: 480px;   /* <- BREITE des Logos (bitte bei Bedarf anpassen!) */
  --logo-h: 150px;   /* feste Höhe deines Logos */
  --logo-gap: 30px;  /* Abstand über dem Logo */
  --logo-text: "Burgruine Lichteneck";
  --logo-text-gap: 8px;   /* Abstand zwischen Logo und Text */
  --logo-text-size: 1rem; /* Schriftgröße unter dem Logo */
  --logo-text-weight: 600;/* Gewicht (z.B. 400 normal, 600 halb-fett) */
  --logo-text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Hintergrundbild im Header */
.container-header {
  position: relative;
  background-image: url('/images/Logo_Lichteneck2025.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Platz für Logo + Text + Abstände schaffen */
  padding-top: calc(var(--logo-h) + var(--logo-gap) + var(--logo-text-size) * 1.6 + var(--logo-text-gap) + 1.5rem);
  padding-bottom: 1.5rem;

  overflow: visible; /* nichts abschneiden */
  z-index: 0;
}

/* dunkle Überlagerung */
.container-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  pointer-events: none;
  z-index: 1;
}

/* Menü als Bezugspunkt */
.container-header .mod-menu,
.container-header .navbar-nav {
  position: relative;
  z-index: 2;
}

/* ===== Logo (oberhalb des Menüs, linke Kante = Menübeginn) ===== */
.container-header .mod-menu::before,
.container-header .navbar-nav::before {
  content: url('https://burg-lichteneck.de/images/logo/Logo_1.5_WS_h150.png');
  position: absolute;
  left: 0;
  top: 0;

  /* Logo exakt über das Menü heben */
  transform: translateY(calc(-100% - var(--logo-gap)));
  display: inline-block;
  width: var(--logo-w);
  height: var(--logo-h);
  line-height: 0;
  pointer-events: none;
  z-index: 3;
}

/* ===== Text mittig unter dem Logo ===== */
.container-header .mod-menu::after,
.container-header .navbar-nav::after {
  content: var(--logo-text);
  position: absolute;
  left: 0;  /* linke Kante = Menübeginn, wie beim Logo */
  top: 0;

  /* direkt UNTER das Logo setzen */
  transform: translateY(calc(-100% - var(--logo-gap) + var(--logo-h) + var(--logo-text-gap)));

  /* gleiche Breite wie das Logo -> echte Zentrierung UNTER dem Logo */
  width: var(--logo-w);
  text-align: center;

  font-size: var(--logo-text-size);
  font-weight: var(--logo-text-weight);
  color: #fff;
  text-shadow: var(--logo-text-shadow);

  z-index: 3;
  pointer-events: none;
}

/* ===== Responsives Tuning ===== */
@media (max-width: 992px) {
  :root {
    --logo-w: 400px;  /* proportional kleiner */
    --logo-gap: 24px;
    --logo-text-size: .95rem;
  }
  .container-header {
    padding-top: calc(var(--logo-h) + var(--logo-gap) + var(--logo-text-size) * 1.6 + var(--logo-text-gap) + 1rem);
  }
}

@media (max-width: 576px) {
  :root {
    --logo-w: 300px;
    --logo-gap: 16px;
    --logo-text-size: .9rem;
  }
  .container-header {
    padding-top: calc(var(--logo-h) + var(--logo-gap) + var(--logo-text-size) * 1.6 + var(--logo-text-gap) + .75rem);
  }
}