/*
Theme Name: NGO
*/

 :root {
      /* Beige 50% heller */
      --bg-primary: #f4efe3;
      --bg-secondary: #f1ede3;
      --highlight: #646750;
      --headline: #393a2e;
      --text-primary: #222737;
      --text-muted: #6b7280;
      --white: #ffffff;
      --light-gray: #f8f9fa; 
      --border-soft: rgba(224,211,176,0.3);
      --rating-gold: #f3a33c;
      --shadow-main: 0 25px 60px rgba(0,0,0,0.12);
      --shadow-light: 0 16px 40px rgba(0,0,0,0.06);
    }

    * { box-sizing: border-box; }
    body {
      font-family: 'Outfit', system-ui, sans-serif;
   /*   background: var(--bg-primary); */
      color: var(--text-primary);
      line-height: 1.6;
      overflow-x: hidden;
        font-size: 1.05rem;
    }

  


    /* DISMISSIBLE TOP BAR - Hellgrau */
    .top-bar {
      background: var(--light-gray);
      color: var(--text-muted);
      font-size: 0.88rem;
      padding: 0.6rem 1rem;
      text-align: center;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      border-radius: 5px 5px 0 0;
    }

    /* WEISSE NAVBAR */
    .navbar-basti {
      background: var(--white) !important;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      padding: 1.2rem 8%;
      border-radius: 0 0 5px 5px;
    }

    .navbar-brand {
      font-weight: 700;
      font-size: 1.5rem;
      letter-spacing: 0.18em;
      text-transform: lowercase;
      color: var(--headline) !important;
    }

      a.navbar-brand img {
          width: 150px;
      }

    a.card-link svg.bi.bi-cart2 {
        margin: 10px 15px 0 0 ;
        color: #222737;
    }

    .navbar-nav .nav-link {
      font-size: 0.98rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--text-primary) !important;
      padding: 0.7rem 1.2rem 0 0.7rem;
      font-weight: 500;
/*text-decoration: underline;*/
margin-right: 25px;

    }

    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link:hover {
      color:#646750 !important;
    }

      li.nav-item a.nav-link {
                color:#646750 !important;          
      }


/* Mini Warenkorb im Header */
/* Cart-Icon in der Navbar */
.ngo-cart-link {
  position: relative;
  display: inline-block;
  margin-left: 20px;
  color: #222737;
}

.ngo-cart-link:hover {
  opacity: 0.8;
}

.ngo-cart-icon-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Kleine Badge mit Anzahl */
.ngo-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #63654d;
  color: #ffffff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-weight: 600;
}

/* Mobile Navi */
.navbar-collapse {
    padding: 20px 0;
}

li.nav-item {
    margin: 5px 0;
  padding-bottom: 10px;
}

@media (max-width: 991px) {
li.nav-item {
    border-bottom: 1px dashed lightgray;
}
}


    /* ALLE BORDER-RADIUS = 5px */
    .hero-inner, .product-card, .product-img-wrapper, 
    .feature-card, .hero-caption-box, .highlight-img-wrapper,
    .quote-card, .testimonial-card, .icon-item,
    .info-banner, .site-footer {
      border-radius: 5px !important;
    }

      p {
      font-family: 'inter', system-ui, sans-serif;
}



    /* HERO SECTION */
    .hero-section {
      position: relative;
      padding:0;
      background: var(--bg-primary);
      overflow: hidden;
  
  background-image: url("img/icons-row-bg.svg");
  background-repeat: no-repeat;
  background-position: center center;
  /* skaliert mit Breite, Höhe automatisch */
  background-size: cover;
}




    .hero-canvas-bg {
      position: absolute;
      top: -8%;
      right: 0;
      width: 33vw;
      height: 116%;
      background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
      /*border-radius: 0 5px 0 5px;*/
      z-index: 1;
      /*box-shadow: var(--shadow-main);*/
      transform: skew(-4deg);
    }
/*
section.hero-section.hero-section-inner.about-header  {
    background: #eaeaea;
background-position: right bottom;
      position: relative;
      padding:0;
      overflow: hidden;
  
  background-image: url("img/icons-row-bg.svg");
  background-repeat: no-repeat;
  background-size: cover;
}
*/
/*
section.hero-section.hero-section-inner {
    background: #ead0aa;
}
*/

    .hero-inner {
      position: relative;
      z-index: 2;
      padding:5rem 4rem 5rem 14rem;

    }

  @media (max-width: 1199.98px) {
      div.hero-inner { padding: 5rem 4rem 5rem 6rem; }
    }

    @media (max-width: 991.98px) {
      div.hero-inner { padding: 3rem 2rem; margin: 0 1.5rem; }
    }

    @media (max-width: 767.98px) {
      .hero-inner { padding: 2.5rem 1.5rem; margin: 0 1rem; }
    }


    @media (max-width: 767.98px) {
      .hero-inner { padding: 2.5rem 1.5rem; margin: 0 1rem; }
    }


    @media (max-width: 600px) {
        div.hero-inner {
            padding: 2rem 1rem 0 1rem;
        }
        div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-5 {
            padding-right: 0;
}
        .hero-media-wrapper div.hero-media-canvas {
            top: -50px;
        }
        div.hero-media-canvas img.hero-side-img {
            top: 135px;
        }

        div.hero-media-canvas img.hero-bottom-img {
            top: 25%;
        }
        div.hero-media-canvas img.hero-bottom-side-img {
            top: 50%;
        }



        .site-footer {
            padding: 2rem;
        }
    }



