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

/* Hero-Bereich */
.hero-text {
    background-color: #F4F8EC;
    padding: 80px 20px 60px 20px; 
    text-align: center;
    position: relative;
}

.hero-text h1 {
    color: #2E4B20;
    font-size: 3rem; 
    margin-bottom: 0.5rem;
}

.hero-text p {
    color: #333333;
    font-size: 1.2rem;
    margin-bottom: 1.2rem;
}

/* Buttons */
.alpaka-btn {
    background-color: #5F7F2F;
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    margin-right: 12px;
    display: inline-block;
}

.alpaka-btn-secondary {
    background-color: #8AA35D;
    color: #fff;
}

.alpaka-btn:hover,
.alpaka-btn:focus {
    background-color: #4F6B26;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Hero-Trennlinie */
.hero-divider {
    height: 3px;
    background-color: #C9DCAD;
    width: 70px;
    margin: 35px auto;
    border-radius: 2px;
}

/* Sektionen */
section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

section h2 {
    color: #2E4B20;
    font-size: 2rem;
    margin-bottom: 25px;
}

section p {
    color: #333333;
    line-height: 1.75;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

/* Bilder in Sektionen */
section img {
    max-width: 100%;
    display: block;
    margin: 25px auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Links in Textabsätzen */
section a {
    color: #5F7F2F;
    text-decoration: none;
    transition: color 0.25s ease, text-decoration 0.25s ease;
}

section a:hover {
    color: #4F6B26;
    text-decoration: underline;
}

/* ==============================
   Ü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 kompakt */
.alpaka-footer {
    background-color: #F4F8EC;   /* gleiche Farbe wie Hero */
    padding: 30px 20px;           /* kompakt */
    color: #2E4B20;
    font-family: Arial, sans-serif;
}

/* Container wie Hero-Bereich */
.alpaka-footer-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px; 
    width: 100%;
    margin: 0 auto;
    gap: 40px;
}

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

/* Überschriften */
.footer-column h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    font-weight: 600;
    color: #2E4B20;
}

/* Links – schöner wie Buttons/Hero */
.footer-links li {
    margin-bottom: 8px;
}

.footer-links li a {
    color: #5F7F2F;           /* dunkles Heugrün */
    text-decoration: none;
    font-weight: 500;
    padding: 2px 0;           /* leichter Abstand */
    transition: color 0.25s ease, text-decoration 0.25s ease;
}

.footer-links li a:hover,
.footer-links li a:focus {
    color: #4F6B26;           /* dunkler beim Hover */
    text-decoration: underline;
}

/* Footer-Logo EPLR */
.footer-links li img {
    max-height: 25px;
    vertical-align: middle;
}

/* Strich oben entfernen */
.alpaka-footer::before {
    display: none;
}

/* Responsive: Columns untereinander auf Mobile */
@media (max-width: 1024px) {
    .alpaka-footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-column {
        margin: 15px 0;
    }
}

/* ===============================
   HEADER – Hero / Footer Style
================================ */
/* =========================================
   HEADER (Cassiopeia) – STABIL
   (kein Umbau von Grid/Bootstrap-Collapse)
   ========================================= */

/* Hintergrund wie Hero/Footer */
header.container-header {
  background-color: #f4f8ec !important;
  border-bottom: 1px solid #c9dcad;
}

/* Menü-Links: enger + ruhiger (ohne Layout zu ändern) */
header.container-header ul.mod-menu > li > a {
  color: #5f7f2f;
  font-weight: 500;
  text-decoration: none;

  padding: 0.18rem 0.42rem;   /* enger */
  border-radius: 8px;

  transition: background-color .2s ease, color .2s ease;
}

/* Hover */
header.container-header ul.mod-menu > li > a:hover,
header.container-header ul.mod-menu > li > a:focus {
  background-color: #c9dcad;
  color: #4f6b26;
  outline: none;
}

/* Aktiv */
header.container-header ul.mod-menu > li.current > a,
header.container-header ul.mod-menu > li.active > a,
header.container-header ul.mod-menu > li > a[aria-current="page"] {
  background-color: #b7c897;
  color: #2e4b20;
  font-weight: 600;
}

/* LISTE: Abstände zwischen Menü-Punkten reduzieren (ohne Flex-Umbau) */
header.container-header ul.mod-menu > li {
  margin: 0 !important;
}

/* Icon-Klassen (Cassiopeia) sollen die Linkfarbe übernehmen */
header.container-header ul.mod-menu [class^="icon-"],
header.container-header ul.mod-menu [class*=" icon-"] {
  color: currentColor !important;
}

/* Die von dir verwendeten p-2 am Icon macht es riesig -> gezielt entschärfen */
header.container-header ul.mod-menu .p-2 {
  padding: 0.15rem !important;  /* statt Bootstrap p-2 (=0.5rem) */
}

/* Optional: Icon minimal kleiner, damit alles kompakter wirkt */
header.container-header ul.mod-menu .icon-home,
header.container-header ul.mod-menu .icon-cart,
header.container-header ul.mod-menu .icon-user {
  font-size: 1.05em;
  line-height: 1;
}
 /* Tablet/kleiner Desktop: Links dürfen nicht verschwinden -> Menü wird scrollbar */
@media (max-width: 1190px) and (min-width: 992px) {

  /* Nav-Bereich darf schrumpfen, damit Scroll im Menü funktioniert */
  header.container-header .grid-child.container-nav,
  header.container-header nav.navbar,
  header.container-header .navbar-collapse {
    min-width: 0 !important;
  }

  /* Menü als eine Zeile + horizontal scrollen */
  header.container-header ul.mod-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;

    scrollbar-width: none; /* Firefox */
  }
  header.container-header ul.mod-menu::-webkit-scrollbar { display: none; }

  /* etwas kompakter in diesem Bereich */
  header.container-header ul.mod-menu > li > a {
    padding: 0.14rem 0.34rem !important;
    font-size: 0.96rem;
  }

  /* dein Icon-Span hatte p-2 -> bleibt klein */
  header.container-header ul.mod-menu .p-2 {
    padding: 0.12rem !important;
  }
}

