/*
  styles.css

  Dieses Stylesheet definiert das Layout, die Farbgebung und die
  Responsivität der Seite „Brennholz Marburg“. Es orientiert sich an
  modernen One‑Page‑Layouts mit Vollbild‑Hero, flexiblen Gittern und
  klarer Typografie. Für die Navigation wird ein Hamburger‑Menü bereit
  gestellt, das auf kleineren Displays erscheint. Die Klasse
  `.animate` in Verbindung mit dem in script.js implementierten
  IntersectionObserver sorgt für sanftes Einblenden der Abschnitte beim
  Scrollen. Farben und Abstände sind so gewählt, dass eine gute
  Kontrastsensitivität und Lesbarkeit gegeben sind.
*/

/* Grundlegende Variablen */
:root {
  --primary-color: #5C7C2A;     /* sattes Grün für Buttons und Highlights */
  --primary-hover: #48621f;     /* dunkleres Grün für Hover‑Zustände */
  --background-light: #f9f9f9;  /* dezenter Hintergrund für helle Abschnitte */
  --text-color: #333333;        /* Standardtextfarbe */
  --white: #ffffff;
}

/* Reset grundlegender Elemente */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--text-color);
  line-height: 1.6;
  background-color: var(--white);
  padding-top: 70px; /* Platz für feste Navigation */
}

/* Container für max. Breite und horizontale Zentrierung */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Navigation */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--primary-color);
  text-decoration: none;
}

/* Navigationslinks */
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  margin: 0;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: 500;
  padding: 0.5rem 0;
  transition: color 0.3s ease;
}

.nav-links a:hover,
.nav-links a:focus {
  color: var(--primary-color);
}

/* Burger‑Menü für mobile Darstellung */
.burger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  width: 30px;
  height: 25px;
  justify-content: space-between;
}

.burger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: var(--text-color);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hero Section */
.hero {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  background-image: url('../images/hero.jpg');
  background-size: cover;
  background-position: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 220, 0.35); /* light warm overlay */
  z-index: 1;
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 1rem;
}

.hero-content h1,
.hero-content p,
.hero-content a.btn {
  color: #fffef8; /* almost white */
  text-shadow: 0 4px 16px rgba(0,0,0,0.7); /* strong shadow for contrast */
}

.hero-content h1 {
  font-size: 3rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  font-weight: 700;
}