/* Hero - About */
div.hero-media-canvas img.hero-bottom-img.about-1 {
width: 25% !important;
  top: 5% !important;
  left: -10% !important;
    
}
div.hero-media-canvas img.hero-bottom-side-img.about-2 {
width: 13% !important;
  top: 35% !important;
  left: 75% !important;
}


/*
    @media (max-width: 600px) {
        div.hero-inner {
            padding: 0rem 2rem;
        }
        div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-5 {
            padding-right: 0;
}
        .hero-media-wrapper div.hero-media-canvas {
            top: -50px;
        }
        div.hero-media-canvas img.hero-side-img {
            top: 70px;
        }
        .site-footer {
            padding: 2rem;
        }
    }
*/



    .hero-tag {
      text-transform: uppercase;
      letter-spacing: 0.25em;
      font-size: 0.9rem;
      color: var(--highlight);
      font-weight: 600;
      margin-bottom: 1.2rem;
    }

  
      .hero-title {
font-size: 4.4vw;
  font-weight: 700;
  line-height: 0.9;
  color: var(--headline);
  margin-bottom: 1.4rem;
      }



    @media (max-width: 1199.98px) {
     .hero-title {
         font-size: 7vw;
        }

    }

    @media (max-width: 767.98px) {
     .hero-title {
         font-size: 16vw;
        }

    }



    .hero-subtitle {
      font-size: 1.2vw;;
        /*font-size: clamp(1.8rem, 4.5vw, 2.6rem);*/
      font-weight: 500;
      color: var(--headline);
      margin-bottom: 1.8rem;
padding-right: 27%;
line-height: 1.4;
    }

    @media (max-width: 1199.98px) {
      .hero-subtitle {
        font-size: 2.2vw; }
    }

    @media (max-width: 767.98px) {
      .hero-subtitle {
        font-size: 4vw; }
    }

    @media (max-width: 599.98px) {
      .hero-subtitle {
        font-size: 5vw; }
    }


    .hero-text {
      max-width: 30rem;
      font-size: 1.08rem;
      color: var(--text-primary);
    }



  /* Äußerer Wrapper: zentriert den ganzen Bild-Stack in der Spalte */
.hero-media-wrapper {
  position: relative;
  width: 100%;
  margin-top: 3rem;
  display: flex;
  justify-content: center;   /* horizontal mittig */
  align-items: center;       /* vertikal mittig */
  padding: 1.5rem 0;
}

    @media (max-width: 997.98px) {
     .hero-media-wrapper {
  margin-top: 0;
padding-top: 0;
padding-bottom: 0;
}
}

/* Innerer Canvas, der skaliert wird */
.hero-media-canvas {
  position: relative;
  width: min(100%, 1200px);   /* max. Breite des Clusters */
  aspect-ratio: 16 / 10;     /* Gesamtverhältnis; nach Geschmack anpassen */
}

/* Gemeinsame Basis für alle Hero-Bilder */
.hero-media-canvas img {
  position: absolute;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
  box-shadow: var(--shadow-main);
}

/* Deine bisherigen Positionen 1:1 übernommen */
.hero-main-img {
  top: 0;
  right: 23%;
  width: clamp(65%, 70vw, 76%);
  aspect-ratio: 16/9;
  z-index: 0;
}

.hero-side-img {
  left: 5%;
  top: 5%;
  width: clamp(32%, 28vw, 38%);
  aspect-ratio: 3/2;
  z-index: 4;
}

.hero-bottom-img {
  left: 28%;
  top: 10%;
  width: clamp(36%, 32vw, 44%);
  aspect-ratio: 1/1;
  z-index: 3;
}

.hero-bottom-side-img {
  left: 70%;
  top: 15%;
  width: clamp(16%, 20vw, 22%);
  aspect-ratio: 2/3;
  z-index: 2;
  border-radius: 5px !important;
}

/* Responsive: Canvas wird kleiner, bleibt mittig */
@media (max-width: 991.98px) {
  .hero-media-canvas {
    width: min(100%, 620px);
    aspect-ratio: 16 / 11;
  }
}

@media (max-width: 767.98px) {
  .hero-media-canvas {
    width: min(100%, 480px);
    aspect-ratio: 4 / 3;
  }
}




/* --- */
   



    /* ICONS ROW */
    .icons-row {
      padding: 3rem 0;
      background: var(--white);
    }

    .icon-item {
      text-align: center;
      padding: 1.5rem;
    }

    .icon-item i {
      font-size: 4rem;
        font-weight: 500;
      color: var(--highlight);
      display: block;
      margin-bottom: 1rem;
    }

    .icon-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--highlight);
      margin-bottom: 0.5rem;
    }