/* =========================================
   Alpakazucht – Box-Layout wie Hero & Footer
   ========================================= */

.alpaka-zucht-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* ruhige Sektionen wie Hero/Footer */
.alpaka-box{
  background: #f4f8ec;
  border: 1px solid #c9dcad;
  border-radius: 16px;
  padding: 1.6rem 1.6rem;
  margin: 0 0 1.4rem 0;
  box-shadow: 0 8px 20px rgba(95,127,47,0.06);
}

.alpaka-box h1{
  margin: 0 0 .5rem 0;
  color: #5f7f2f;
  font-size: 2rem;
}

.alpaka-box h2{
  margin: 0 0 .75rem 0;
  color: #5f7f2f;
  font-size: 1.5rem;
}

.alpaka-note{
  background: #ffffff;
  border: 1px solid #c9dcad;
  border-radius: 12px;
  padding: 1rem 1rem;
  margin: .75rem 0 0 0;
}

/* Inhaltsverzeichnis / Sprunglinks */
.alpaka-toc{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  margin: .5rem 0 0 0;
  padding: 0;
  list-style: none;
}

.alpaka-toc a{
  display: inline-block;
  padding: .45rem .7rem;
  border: 1px solid #c9dcad;
  border-radius: 999px;
  background: #ffffff;
  color: #5f7f2f;
  text-decoration: none;
  font-weight: 600;
}

.alpaka-toc a:hover{
  background: #f4f8ec;
}

/* CTA-Block */
.alpaka-cta{
  text-align: center;
  padding: 1.8rem 1.2rem;
  background: linear-gradient(135deg, #f4f8ec, #ffffff);
  border: 2px solid #c9dcad;
  border-radius: 18px;
}

/* ===============================
   Ruhige Action-Leiste (Heugrün)
   =============================== */
.alpaka-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1.2rem 0 2rem;
}

