/* ================================
   Alpakas vom Silberberg - Allgemeines Styling
   ================================ */

/* Hero-Bereich */
.hero-section {
  background-image: url('/images/alpakas-vom-silberberg.jpg');
  background-size: cover;
  background-position: center;
  padding: 120px 20px 80px 20px;
  color: #ffffff;
  text-align: center;
  position: relative;
}

.hero-overlay {
  background: rgba(0,0,0,0.4);
  padding: 40px 20px;
  border-radius: 12px;
  display: inline-block;
}

.hero-buttons a.btn-cta {
  display: inline-block;
  padding: 14px 28px;
  margin: 10px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.25s ease;
}

/* Sektionen */
section {
  padding: 60px 20px;
  text-align: center;
}

/* Buttons allgemein */
.btn-cta {
  display: inline-block;
  padding: 12px 24px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: all 0.25s ease;
}

/* Farben */
.btn-shop {
  background-color: #6a8f3a;
  color: #fff;
}

.btn-shop:hover {
  background-color: #58782f;
}

.btn-erlebnis {
  background-color: #8f6a3a;
  color: #fff;
}

.btn-erlebnis:hover {
  background-color: #75562f;
}

.btn-info {
  background-color: #4f5d73;
  color: #fff;
}

.btn-info:hover {
  background-color: #3e4a5c;
}

/* Mobile */
@media (max-width: 767px) {
  .hero-section {
    padding: 80px 10px 40px 10px;
  }
  .hero-buttons a.btn-cta,
  section a.btn-cta {
    display: block;
    width: 100%;
    margin-bottom: 12px;
  }
}

/* ==============================
   Über uns – Alpakas vom Silberberg
   Text links, Layout zentriert
   ============================== */

.about-us {
  max-width: 1000px;
  margin: 0 auto;          /* Seite zentriert */
  padding: 3rem 1.5rem;
  line-height: 1.8;
  text-align: left;        /* Text LINKS */
  color: #2b2b2b;
}

/* Überschrift */
.about-us h1 {
  font-size: 2.3rem;
  margin-bottom: 1.8rem;
  color: #344e41;
}

/* Abschnittsüberschriften */
.about-us h2 {
  font-size: 1.55rem;
  margin-top: 3rem;
  margin-bottom: 1rem;
  color: #588157;
}

/* Fließtext */
.about-us p {
  margin-bottom: 1.3rem;
  font-size: 1.05rem;
  max-width: 850px;        /* bessere Lesbarkeit */
}

/* Listen */
.about-us ul {
  margin: 1.2rem 0 2rem 1.2rem;
  padding: 0;
  max-width: 850px;
}

.about-us ul li {
  margin-bottom: 0.6rem;
}

/* Hervorhebungen */
.about-us strong {
  color: #3a5a40;
}

/* Abschlusssatz */
.about-us p:last-of-type {
  margin-top: 2.8rem;
  font-size: 1.15rem;
  color: #344e41;
}

/* Responsive */
@media (max-width: 768px) {
  .about-us {
    padding: 2rem 1rem;
  }

  .about-us h1 {
    font-size: 2rem;
  }

  .about-us h2 {
    font-size: 1.4rem;
  }
}

/* ===================================
   Header-Hintergrund – Variante Heu 
   ==================================*/
:root {
--cassiopeia-color-primary: #C9DCAD;
--cassiopeia-color-link:  #9FC06D;
--cassiopeia-color-hover: #9FC06D;
}