.icon-item div {
          color: var(--highlight);
}

    /* PRODUCTS */
    .products-section {
      background: var(--white);
      padding: 0 0 5rem 0;
    }

@media (min-width: 992px) {

div#50-50-1.col,
div#50-50-2.col  {
    width: 50% !important;

  }}

.col.breit  {
    width: 50%;

  }
    @media (max-width: 767.98px) {
div.col.breit  {
    width: 100% !important;
        }
    }


/* Produkte */
a.bcrump-link {
margin-bottom: 60px;
  display: block;
  color: var(--highlight);
  font-size: 12px;
}
    @media (max-width: 600px) {
div.container a.bcrump-link {
  margin-bottom: 40px;
  margin-top: -40px;
}
}


   section#shop.products-section {
          padding-top: 80px;
          background: #fdfcfa;
      }


    .product-card {
      background: linear-gradient(145deg, #f8f6f3, #f2efeb);
      padding: 1.5rem 1.2rem 1.6rem;
      margin-bottom: 2.5rem;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      border: 1px solid rgba(255,255,255,0.5);
      height: 100%;
      position: relative;
    }

/* SVG-Overlay-Ebene über der Hintergrundfarbe */
.product-card::before {
  content: "";
  position: absolute;
  inset: 0;                        /* top:0; right:0; bottom:0; left:0; */
  pointer-events: none;            /* klicks gehen durch zum Inhalt */

  /* Variante 1: externes SVG als Pattern */
  background-image: url("img/icons-row-bg-2.svg");
  background-repeat: no-repeat;    /* oder repeat / repeat-x / repeat-y */
  background-position: center;
  background-size: cover;          /* oder contain, je nach Effekt */

  /* opacity: 0.7;                     Stärke des Overlays */
  z-index: 1;                      /* liegt über der Card-Fläche, aber unter dem Inhalt */
}

/* Inhalt der Card über das Overlay heben */
.product-card > * {
  position: relative;
  z-index: 2;
}


/*
div.col:nth-child(1) > article:nth-child(1) {
          overflow: hidden;
  
  background-image: url("img/icons-row-bg-2.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
*/



/* Hover und Link */
      a.produkt-bild-link {
          text-decoration: none !important;
      }



/*
    .product-card:hover {
      transform: translateY(-10px);
      box-shadow: var(--shadow-main);
    }
*/
    .product-img-wrapper {
      background: linear-gradient(135deg, #e8e3dc, #d9d2c9);
      margin-bottom: 50px;
      aspect-ratio: 3/4;
      overflow: hidden;
    }

    .product-img-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

h1.hero-title.mb-4.breiten {
  font-size: 4rem;
line-height: 1.1;
}
    @media (max-width: 600px) {
h1.hero-title.mb-4.breiten {
  font-size: 3rem;
}
}

      h3.product-name,
p.Product-teaser {
padding: 0 10%;
font-weight: bolder;
  margin-bottom: 5px;
  font-size: 32px;
color: #15141A;

}

      p.variante {
color: grey;
font-size: 14px;
}

      p.Product-teaser {
          font-weight: bold;
font-size: 18px;
margin-bottom: 30px;
      }

      .product-price {
          font-weight: bold;
font-size: 28px;
margin-bottom: 30px;
letter-spacing: 5px;
color: #15141A;
}

      .product-price small {
          font-size: 12px;
  display: block;
  color: gray;
  font-weight: lighter;
line-height: 1.2;
      }
      
      
      

      a.product-btn {
 width: 80%;
height:56px;
color: white;
/*background: #b46a34;*/
background: #63654d;
border-radius: 5px;
font-weight: bold;
  font-size: 20px;
  display: block;
  text-decoration: none;
  margin: auto;
  padding-top: 12px;
transition: background-color 0.2s ease-in-out;
letter-spacing: 3px;

                }

      a.product-btn:hover{
         opacity: 0.7;
transition: background-color 0.8s ease-in-out;
      }

@media (max-width: 420px) { 
      a.product-btn {
 width: 100%;
  font-size: 14px;
  padding-top: 16px;
                }
}


/* HOVER FADE EFFKT - ZWEITES BILD */
.product-img-wrapper {
  position: relative !important;
  background: linear-gradient(135deg, #e8e3dc, #d9d2c9);
  margin-bottom: 30px;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 5px;

}

.product-img-primary,
.product-img-hover {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: opacity 0.4s ease-in-out;
}

.product-card:hover .product-img-primary {
  opacity: 0;
}

.product-card:hover .product-img-hover {
  opacity: 1;
}

.product-img-hover {
  opacity: 0;
}




    /* FEATURE SECTION */
    .feature-section {
      background: var(--bg-primary);
      padding: 4.5rem 0;
    }

    .feature-card {
      position: relative;
      overflow: hidden;
      min-height: 260px;
      aspect-ratio: 16/9;
      margin-bottom: 1.5rem;
    }

    /* INFO BANNER */

.info-banner {
  position: relative; /* nötig für das Pseudo-Element */
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
  padding: 2.5rem 0;
  margin-top: 4rem;
  overflow: hidden;   /* SVG sauber beschneiden */
}

.info-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Variante: externes SVG */
  background-image: url("img/icons-row-bg-2.svg");
  background-repeat: no-repeat;      /* oder repeat-x / repeat-y */
  background-position: top;       /* z.B. top right, center left etc. */
  background-size: cover;            /* oder contain */
  /* opacity: 0.4;                      Stärke des Effekts anpassen */
  z-index: 1;
}

/* Inhalt über das Overlay legen */
.info-banner > * {
  position: relative;
  z-index: 2;
}

    .info-icon {
      font-size: 3.5rem;
      color: var(--highlight);
      margin-bottom: 1.5rem;
    }

    .info-headline {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--headline);
      margin-bottom: 1rem;
    }

    .info-text {
      font-size: 18px;
font-weight: bold;
      color: var(--text-primary);
      line-height: 1.7;
      max-width: 60rem;
    }

    /* SECTION STYLES */
    .section-label {
      text-transform: uppercase;
      font-size: 0.88rem;
      letter-spacing: 0.25em;
      color: var(--highlight);
      text-align: center;
      margin-bottom: 0.75rem;
    }

    .section-title {
      text-align: center;
      font-size: 2rem;
      font-weight: 700;
      color: var(--headline);
      margin-bottom: 3rem;
    }

    /* FOOTER */
    .site-footer {
      background: var(--white);
      padding: 4rem 0 2.5rem;
      color: var(--text-muted);
    }

footer.site-footer div.container div.row.g-4 div.col-md-8 p,
footer.site-footer div.container div.row.g-4 div.col-md-4 ul.list-unstyled li a,
footer.site-footer div.container div div,
footer.site-footer div.container div div a {
    color: var(--highlight) !important;
}

.list-unstyled {
  line-height: 2.2;
}

footer.site-footer div.container div.row.g-4 div.col-md-8 p {
    padding-right: 5%;
}

.ghost-btn {
padding: 5px;
border-radius: 5px;
border: 1px solid;
border-color: #63654d;
text-decoration: none;
margin-top:5px;
}


.ghost-btn:hover {
opacity: 0.7;
}

    /* Produktseite */

/* DROPDOWN + BUTTON PERFEKT GESTYLED */
.woocommerce div.product form.cart .variations select,
.woocommerce div.product .variations td select {
  height: 40px !important;
  padding: 7px 12px !important;
  background: white !important;
  border: 1px solid lightgray !important;
  margin: 15px 0 !important;
  border-radius: 5px !important;
  font-size: 1rem !important;
  min-width: 200px !important;
}

/* WARENKORB BUTTON - EXAKTES STYLING */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .button.alt {
  width: 80% !important;
  height: 56px !important;
  color: white !important;
  background: #63654d !important;
  border-radius: 5px !important;
  font-weight: bold !important;
  font-size: 20px !important;
  display: block !important;
  text-decoration: none !important;
  margin: 20px auto !important;
  padding-top: 12px !important;
  transition: background-color 0.2s ease-in-out !important;
  letter-spacing: 3px !important;
  border: none !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .button.alt:hover {
  opacity: 0.8 !important;
  background: #63654d !important;
}

/* QUANTITY FIELD */
.woocommerce div.product form.cart .quantity input.qty {
  height: 40px !important;
  padding: 7px 12px !important;
  background: white !important;
  border: 1px solid lightgray !important;
  border-radius: 5px !important;
  font-size: 1rem !important;
  width: 80px !important;
}

form.cart {
    margin: auto auto auto 0;
}

a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained {
  background: transparent;
}
/* ... Produktseite --- */

/* NGO Breadcrumb oben auf der Produktseite */

.ngo-breadcrumb {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 1.5rem 0 1rem;
}

.ngo-breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.ngo-breadcrumb-list li {
  color: var(--text-muted);
}

.ngo-breadcrumb-list li a {
  color: var(--text-primary);
  text-decoration: none;
}

.ngo-breadcrumb-list li a:hover {
  text-decoration: underline;
}

/* Delimiter „/“ etwas Luft geben */
.ngo-breadcrumb-list li + li:before {
  content: "/";
  margin: 0 0.25rem;
  color: var(--text-muted);
}


/* Größe-Auswahl (pa_groesse) sauber stylen */
.variations select,
select#pa_groesse,
select[name^="attribute_pa_groesse"] {
  height: 40px !important;
  padding: 7px 12px !important;
  background: #ffffff !important;
  border: 1px solid lightgray !important;
  margin: 15px 0 !important;
  border-radius: 5px !important;
  font-size: 1rem !important;
  box-sizing: border-box !important;
}

/* Reset-Link nur als X-Icon */
.reset_variations {
  font-size: 0 !important; /* Text verstecken */
  margin-left: 8px !important;
}
.reset_variations::before {
  content: "✕" !important;
  font-size: 16px !important;
  color: #ffffff !important;
  background: #63654d !important;
  border-radius: 50% !important;
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  display: inline-block !important;
  text-align: center !important;
  cursor: pointer !important;
}

/* Vorrätig mit Checkmark */
.stock.in-stock::before {
  content: "✓ " !important;
  color: #63654d !important;
  font-weight: bold !important;
  margin-right: 4px !important;
}

/* Layout im unteren Block: Menge + Button nebeneinander */
.single-product form.cart {
  display: block !important;            /* Formular selbst normal lassen */
}

/* Zeile für Menge + Button */
.single-product form.cart .woocommerce-variation-add-to-cart {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  margin-top: 30px !important;
  flex-wrap: nowrap !important;
}

/* Menge links, kompakt */
.single-product form.cart .quantity {
  margin: 0 !important;
  flex: 0 0 auto !important;
}
.single-product form.cart .quantity .qty {
  height: 40px !important;
  padding: 7px 10px !important;
  border: 1px solid lightgray !important;
  border-radius: 5px !important;
  font-size: 1rem !important;
  width: 70px !important;
  box-sizing: border-box !important;
}

/* Warenkorb-Button rechts mit deinem Stil */
.single-product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button {
  flex: 1 1 auto !important;
  width: 90% !important;
  max-width: 320px !important;
  height: 56px !important;
  color: #ffffff !important;
  background: #63654d !important;
  border-radius: 5px !important;
  font-weight: bold !important;
  font-size: 20px !important;
  display: block !important;
  text-decoration: none !important;
  margin: 0 0 0 30px !important;
  padding-top: 12px !important;
  letter-spacing: 3px !important;
  border: none !important;
  text-align: center !important;
  line-height: 1.4 !important;
  transition: background-color 0.2s ease-in-out !important;
}
.single-product form.cart .single_add_to_cart_button:hover {
  opacity: 0.85 !important;
}

@media (max-width: 400px) { 
.single-product form.cart .single_add_to_cart_button,
.woocommerce div.product form.cart .single_add_to_cart_button {
  width: 100% !important;
  max-width: 300px !important;
  font-size: 0.9rem !important;
}
}



span.woocommerce-Price-amount.amount {
    font-size: 2.5rem;
}

.galerie-box {
          position: relative;
      padding:0;
      background-color: #fff;;
      overflow: hidden;
  
  background-image: url("img/icons-row-bg.svg");
  background-repeat: no-repeat;
  background-position: center center;
  /* skaliert mit Breite, Höhe automatisch */
  background-size: cover;

border-radius: 5px; box-shadow: 0 25px 60px rgba(0,0,0,0.12); /*background: linear-gradient(135deg, #f4f2eecf, #eee7df); */
padding: 1rem; max-width: 400px; width: 100%;
    
}

.container.long-beschreibung {
        margin: 80px auto;
}
@media (max-width: 800px) { 
.container.long-beschreibung {
        margin: 40px auto;
}
}


.long-beschreibung div ul,
.ngo-product-longtext ul {
  padding-left: 0.2rem;
  margin: 30px 0 30px 0;

}
section.product-single-section div.container.long-beschreibung div ul li,
.ngo-product-longtext li {
  margin-bottom: 0.4rem;
  list-style: none;
}

.long-beschreibung div h2 {
    font-size: 2.1rem;
}

.ngo-infos div.container div.row.justify-content-center.text-center h3 {
    margin-top: 70px;
}


/* Warenkorb + Kasse  */
a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained div.wc-block-components-button__text  {
  width: 80% !important;
  height: 56px !important;
  color: white !important;
  background: #63654d !important;
  border-radius: 5px !important;
  font-weight: bold !important;
  font-size: 18px !important;
  display: block !important;
  text-decoration: none !important;
  margin: 20px auto !important;
  padding-top: 12px !important;
  transition: background-color 0.2s ease-in-out !important;
  letter-spacing: 3px !important;
  border: none !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained {
  width: 60% !important;
  height: 56px !important;
  color: white !important;
  background: #63654d !important;
  border-radius: 5px !important;
  font-weight: bold !important;
  font-size: 17px !important;
  display: block !important;
  text-decoration: none !important;
  margin: 20px auto !important;
  padding-top: 12px !important;
  transition: background-color 0.2s ease-in-out !important;
  letter-spacing: 3px !important;
  border: none !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

button.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained div.wc-block-components-button__text div.wc-block-components-checkout-place-order-button__text {
    display: block;
}



table.variations tbody tr th.label label {
    margin-right: 10px;
}

a.wc-block-components-button.wp-element-button.wc-block-cart__submit-button.contained {
    text-decoration: none;
border: none;
color: white;
}

.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout {
    margin: 60px 0;
}

/* Bestellung erfolgreich */
.woocommerce-order {
    margin: 60px 0;
}
p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
font-size: 4rem;
  margin-bottom: 50px;
  font-weight: 600;
}

section.woocommerce-order-details table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details tbody tr.woocommerce-table__line-item.order_item td.woocommerce-table__product-total.product-total span.woocommerce-Price-amount.amount bdi,
section.woocommerce-order-details table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details tfoot tr td span.woocommerce-Price-amount.amount  {
    font-weight: 400 !important;
    font-size: 1.7rem !important;
}



/* Allgemeine Sektion für statische Seiten */
.page-section {
  padding: 4rem 0;
  background: #fdfdfa;
}

.page-section .section-title.text-start {
  text-align: left;
}

.ngo-text-block {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-primary);
}
.ngo-text-block p {
  margin-bottom: 1rem;
}

/* Innerer Hero leicht entschärfen */
.hero-section.hero-section-inner {
  padding-bottom: 2rem;
}

/* FAQ-Accordion im NGO-Stil (Bootstrap-Accordion-Override) */
.ngo-faq .accordion-item {
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  background: #ffffff;
  margin-bottom: 0.75rem;
}

.ngo-faq .accordion-button {
  background: #ffffff;
  color: var(--headline);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.9rem 1rem;
  box-shadow: none;
}
.ngo-faq .accordion-button::after {
  filter: grayscale(1);
}
.ngo-faq .accordion-button:not(.collapsed) {
  background: #f4efe3;
  color: var(--headline);
}

.ngo-faq .accordion-body {
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.7;
  padding: 0.9rem 1rem 1.1rem;
}

/* Mobile Abstände */
@media (max-width: 767.98px) {
  .page-section {
    padding: 3rem 1rem;
  }
}



/* Über Uns */
section#ueber-uns.page-section,
section#qualitaet.page-section,
section#ngo-auswahl.page-section {
background: #fff;
}
section#kontakt-section.page-section {
background: #faf9f5;
}