.btn-alpaka {
  display: inline-block;
  background: #f4f8ec;
  border: 1px solid #c9dcad;
  color: #3f5a1d;
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.btn-alpaka:hover {
  background: #eef5e2;
  border-color: #b7cf95;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

.btn-alpaka:focus-visible {
  outline: 2px solid #c9dcad;
  outline-offset: 2px;
}

/* ===============================
   Ruhiges Card-Layout (modern, erwachsen)
   =============================== */
.alpaka-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.alpaka-cards--small {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

/* Karte */
.alpaka-card2 {
  display: block;
  background: #fbfcf8;
  border: 1px solid #d7e3c6;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.alpaka-card2:hover {
  border-color: #c9dcad;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.alpaka-card2:focus-visible {
  outline: 2px solid #c9dcad;
  outline-offset: 2px;
}

/* Bildbereich */
.alpaka-card2__media {
  background: #f4f8ec;
}

.alpaka-card2__media img {
  width: 100%;
  height: auto;
  display: block;
}

/* Textbereich */
.alpaka-card2__body {
  padding: 1.05rem 1.1rem 1.15rem;
}

.alpaka-card2__title {
  margin: 0 0 0.35rem;
  font-size: 1.08rem;
  line-height: 1.25;
  font-weight: 650;
  color: #3f5a1d;
}

.alpaka-card2__text {
  margin: 0 0 0.85rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #2f2f2f;
  max-width: 60ch;
}

/* CTA-Zeile sehr dezent */
.alpaka-card2__cta {
  display: inline-block;
  font-size: 0.95rem;
  color: #5f7f2f;
  border-bottom: 1px solid rgba(95,127,47,0.35);
  padding-bottom: 2px;
}

.alpaka-card2:hover .alpaka-card2__cta {
  border-bottom-color: rgba(95,127,47,0.6);
}

@media (min-width: 992px) {
  .alpaka-cards {
    gap: 1.7rem;
  }
  .alpaka-card2__body {
    padding: 1.1rem 1.2rem 1.25rem;
  }
}

/* =========================================================
   HAUS-GARTEN-FREIZEIT 2026 – Landingpage Styles
   Sicher gekapselt: nur .hgf-* Klassen
   ========================================================= */

.hgf-hero,
.hgf-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.2rem 1rem;
}

/* HERO */
.hgf-hero {
  background: #f4f8ec;
  border: 1px solid #c9dcad;
  border-radius: 18px;
}

.hgf-hero__inner {
  max-width: 980px;
  margin: 0 auto;
}

.hgf-kicker {
  margin: 0 0 .4rem 0;
  color: #5f7f2f;
  font-weight: 700;
  letter-spacing: .02em;
}

.hgf-lead {
  font-size: 1.08rem;
  line-height: 1.55;
  margin: .6rem 0 1rem 0;
}

.hgf-note {
  margin: .9rem 0 0 0;
  color: #48611f;
  font-size: .95rem;
}

/* Badges */
.hgf-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .8rem 0 1rem 0;
}

.hgf-badge {
  background: #ffffff;
  border: 1px solid #c9dcad;
  border-radius: 999px;
  padding: .45rem .7rem;
  font-size: .95rem;
}

.hgf-stand {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: 999px;
  border: 1px solid #7f9b4a;
  background: #e6efd6;
  color: #2f3b1a;
}

/* CTA-Layout */
.hgf-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: .9rem 0 0 0;
}

.hgf-cta--stack {
  flex-direction: column;
  align-items: flex-start;
}

/* Grid + Cards */
.hgf-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  margin-top: .2rem;
}

.hgf-card {
  grid-column: span 6;
  background: #ffffff;
  border: 1px solid #c9dcad;
  border-radius: 18px;
  padding: 1.1rem;
}

.hgf-card--wide {
  grid-column: span 12;
}

.hgf-list {
  margin: .6rem 0 0 1.1rem;
}

.hgf-muted {
  color: #5a5a5a;
  margin-top: .7rem;
}

/* Info-Grid */
.hgf-info {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  margin-top: .7rem;
}

.hgf-info__title {
  margin: 0 0 .2rem 0;
  font-weight: 700;
  color: #5f7f2f;
}

/* Final CTA */
.hgf-finalcta {
  margin-top: 1.3rem;
  padding: 1.2rem;
  background: #f4f8ec;
  border: 1px solid #c9dcad;
  border-radius: 18px;
}

/* Responsive */
@media (max-width: 900px) {
  .hgf-card { grid-column: span 12; }
  .hgf-info { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .hgf-hero,
  .hgf-content {
    padding: 1rem .75rem;
  }
  .hgf-badge {
    font-size: .92rem;
  }
}

.hgf-image img {
  max-width: 100%;
  display: block;
  margin: 1.4rem auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
/* ===============================
   404 – Alpakas vom Silberberg
   Nutzt bestehende Hero/Button/Card-Styles
   =============================== */

.alpaka-404 {
  border: 1px solid #c9dcad;
  border-radius: 18px;
  max-width: 1100px;
  margin: 0 auto;
}

.alpaka-404 .alpaka-actions {
  justify-content: center; /* in Hero mittig */
}

.alpaka-404__wrap {
  padding-top: 1.2rem;
}

.alpaka-404__small {
  font-size: 0.95rem;
  color: #5a5a5a;
  margin-top: 1rem;
}

/* h2 kleiner */
h2 {
  font-size: 1.8rem;