/* Global variables and basic styles */
:root {
  /* Naturnahe Farbpalette – angelehnt an die ursprüngliche Website */
  /* Heller Hintergrund für die gesamte Seite */
  --primary-bg: #f9f9f3;
  /* Sekundärer Hintergrund für Karten und helle Abschnitte */
  --secondary-bg: #ffffff;
  /* Textfarben auf hellem Hintergrund */
  --text-color: #333333;
  --heading-color: #2d5f2e; /* sattes Grün für Überschriften */
  /* Akzentfarbe für Buttons und Links */
  --accent-color: #4b8b3b;
  /* Warme Braun-/Holztöne für Highlights */
  --highlight-color: #8c6a45;
  /* Kartenhintergründe und Ränder dezent absetzen
     Wir orientieren uns stärker an der ursprünglichen Farbpalette und
     verwenden für Karten einen hellen Hintergrund anstelle eines
     dunklen Schleiers. Dadurch wirken die Informations‑Kacheln
     freundlicher und weniger grünstichig. */
  --card-bg: var(--secondary-bg);
  --card-border: rgba(0, 0, 0, 0.1);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: var(--primary-bg);
  color: var(--text-color);
}
/* Navigation */
/* Navigationsleiste */
/* Navigationsleiste */
.navbar {
  /* Fixieren der Navigation am oberen Rand */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  /* Heller Hintergrund und dezenter Schatten */
  background-color: var(--primary-bg);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  /* Verwenden von Flexbox, um Logo, Hamburger und Links auszurichten */
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* erlauben, dass Elemente umbrochen werden */
  flex-wrap: wrap;
  /* kleinere Abstände für mobile Geräte */
  padding: 0.5rem 1rem;
}

/* Logo in der Navigation: Bild wird im HTML definiert */
/* Logo in der Navigation: Bild wird im HTML definiert */
.navbar-logo img {
  height: 36px;
  width: auto;
  max-width: 100%;
}

/* Versteckter Toggle für das mobile Menü */
.nav-toggle {
  display: none;
}

/* Hamburger-Icon besteht aus drei Balken */
.nav-toggle-label {
  display: none;
  flex-direction: column;
  cursor: pointer;
}
.nav-toggle-label span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 4px 0;
  background-color: var(--text-color);
  transition: transform 0.3s ease;
}

/* Links in der Navigation */
/* Container für die Navigationslinks */
.nav-links {
  display: flex;
  gap: 1.5rem;
}
.nav-links a {
  color: var(--text-color);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--accent-color);
}

/* Mobile Navigation Styles */
@media (max-width: 768px) {
  /* Hamburger sichtbar machen und an das Ende schieben */
  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    cursor: pointer;
  }
  /* Navigationslinks als vertikale Liste */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background-color: var(--primary-bg);
    flex-direction: column;
    padding: 1rem 2rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  }
  /* Menü ausklappen wenn der Toggle aktiviert ist */
  .nav-toggle:checked ~ .nav-links {
    max-height: 500px;
    opacity: 1;
  }
}
/* Hero section */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-align: left;
  overflow: hidden;
}
.hero video,
.hero .overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hero .overlay {
  /* Dezente Abdunkelung ohne Farbstich für bessere Lesbarkeit
     Ursprünglich war hier ein dunkler Overlay mit stärkerer Opazität (0.35).
     Nutzerfeedback wies auf einen „grün‑stichigen“ Eindruck hin, obwohl
     der Overlay schwarz war. Um das natürliche Farbspektrum des Videos
     stärker durchscheinen zu lassen, reduzieren wir die Deckkraft des
     Overlays deutlich. Dadurch behält das Video seine Farbigkeit,
     während Text dennoch ausreichend Kontrast besitzt. */
  background: rgba(0, 0, 0, 0);;
  z-index: 1;
}
.hero .content {
  position: relative;
  z-index: 2;
  padding: 2rem;
  max-width: 800px;
  margin-bottom: 4rem;
}
.hero h1 {
  font-size: 2.8rem;
  line-height: 1.1;
  margin-bottom: 1rem;
  /* Helle Schrift im Video-Hero für optimale Lesbarkeit */
  color: #ffffff;
}
.hero p {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: #f0f0f0;
}
.btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
}
.btn-primary {
  background-color: var(--accent-color);
  color: #fff;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.btn-secondary {
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
}
.btn-secondary:hover {
  background-color: var(--accent-color);
  color: #fff;
}
/* Sections */
.section {
  padding: 4rem 2rem;
}
.section-light {
  background-color: var(--secondary-bg);
  color: #2f3e2b;
}
.section-dark {
  background-color: var(--primary-bg);
  color: var(--text-color);
}
.section-title {
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--heading-color);
}
/* Cards (for services and USPs) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}
.card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.2s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  color: var(--heading-color);
}
.card p {
  font-size: 1rem;
  color: var(--text-color);
}
/* Testimonial slider placeholder */
.testimonials {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.testimonials p {
  font-size: 1.1rem;
  font-style: italic;
  margin-bottom: 1rem;
}

/* Galerie-Grid und Lightbox */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.gallery-grid img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.gallery-grid img:hover {
  transform: scale(1.03);
}
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
}