/* Landingpage-no pasran */
/* HERO VISUAL SECTION (VOLLBILD + KOLLAGE BILDER) */
.hero-visual-centered {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 0;
}

/* Rahmen (15% Abstand links/rechts) */
.hero-image-frame {
  position: relative;
  width: 900%; /* 100% - (2x15%) Abstand */
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
  z-index: 2;
}

/* Haupt-Hintergrundbild */
.hero-main-visual {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.9);
  width: 100%;
  height: 100%;
}

/* Kleine Collage-Bilder */
.hero-collage-img {
  position: absolute;
  border-radius: 5px;
  box-shadow: var(--shadow-main);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  object-fit: cover;
}

/* Positionierung der Bilder leicht überlappend */
.hero-collage-img.collage-1 {
  top: -5%;
  left: -8%;
  width: 28%;
  aspect-ratio: 3 / 4;
  transform: rotate(-3deg);
  z-index: 3;
}

.hero-collage-img.collage-2 {
  bottom: -8%;
  right: -6%;
  width: 32%;
  aspect-ratio: 4 / 3;
  transform: rotate(2deg);
  z-index: 3;
}

.hero-collage-img:hover {
  transform: scale(1.05);
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.2);
}

/* Mobile Anpassung */
@media (max-width: 991px) {
  .hero-image-frame {
    width: 90%;
    aspect-ratio: 4 / 3;
  }
  .hero-collage-img.collage-1 {
    left: -5%;
    width: 38%;
  }
  .hero-collage-img.collage-2 {
    right: -5%;
    width: 40%;
  }
} width: 60%;
  }
  .hero-collage-img.collage-2 {
    bottom: 5%;
    right: 5%;
    width: 65%;
  }
}