.hero-content h1 .brand-highlight {
  color: #ffe066; /* pastel yellow */
  text-shadow: 0 4px 16px rgba(0,0,0,0.8);
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

/* Optional: Make button stand out */
.hero-content a.btn {
  background: #c49e60; /* warm wood-like color */
  color: #222;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Buttons */
.btn {
  display: inline-block;
  background-color: var(--primary-color);
  color: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn:hover,
.btn:focus {
  background-color: var(--primary-hover);
}

/* Abschnittstrennungen */
.section-padding {
  padding: 4rem 0;
}

/* Leistungen */
.services h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 700;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.service-item {
  background-color: var(--white);
  padding: 2rem 1rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

.service-item:hover {
  transform: translateY(-5px);
}

.service-item .icon-wrapper {
  font-size: 2.5rem;
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.service-item h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.service-item p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Über uns */
.about h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.about-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.about-text {
  flex: 1 1 50%;
}

.about-text p {
  margin-bottom: 1rem;
}

.about-image {
  flex: 1 1 50%;
}

.about-image img {
  width: 100%;
  border-radius: 8px;
}

.about {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Galerie */
.gallery h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
  font-weight: 700;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.gallery-grid img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* Kontaktbereich */
.contact h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.contact-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.contact-info,
.contact-form {
  flex: 1 1 45%;
}

.contact-info p {
  margin-bottom: 1rem;
  line-height: 1.5;
}

.contact-info a {
  color: var(--primary-color);
  text-decoration: none;
}

.contact-info a:hover,
.contact-info a:focus {
  text-decoration: underline;
}
/* === Preise (boxed) === */
.prices-title { font-size: clamp(2rem, 3vw, 2.5rem); margin-bottom: .5rem; }

.prices-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.price-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 12px 24px rgba(0,0,0,.07);
  transition: transform .15s ease, box-shadow .15s ease;
}
.price-card:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(0,0,0,.09); }

.price-name { margin: 0 0 .25rem; font-weight: 700; letter-spacing: .2px; }
.price-size { margin: 0 0 1rem; opacity: .85; font-size: .95rem; }

.price-tag { display: flex; align-items: baseline; gap: .5rem; }
.price-tag > span { font-weight: 800; line-height: 1; font-size: clamp(2.1rem, 5vw, 3rem); }
.price-euro { font-size: .6em; margin-left: .08em; }
.price-tag small { opacity: .85; font-size: .95rem; }

.prices-note { opacity: .9; margin-top: 1rem; font-size: .95rem; }

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.price-card .price { font-weight: 700; }
.price-card h3 { letter-spacing: .2px; }

.contact-form input,
.contact-form textarea {
  padding: 0.75rem;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}

.contact-form label {
  font-weight: 500;
}

.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.checkbox-wrapper input[type="checkbox"] {
  margin-top: 0.3rem;
}

.contact-form button.btn {
  align-self: flex-start;
  margin-top: 1rem;
}

/* Impressum und Datenschutz */
.legal h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.legal p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Footer */
footer {
  background-color: #333333;
  color: var(--white);
  text-align: center;
  padding: 2rem 0;
}

footer p {
  margin-bottom: 0.5rem;
}

footer a {
  color: var(--white);
  text-decoration: underline;
}

footer a:hover,
footer a:focus {
  color: var(--primary-color);
}

.footer-links {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.footer-links li a {
  text-decoration: none;
  font-weight: 500;
}

/* Animationen: Elemente sind zunächst unsichtbar und werden beim Scrollen eingeblendet */
.animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 70px;
    right: 0;
    background-color: rgba(255, 255, 255, 0.97);
    flex-direction: column;
    width: 250px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1rem;
  }

  .nav-links.nav-active {
    transform: translateX(0);
  }

  .burger {
    display: flex;
  }

  .burger.toggle span:nth-child(1) {
    transform: rotate(-45deg) translate(-6px, 6px);
  }

  .burger.toggle span:nth-child(2) {
    opacity: 0;
  }

  .burger.toggle span:nth-child(3) {
    transform: rotate(45deg) translate(-6px, -6px);
  }

  .contact-grid {
    flex-direction: column;
  }

  .contact-info,
  .contact-form {
    flex: 1 1 100%;
  }
}
/* ===== Green theme accents (firewood vibe) ===== */
:root{
  --green-700:#1b5e20; /* deep pine */
  --green-600:#2e7d32;
  --green-500:#43a047;
  --green-400:#66bb6a;
  --bg-50:#f6fbf7;    /* very light tint */
  --bg-100:#edf7ef;
  --ink-900:#1e1e1e;
}

/* Global link + focus */
a { color: var(--green-600); }
a:hover { color: var(--green-700); }
:focus-visible { outline: 3px solid var(--green-400); outline-offset: 2px; }

/* Navbar polish */
.navbar{
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.nav-links a{
  padding: .4rem .6rem;
  border-radius: .5rem;
  transition: background-color .15s ease, color .15s ease;
}
.nav-links a:hover{
  background: var(--bg-100);
  color: var(--green-700);
}

/* Buttons */
.btn{
  background: var(--green-600);
  color: #fff;
  border: 0;
  border-radius: .8rem;
  padding: .7rem 1.1rem;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow: 0 10px 20px rgba(46,125,50,.18);
}
.btn:hover{
  background: var(--green-700);
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(27,94,32,.22);
}

/* Section alt background (use on important blocks) */
.alt-bg{
  background: linear-gradient(180deg, var(--bg-50), #fff);
}

/* Headings subtle accent */
h1,h2{
  position: relative;
  color: var(--ink-900);
}
h2.prices-title::after{
  content:"";
  display:block;
  width: 64px;
  height: 4px;
  margin-top:.4rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green-500), var(--green-700));
}

/* Price cards — more “wow”, still clean */
.price-card{
  background:#fff;
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 24px rgba(0,0,0,.07);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  position: relative;
}
.price-card::before{
  /* green top bar */
  content:"";
  position:absolute; inset:0 0 auto 0; height:6px;
  border-radius: 1rem 1rem 0 0;
  background: linear-gradient(90deg, var(--green-500), var(--green-700));
}
.price-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(0,0,0,.09);
  border-color: rgba(27,94,32,.18);
}

.price-name{ color: var(--green-700); }
.price-tag > span{ color: var(--green-600); }

/* Footer detail */
footer{
  border-top: 4px solid var(--green-600);
  background: linear-gradient(180deg, #fff, var(--bg-50));
}
/* ===== THEME TUNE-UP (green, higher contrast, no harsh black) ===== */
:root{
  --green-700:#1b5e20; /* deep pine */
  --green-600:#2e7d32; /* primary accent */
  --green-500:#43a047;
  --ink-900:#1f2937;   /* soft “almost black” for headings */
  --ink-700:#374151;   /* body text */
  --ink-600:#4b5563;
  --bg-50:#f6fbf7;     /* very light green tint */
  --bg-100:#edf7ef;
}

/* Global text colors (replace pure black with softer ink) */
html, body { color: var(--ink-700); }
h1, h2, h3 { color: var(--ink-900); }
p, li { color: var(--ink-700); }

/* Navbar: clean white with gentle hover */
.navbar{
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(6px);
}
.nav-links a{
  color: var(--ink-700);
  padding: .4rem .6rem;
  border-radius: .5rem;
  transition: background-color .15s ease, color .15s ease;
}
.nav-links a:hover{ background: var(--bg-100); color: var(--green-700); }

/* Buttons: consistent green */
.btn{
  background: var(--green-600);
  color: #fff;
  border: 0;
  border-radius: .75rem;
  box-shadow: 0 8px 20px rgba(46,125,50,.18);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover{ background: var(--green-700); transform: translateY(-1px); }

/* Price cards: same look, better accent */
.price-card{ border: 1px solid rgba(0,0,0,.06); }
.price-name{ color: var(--green-700); }
.price-tag > span{ color: var(--green-600); }

/* OPTIONAL: make the whole Preise block sit on a subtle tinted bg.
   If you like it, add class="section-padding animate alt-bg" to the Preise <section> */
.alt-bg{ background: linear-gradient(180deg, var(--bg-50), #fff); }

/* Footer: dark green bar with light text (fixes “white on white” issue) */
footer{
  background: #0f3d1a;
  color: #e9f5ec;
  border-top: 0;
}
footer p, footer a, footer li, footer .footer-links a{
  color: #e9f5ec !important;
}
footer a:hover{ color: #ffffff !important; text-decoration: underline; }


/* === FIX PACK (force overrides) === */

/* 1) HERO OVERLAY TOO DARK — lighten common patterns */
#home::before,
.hero::before,
.header-hero::before,
.hero-overlay,
#home .overlay,
.hero .overlay {
  /* If your overlay is a pseudo-element: */
  background: rgba(0,0,0,.32) !important; /* was likely .6 or more */
  /* If it's a gradient overlay somewhere, this line will win anyway. */
}

/* If the hero background itself was set to a flat grey, neutralize it: */
#home, .hero, .header-hero {
  background-color: transparent !important;
}

/* If the heading looks too black on the lighter hero: soften it */
#home h1, .hero h1, .header-hero h1 {
  color: #1f2937 !important; /* soft “ink”, not pure black */
}

/* 2) FOOTER INVISIBLE — force dark green background & light text */
footer {
  background: #0f3d1a !important; /* deep pine */
  color: #e9f5ec !important;
  border-top: 0 !important;
}
footer p, footer li, footer a, footer .footer-links a {
  color: #e9f5ec !important;
}
footer a:hover { color: #ffffff !important; text-decoration: underline; }

/* 3) NAV + LINKS — avoid harsh black; use green on hover */
.navbar { background:#ffffff !important; border-bottom:1px solid rgba(0,0,0,.06); }
.nav-links a { color:#374151 !important; }
.nav-links a:hover { color:#1b5e20 !important; background: #edf7ef !important; }

/* 4) PRICE CARDS — keep the green vibe subtle but visible */
.price-card { border:1px solid rgba(0,0,0,.06) !important; background:#fff !important; }
.price-name { color:#1b5e20 !important; }
.price-tag > span { color:#2e7d32 !important; }

/* 5) Optional: section tint if you want the Preise block to pop */
#preise { background: linear-gradient(180deg, #f6fbf7, #ffffff) !important; }


/* HERO heading & subheading: bright + subtle glow */
#home h1, .hero h1, .header-hero h1 {
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  font-weight: 800;
}

#home p, .hero p, .header-hero p {
  color: #eef4f0 !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.35);
}

/* If your hero overlay is very dark, lighten it a bit */
#home::before, .hero::before, .header-hero::before,
#home .overlay, .hero .overlay {
  background: rgba(0,0,0,.35) !important;  /* was likely ~0.6 */
}

/* Keep the CTA button readable on the photo */
#home .btn, .hero .btn {
  background: #2e7d32 !important; /* green */
  color: #fff !important;
  box-shadow: 0 10px 20px rgba(46,125,50,.25);
}
#home .btn:hover, .hero .btn:hover {
  background: #1b5e20 !important;
}