/* ============================= */
/* Eigene Styles für Hugo Scroll */
/* ============================= */

/* Farbdefinition */
:root {
  --accent-color: #E3CB3B;
  --background-color: #000000;
  --text-color: #FFF7CC;
  --heading-color: #E3CB3B;
  --hover-color: #BF9000;
  --black: #000000
}

/* ============================= */
/* 2️⃣ Allgemeines Layout        */
/* ============================= */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  margin: 0;
}

/* ============================= */
/* 3️⃣ Typografie                */
/* ============================= */
h1, h2, h3, h4 {
  color: var(--heading-color);
  font-weight: 600;
}

.blog-description {
  color: #BF9000;
}

/* ============================= */
/* 4️⃣ Buttons & Links           */
/* ============================= */
.btn,
.button {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: white !important;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
}

.btn:hover,
.button:hover {
  background-color: var(--hover-color) !important;
}

/* Sprachbuttons */
.lang-btn,
.btn-lang {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.btn-lang:hover,
.button:hover {
  background-color: var(--hover-color) !important;
}

.lang-btn.active,
.btn-lang.active {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.btn-lang.active:hover,
.button.active:hover {
  background-color: var(--hover-color) !important;
}

/* ============================= */
/* Header-Logo responsive & proportional */
/* ============================= */

/* ============================= */
/* Basisregel für Desktop        */
/* ============================= */
#blog-logo {
  max-height: 500x !important;
  height: auto !important;
  width: auto !important;
}

/* Tablets */
@media (max-width: 1024px) {
  #blog-logo {
    max-height: 500px !important;
  }
}

/* Smartphones */
@media (max-width: 768px) {
  #blog-logo {
    max-height: 220px !important;
  }
}

/* Sehr kleine Smartphones */
@media (max-width: 480px) {
  #blog-logo {
    max-height: 250px !important;
  }
}



/* ============================= */
/* 5️⃣ Sektionen & Footer        */
/* ============================= */

#blog-logo {
  max-height: 500px;   /* gewünschte Breite */
  height: auto;
}

.hero {
  background-image: url("/images/background-honigzauber.png");
  background-size: cover;        /* Bild deckt Fläche ab */
  background-position: center;   /* Bild bleibt zentriert */
  background-repeat: no-repeat;  /* Kein Kacheln */
  width: 100%;                   /* volle Breite */
  min-height: 60vh;              /* Höhe abhängig vom Viewport */
}

/* ============================= */
/*.hero {*/
  /*background-image: url("/images/hero-bg.jpg");*/
  /*background-size: cover;*/
 /* background-position: center;*/
  /*color: white;*/
/*}*/
/* ============================= */

.post-holder.dark {
  background-color: var(--accent-color) !important;
  color: var(--text-color) !important;
}

.post-holder.dark h1,
.post-holder.dark h2,
.post-holder.dark h3 {
  color: var(--text-color) !important;
}

/* =============================
.post-after {
  background-color: var(--accent-color) !important;
  color: var(--text-color) !important;
}
============================= */


.post-holder.dark .post-after {
  border-top-color: var(--accent-color) !important;
  color: var(--text-color) !important;
}

/* =============================
.fa {
  background-color: var(--accent-color) !important;
  color: var(--black) !important;
}
============================= */

.fixed-nav {
  background-color: var(--black) !important;
  color: var(--text-color) !important;
}

.site-footer {
   background-color: #37501a;
   color: #86c440;
}