/* LP - Seiten */
/* Archordion */
div#faqAccordion.accordion {
    margin-top:30px;
--bs-accordion-active-bg: transparent !important; 
}


.accordion-button:not(.collapsed) {
    background-color: #e9dfc7 !important;
    color: var(--headline) !important;
font-size: 18px !important;
}

a.ngo-link {
    color: gray;
}

/* No Pasaran Header */
section.hero-section.lp-no-pasaran div.container-fluid div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-7 div.hero-media-wrapper div.hero-media-canvas img.hero-main-img {
right: 17%;
}

section.hero-section.lp-no-pasaran div.container-fluid div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-7 div.hero-media-wrapper div.hero-media-canvas img.hero-side-img {
left: -20%;
  top: 5%;
  z-index: -1;
}

section.hero-section.lp-no-pasaran div.container-fluid div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-7 div.hero-media-wrapper div.hero-media-canvas img.hero-bottom-side-img {
left: 82%;
  top: 9%;
  z-index: -1;
}


/* Mobile Abstände */
@media (max-width: 600px) {
section.hero-section.lp-no-pasaran div.container-fluid div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-7 div.hero-media-wrapper div.hero-media-canvas img.hero-main-img {
right: 12%;
  top: 35%;
}

section.hero-section.lp-no-pasaran div.container-fluid div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-7 div.hero-media-wrapper div.hero-media-canvas img.hero-side-img {
left: 0;
  top: 5%;
}

section.hero-section.lp-no-pasaran div.container-fluid div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-7 div.hero-media-wrapper div.hero-media-canvas img.hero-bottom-side-img {
left: 34%;
  top: -6%;
}
}

