/* ===============================================================
   ZENTRALE VARIABLEN & TYPOGRAFIE
=============================================================== */
:root {
  /* Farben */
  --hauptfarbe: #226688;         /* Blau f�r Kacheln / Akzente */
  --hoverfarbe: #44a6c6;         /* Hover-Akzent */
  --schriftfarbe: #666666;       /* Standardtext */
  --headlinefarbe: #fff;         /* Hero-�berschriften (wei�) */
  --footerfarbe_1: #f0f0f0;
  --footerfarbe_2: #e0e0e0;

  /* Hero / �berschriften */
  --hero-schriftgroesse: 2.3rem;

  /* �berschriftenfarben (zentrale Steuerung) */
  --h1-farbe: var(--headlinefarbe);
  --h2-farbe: var(--schriftfarbe);
  --h3-farbe: var(--headlinefarbe);
  --h4-farbe: var(--headlinefarbe);

  /* �berschriftengr��en */
  --h1-groesse: 3rem;
  --h2-groesse: 2rem;
  --h3-groesse: 2.0rem;
  --h4-groesse: 1.3rem;

  /* Letter-Spacing (Buchstabenabstand) */
  --h1-spacing: 2px;
  --h2-spacing: 1.5px;
  --h3-spacing: 1px;
  --h4-spacing: 0.5px;

  /* Bildbreite f�r Hoffnung-Section */
  --bildbreite: 420px;

/* ===============================================================
   HEADER & NAVIGATION – DESKTOP
=============================================================== */

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 15px 25px;
  width: 100%;
  box-sizing: border-box;
}

.logo {
  margin-left: 83px;
  margin-top: 5px;
}

.logo img {
  width: 131px;
  height: auto;
  display: block;
}

/* Zentrale Navigation */
nav#main-nav {
  position: relative;
  right: 110px;
}

nav#main-nav ul {
  display: flex;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav#main-nav ul li a {
  text-decoration: none;
  color: var(--schriftfarbe);
  font-weight: 500;
  font-size: 1.1em;
  transition: color .3s;
}

nav#main-nav ul li a:hover {
  color: var(--hoverfarbe);
}

nav#main-nav ul li a.active {
  color: var(--hauptfarbe);
}


/* ===============================================================
   LINIE UNTER MENÜ BEI THEMA DES MONATS
=============================================================== */

header.header {
  position: relative;
}

header.header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px; /* Dicke */
    border-bottom: 1px solid rgba(128, 128, 128, 0.6); /* Grau, 40% sichtbar */

body.linie-nav header.header::after {
  background-color: var(--schriftfarbe);
}

body:not(.linie-nav) header.header::after {
  background-color: transparent;
}



/* ===============================================================
   HAMBURGER – BASIS (Desktop unsichtbar)
=============================================================== */

.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.hamburger span {
  width: 28px;
  height: 3px;
  background: var(--schriftfarbe);
  transition: .3s;
}


/* ===============================================================
   MOBILE NAVIGATION – bis 900px
=============================================================== */

@media (max-width: 900px) {

  /* Logo-Position */
  .logo {
    margin-left: 20px;
  }

  /* Hamburger sichtbar */
  .hamburger {
    position: absolute;
    right: 25px;
    top: 22px;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 9999;
  }

  /* Schriften & Linien scharf halten */
  .hamburger span {
    background: var(--schriftfarbe);
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
  }

  /* Standard: Menü geschlossen */
  nav#main-nav ul {
    display: none;
    flex-direction: column;
    width: 100%;
    background: white;
    padding: 0;
    gap: 20px;
    text-align: left;

    /* Animation-Startzustand */
    opacity: 0;
    transform: translateY(-12px);
  }

  /* Menü geöffnet */
  nav#main-nav.open ul {
    display: flex;
    padding: 20px 0 20px 47px;

    /* SlideDown-Animation */
    animation: slideDown 0.45s ease forwards;
  }

  /* Navigation positionieren */
  nav#main-nav {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 5000;
  }
}


/* ===============================================================
   Weitere Responsive Korrekturen
=============================================================== */

@media (max-width: 1200px) {
  .logo { margin-left: 60px; }
}


/* ===============================================================
   Keyframes – SlideDown-Effekt
=============================================================== */

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}