/* Two‑column layout for feature sections
   These sections mirror the Blue Cat‑inspirierte Gestaltung: Bild und Text
   nebeneinander, mit ausreichend Abstand und responsivem Verhalten.
   Verwenden Sie die Klassen .feature-section, .feature-text und .feature-image
   in Ihrem HTML. */
.feature-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  margin: 4rem 0;
}
.feature-section .feature-text {
  flex: 1 1 50%;
  min-width: 280px;
}
.feature-section .feature-image {
  flex: 1 1 45%;
  min-width: 280px;
}
.feature-section .feature-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.feature-section h3 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--heading-color);
}
.feature-section p {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-color);
  margin-bottom: 1rem;
}
/* Footer */
footer {
  /* Fester Footerhintergrund: orientiert am Primärgrün der Marke
     (wie im ursprünglichen Design). Dies ersetzt das sehr dunkle
     Grün (#092c20) und harmoniert besser mit dem Rest der Palette. */
  background-color: var(--heading-color);
  color: var(--secondary-bg);
  padding: 2rem;
  text-align: center;
}
footer a {
  color: var(--accent-color);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
  .navbar ul {
    gap: 1rem;
  }
}
/* ==== Video-Hero (Portrait-Video komplett anzeigen) ==== */
.hero { position: relative; min-height: 70vh; overflow: hidden; }
.hero-media, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-video { object-fit: contain; background: transparent; } /* Letterboxing */
.overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); pointer-events: none; }

/* Inhalt über dem Video zentriert */
.hero .content, .hero .hero-content {
  position: relative; z-index: 2;
  display: grid; place-content: center;
  min-height: 70vh; padding: clamp(16px, 3vw, 48px);
  text-align: center; color: #fff;
}

/* CTA-Buttons im Hero */
.hero-cta { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }
.hero-cta .btn { border-radius:999px; padding:.8rem 1.2rem; font-weight:600; }
.hero-cta .btn-primary { background: var(--accent-color, #6A98AF); color:#fff; }
.hero-cta .btn-ghost { background: transparent; border:2px solid rgba(255,255,255,.85); color:#fff; }

/* etwas weniger Overlay auf kleinen Screens, damit mehr vom Video „wirkt“ */
@media (max-width: 640px){
  .overlay { background: rgba(0,0,0,0); }
  .hero, .hero .content, .hero .hero-content { min-height: 65vh; }
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce){
  .hero-video { display:none; }
}
/* ==== Klickbare Service-Karten ==== */
.card-link {
  display:block;
  text-decoration:none;
  color: inherit;
}
.card-link .card {
  transition: transform .15s ease, box-shadow .15s ease;
}
.card-link:hover .card,
.card-link:focus-visible .card {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  outline: none;
}
/* Bessere Lesbarkeit von Überschriften & Text im Hero */
.hero-content h1,
.hero-content p,
.hero-content a {
  text-shadow: 
    1px 1px 3px rgba(0,0,0,0.7),   /* dunkler Schatten */
    -1px -1px 3px rgba(0,0,0,0.7); /* in beide Richtungen */
}
.hero-content {
  background: rgba(0,0,0,0); /* leicht transparenter Hintergrund */
  padding: 1rem;
  border-radius: 8px;
  display: inline-block;
}