/* No All-Together Header */

section.hero-section.lp-all-together div.container-fluid div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-7 div.hero-media-wrapper div.hero-media-canvas img.hero-main-img {
right: 17%;
aspect-ratio: 1 / 1;
width: clamp(50%, 50vw, 50%);
}

section.hero-section.lp-all-together div.container-fluid div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-7 div.hero-media-wrapper div.hero-media-canvas img.hero-side-img {
left: 6%;
  top: 7%;
  z-index: -1;
aspect-ratio: 1 / 1;
width: clamp(28%, 18vw, 28%);
}



section.hero-section.lp-all-together div.container-fluid div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-7 div.hero-media-wrapper div.hero-media-canvas img.hero-bottom-side-img {
left: 82%;
  top: 9%;
  z-index: -1;
}


/* Mobile Abstände */
@media (max-width: 600px) {
section.hero-section.lp-all-together div.container-fluid div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-7 div.hero-media-wrapper div.hero-media-canvas img.hero-main-img {
right: 12%;
  top: 35%;
}

section.hero-section.lp-all-together div.container-fluid div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-7 div.hero-media-wrapper div.hero-media-canvas img.hero-side-img {
left: 0;
  top: 5%;
}

section.hero-section.lp-all-together div.container-fluid div.hero-inner div.row.g-5.align-items-center div.col-lg-6.col-xl-7 div.hero-media-wrapper div.hero-media-canvas img.hero-bottom-side-img {
left: 34%;
  top: -6%;
}
}