/* Onlineshop Menüpunkt – dezent integriert */
li.item-592 > a {
    background-color: transparent;          /* gleiche Farbe wie Header */
    border: 2px solid #7fa33f;               /* etwas dunkleres Grün */
    color: #7fa33f;                          /* gleiche Farbe wie Rahmen */
    border-radius: 6px;
    padding: 0.35rem 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

/* Alpakawanderung & weitere – sehr dezenter sekundärer CTA */
li.item-1736 > a,
li.item-1737 > a,
li.item-1738 > a,
li.item-1317 > a,
li.item-1348 > a {
    color: #5f7f2f;               /* ruhiges, dunkles Heugrün */
    font-weight: 500;
    padding: 0.35rem 0.6rem;
    transition: color 0.2s ease-in-out;
}

/* Hover – nur leicht dunkler */
li.item-1736 > a:hover,
li.item-1736 > a:focus,
li.item-1737 > a:hover,
li.item-1737 > a:focus,
li.item-1738 > a:hover,
li.item-1738 > a:focus,
li.item-1317 > a:hover,
li.item-1317 > a:focus,
li.item-1348 > a:hover,
li.item-1348 > a:focus {
    color: #4f6b26;
    text-decoration: underline;
}
/* Login / Benutzer */
.mod-login a,
.mod-login-logout a,
.mod-users a {
    color: #5f7f2f;
    font-weight: 500;
    padding: 0.35rem 0.6rem;
    transition: color 0.2s ease-in-out;
}

/* Hover */
.mod-login a:hover,
.mod-login-logout a:hover,
.mod-users a:hover {
    color: #4f6b26;
    text-decoration: underline;
}

/* Warenkorb + Login – dezenter sekundärer CTA */
a.icon-cart svg,
a.icon-login svg {
    fill: #5f7f2f;               /* ruhiges Heugrün passend zu CTAs */
    transition: fill 0.2s ease-in-out;
}

/* Hover / Fokus */
a.icon-cart:hover svg,
a.icon-login:hover svg {
    fill: #4f6b26;               /* leicht dunkler beim Hover */
}

/* Abstand im Header */
a.icon-cart,
a.icon-login {
    margin-left: 1rem;           /* Abstand zu Menülinks */
    display: inline-flex;
    align-items: center;
}

/* Primärer CTA – Beratung / Shop */
.btn-cta.btn-shop {
    background-color: #5f7f2f;  /* Heugrün passend zum Header */
    color: #fff;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out;
}

.btn-cta.btn-shop:hover {
    background-color: #4f6b26; /* leicht dunkler beim Hover */
}

/* Sekundärer CTA – Wanderung */
.btn-cta.btn-wanderung {
    background-color: #e0e6d8;  /* dezenter Hintergrund */
    color: #5f7f2f;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    border: 1px solid #5f7f2f;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn-cta.btn-wanderung:hover {
    background-color: #d3d9b6; /* etwas dunkler beim Hover */
    color: #4f6b26;
}

/* SITEWEITER STANDARD‑CTA – Heugrün */
.alpaka-btn {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #5f7f2f;
  text-decoration: none;
  border: 1px solid #5f7f2f;
  border-radius: 4px;
  background-color: #f2f6ec;
  transition: color 0.2s ease-in-out,
              background-color 0.2s ease-in-out,
              border-color 0.2s ease-in-out;
}

.alpaka-btn:hover,
.alpaka-btn:focus {
  color: #4f6b26;
  background-color: #e6eddc;
  border-color: #4f6b26;
}

/* ======================Container für Alpakas & Wolle ================*/
/* Container für Alpakas & Wolle */
.alpaka-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 2rem 0;
}

/* Einzelne Boxen */
.alpaka-box {
  flex: 1 1 300px;
  padding: 1.5rem;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Überschrift */
.alpaka-box h2 {
  margin-top: 0;
  color: #4f6b26;
  font-size: 1.5rem;
}

/* Text */
.alpaka-box p {
  color: #333;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* CTA-Button */
.alpaka-box .alpaka-btn {
  margin-top: 0.5rem;
}

/* Sekundäre Links initial unsichtbar */
.alpaka-box .alpaka-secondary-links {
  margin-top: 0.5rem;
  display: none;
}

/* Sekundäre Links Styling */
.alpaka-box .alpaka-secondary-links a {
  display: block;
  margin-top: 0.3rem;
  color: #5f7f2f;
  text-decoration: none;
}

.alpaka-box .alpaka-secondary-links a:hover {
  color: #4f6b26;
  text-decoration: underline;
}

/* ==========Footer Container=================== */
/* Footer Grundlayout */
.alpaka-footer {
    background-color: #ADC28D;
    padding: 3rem 1rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Container */
.alpaka-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 3rem;
    justify-content: space-between;
}

/* Spalten */
.footer-column {
    flex: 1;
    min-width: 200px;
}

/* Überschriften */
.footer-column h3 {
    font-size: 1.05rem;
    margin-bottom: 0.8rem;
    color: #2f3d1f;
    font-weight: 600;
}

/* Linkliste */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.4rem;
}

/* Links */
.footer-links a {
    color: #2f3d1f;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-links a:focus {
    color: #1f2a14;
    text-decoration: underline;
}

/* Responsive: untereinander auf Mobile */
@media (max-width: 768px) {
    .alpaka-footer-container {
        flex-direction: column;
        gap: 2rem;
    }
}