/* Brevo Formular Modifikation */

#sib-container {
  background: transparent !important;
}

div#sib-container.sib-container--medium.sib-container--vertical.breite {
  width: 78%;
text-align:center;
background-color:#ffffff;
border-radius:5px;
border-width:0px;
border-color:#C0CCD9;
border-style:solid;
direction:ltr
}
@media (max-width: 600px) {
div#sib-container.sib-container--medium.sib-container--vertical.breite {
  width: 90%;
}

  button.sib-form-block__button.sib-form-block__button-with-loader.btn-breite {
   font-size: 14px; 
  }


}

div.sib-form {
  padding: 0;
}

div#sib-container.sib-container--medium.sib-container--vertical {
padding: 0;
}
div#sib-container.sib-container--medium.sib-container--vertical form#sib-form div {
padding: 0;
}
div#sib-container.sib-container--medium.sib-container--vertical form#sib-form div div.sib-input.sib-form-block {
padding: 0;
}
div#sib-container.sib-container--medium.sib-container--vertical form#sib-form div div.sib-form__declaration {
padding: 0;
}

div.sib-form div#sib-form-container.sib-form-container div#sib-container.sib-container--medium.sib-container--vertical form#sib-form div div.sib-form__declaration div p,
div#sib-form-container.sib-form-container div#sib-container.sib-container--medium.sib-container--vertical form#sib-form div div.sib-form__declaration div {
font-size:12px;
}


div#sib-container.sib-container--medium.sib-container--vertical form#sib-form div div.sib-form-block button.sib-form-block__button.sib-form-block__button-with-loader {
/*width: 40%;*/
  height: 56px;
  color: white;
  background: #63654d;
  border-radius: 5px;
  font-weight: bold;
  font-size: 20px;
  display: inline-block;
  text-decoration: none;
  margin: auto;
    margin-top: auto;
  padding-top: 12px;
  transition: background-color 0.2s ease-in-out;
  letter-spacing: 3px;
  text-align: center !important;
}

div.sib-form div#sib-form-container.sib-form-container div#sib-container.sib-container--medium.sib-container--vertical form#sib-form div div.sib-form__declaration div.declaration-block-icon {
padding-right: 20px;
}

div#sib-container.sib-container--medium.sib-container--vertical form#sib-form div div.sib-form-block button.sib-form-block__button.sib-form-block__button-with-loader:hover {
  opacity: 0.7;
  transition: background-color 0.8s ease-in-out; 
}

div.sib-form div#sib-form-container.sib-form-container div#error-message.sib-form-message-panel.sib-form-message-panel--active {
max-width: 100%
}

 #sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: #c0ccda;
  }

  #sib-container input::placeholder {
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: #c0ccda;
  }

  #sib-container textarea::placeholder {
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: #c0ccda;
  }

  #sib-container a {
    text-decoration: underline;
    color: #2BB2FC;
  }


/* Kontakt */

/* KONTAKT PAGE */
.kontakt-hero {
  background: var(--color-surface);
}

.contact-content-color {
background: #fdfcfa !important;
}

.contact-form-wrapper {
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
  transition: all var(--transition-interactive);
}

.contact-form-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.contact-form-wrapper .wp-block-jetpack-contact-form {
  max-width: 100%;
}

.wp-block-jetpack-contact-form .contact-form label {
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  display: block;
}

.wp-block-jetpack-contact-form input,
.wp-block-jetpack-contact-form textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-size: var(--text-base);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
  background: var(--color-surface-2);
}

.wp-block-jetpack-contact-form input:focus,
.wp-block-jetpack-contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px oklch(from var(--color-primary) / 0.15);
}

.wp-block-jetpack-contact-form .contact-submit {
  background: var(--color-primary) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-3) var(--space-5) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  transition: all var(--transition-interactive) !important;
  width: 100%;
}

.wp-block-jetpack-contact-form .contact-submit:hover {
  background: var(--color-primary-hover) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 768px) {
  .contact-form-wrapper .card-body {
    padding: var(--space-4);
  }
}
/* FORM */
/* Jetpack Contact Form – passend zu deinem bisherigen HTML-Formular-Look */

.contact-form-block .contact-form,
.contact-form-block .wp-block-jetpack-contact-form,
.contact-form-block .jetpack-contact-form,
.contact-form-block .contact-form__form {
  display: grid;
  gap: 0;
  max-width: 100%;
}

.contact-form-block .contact-form > p,
.contact-form-block .wp-block-jetpack-contact-form > p,
.contact-form-block .jetpack-contact-form > p,
.contact-form-block .contact-form__field,
.contact-form-block .grunion-field {
  margin: 0;
  display: grid;
}

.contact-form-block label,
.contact-form-block .contact-form__label,
.contact-form-block .grunion-label,
.contact-form-block label.contact-form-label {
  font-size: 12px;
  font-weight: 500;
  color: #c2c9d9;
  margin-bottom: 10px;
  line-height: 1.4;
}

.contact-form-block input[type="text"],
.contact-form-block input[type="email"],
.contact-form-block input[type="tel"],
.contact-form-block input[type="url"],
.contact-form-block textarea,
.contact-form-block .contact-form__input,
.contact-form-block .grunion-field input,
.contact-form-block .grunion-field textarea {
  width: calc(100% - 1rem);
  appearance: none;
  border: 1px solid #c2c9d9;
  border-radius: 5px;
  background: #fff;
  color: var(--color-text);
  padding: 25px;
  font-size: 16px;
  line-height: 1.5;
  box-shadow: none;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive), background var(--transition-interactive);
  margin-bottom: 15px;
height: 46px;

}

.contact-form-block textarea,
.contact-form-block .grunion-field textarea {
  min-height: 180px;
  resize: vertical;
  padding: 15px;
}

.contact-form-block input::placeholder,
.contact-form-block textarea::placeholder {
  color: #c2c9d9;
  opacity: 1;
}

.contact-form-block input:focus,
.contact-form-block textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 18%, transparent);
}

.contact-form-block button[type="submit"],
.contact-form-block input[type="submit"],
.contact-form-block .contact-form__submit,
.contact-form-block .grunion-field input[type="submit"],
.contact-form-block div.contact-form-actions button.contact-form-button {
  width: 280px;
  height: 56px;
  padding: var(--space-3) var(--space-6);
  border: 0;
  border-radius: 5px;
  background: #63654d;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out, transform var(--transition-interactive), box-shadow var(--transition-interactive);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;

}

.contact-form-block button[type="submit"]:hover,
.contact-form-block input[type="submit"]:hover,
.contact-form-block div.contact-form-actions button.contact-form-button:hover {
  opacity: 0.7;
  transform: translateY(-1px);
}

.contact-form-block .contact-form__response,
.contact-form-block .grunion-field-errors,
.contact-form-block .contact-form-submission {
  font-size: 12px;
  line-height: 1.6;
  color: #c2c9d9;
}

.contact-form-block .contact-form-success,
.contact-form-block .grunion-field-success,
.contact-form-block .jetpack-form-success {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--color-success) 10%, var(--color-surface));
  color: var(--color-text);
  border: 1px solid color-mix(in oklab, var(--color-success) 30%, var(--color-border));
  font-size: var(--text-sm);
  line-height: 1.6;
}

.contact-form-block .contact-form-note {
  font-size: 12px;
  line-height: 1.6;
  color: #c2c9d9;
  margin-bottom: 80px;
  max-width: 70ch;
}

.contact-form-block .contact-form-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}


div#contact-form-188.wp-block-jetpack-contact-form-container div.contact-form-submission.contact-form-ajax-submission,
form#jp-form-245f562f8ee633bfc1c941669ae202f4f66d78b1.contact-form.commentsblock div.contact-form__error.show-errors {
  display: none;
}

/* Jetpack Error / Warning Messages */
.contact-form-block .contact-form__error {
  display: none;
  box-sizing: border-box;
  width: 100%;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 4px;
  border: 1px solid color-mix(in oklab, var(--color-error) 35%, var(--color-border));
  background: color-mix(in oklab, var(--color-error) 10%, var(--color-surface));
  color: var(--color-error);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.contact-form-block .contact-form__error.show-errors {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.contact-form-block .contact-form__error .contact-form__warning-icon {
  flex: 0 0 auto;
  color: var(--color-error);
  margin-top: 2px;
}

.contact-form-block .contact-form__error .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-form-block .contact-form__error ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-4);
}

.contact-form-block .contact-form__error li {
  margin: 0;
}

.contact-form-submission,
.jetpack--contact-form .success,
.contact-form-submission .success-message {
  display: none !important;
}