/* ========== L'ANZA – Warum Panel (Glas) ========== */

/* Desktop: Abstand zum linken vertikalen Header */
@media (min-width: 1251px){
  :root{
    /* Stell das auf die reale Breite deines linken Headers ein */
    --ruby-header-offset: 300px;
  }

  .lanza-why-panel{
    margin-left: var(--ruby-header-offset);
  }
}


.lanza-why-panel{
  width: min(1100px);
  padding: clamp(18px, 3vw, 34px);
}


/* Referenziert: dein aktuelles lanza HTML/CSS/JS */

/* Falls unten etwas “überdeckt” wird (z.B. durch fixed Footer/Chrome UI): mehr Luft nach unten */
.lanza-why-panel{
  box-sizing: border-box;
  padding-bottom: max(150px, env(safe-area-inset-bottom));
  margin-bottom: 30px;
}


/* Desktop: Panel = 100vw minus Header (250px) + links Offset */
@media (min-width: 1251px){
  .lanza-why-panel{
    width: calc(100vw - 450px);
    max-width: calc(100vw - 450px);
    margin-left: 300px;
    margin-right: 0;

  }
}


.lanza-why-header,
.lanza-probe-wrap{
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(209, 182, 98, 0.85);
  border-radius: 24px;
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.lanza-why-header{
  padding: clamp(18px, 2.6vw, 28px);
  margin-bottom: clamp(16px, 2vw, 22px);
}

.lanza-why-title{
  margin: 30px 0 30px 0;
  line-height: 1.05;
  font-family: "Pacifico", cursive;
  font-size: clamp(28px, 3.2vw, 44px);
  letter-spacing: 0.2px;
  color: rgb(255, 255, 255);
  text-shadow: 
  0 0 1px rgba(0, 0, 0, 0.99), 
  0 0 10px rgba(209, 182, 98, 0.99), 
  0 0 15px rgba(209, 182, 98, 0.88), 
  0 0 20px rgba(209, 182, 98, 0.77) !important;
}

.lanza-why-lead{
  margin: 0 0 15px 0;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.35;
  color:rgb(255, 255, 255)
  
}

.lanza-why-text{
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  max-width: none;
  color:rgb(255, 255, 255)
}

/* --- 4 Glaspills / Cards --- */
.lanza-glass-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 16px);
  margin-bottom: clamp(16px, 2vw, 22px);
}

@media (max-width: 980px){
  .lanza-glass-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .lanza-glass-grid{ grid-template-columns: 1fr; }
}

.lanza-glass-card{
  background: rgba(8, 77, 25, 0.25);
  border: 2px solid rgba(209, 182, 98, 0.85);
  border-radius: 30px;
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  padding: 16px 16px 15px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.16);
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.lanza-glass-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.085);
  border-color: rgba(255,255,255,0.22);
}

.lanza-glass-media{
  width: 60px;
  height: 60px;

  display: grid;
  place-items: center;
  margin-bottom: 10px;
}

.lanza-glass-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lanza-glass-title{
  margin: 0 0 6px 0;
  font-size: 16px;
  line-height: 1.2;
  color:rgb(255, 255, 255)
}

.lanza-glass-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.95;
  color:rgb(255, 255, 255)
}

/* --- Probensystem Box + 2 Info Buttons --- */
.lanza-probe-wrap{
  padding: clamp(16px, 2.2vw, 24px);
}

.lanza-probe-intro{
  margin: 0 0 12px 0;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  max-width:none;
  color:rgb(255, 255, 255)
}

/* Buttons: gedacht für 2 Stück (z.B. .lanza-probe-toggle + ein zweiter .lanza-info-toggle) */
.lanza-probe-toggle,
.lanza-info-toggle{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(209, 182, 98, 0.85);
  color: rgb(255, 255, 255);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
  user-select: none;
  margin-right: 10px; /* falls 2 Buttons nebeneinander stehen */
  margin-bottom: 10px; /* Wrap auf mobile */
}

.lanza-probe-toggle:hover,
.lanza-info-toggle:hover{
  background: rgba(255, 255, 255, 0.3);
  color: rgba(209, 182, 98, 0.94);
  text-shadow: 
  0 0 10px rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}

.lanza-probe-toggle:focus-visible,
.lanza-info-toggle:focus-visible{
  outline: 2px solid rgba(255,255,255,0.55);
  outline-offset: 3px;
}

/* Details-Klappbereich */
.lanza-probe-details{
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(209, 182, 98, 0.6);
  border: 1px solid rgba(255,255,255,0.14);
}

.lanza-probe-detail{
  margin: 0 0 10px 0;
  font-size: 14px;
  color: rgb(255, 255, 255);
  line-height: 1.55;
  opacity: 0.96;
}
.lanza-probe-detail:last-child{ margin-bottom: 0; }

/* kleine Motion, wenn geöffnet (funktioniert sobald hidden entfernt ist) */
.lanza-probe-details:not([hidden]){
  animation: lanzaFadeIn 160ms ease-out both;
}

@keyframes lanzaFadeIn{
  from{ opacity: 0; transform: translateY(-2px); }
  to{ opacity: 1; transform: translateY(0); }
}

.lanza-why-panel{
  font-family: "Lato", sans-serif;
  text-shadow: 
  0 0 10px rgba(100, 73, 0, 0.3), 
  0 0 5px rgba(54, 40, 0, 0.2), 
  0 0 5px rgba(54, 40, 0, 0.1) !important;
}

@media (max-width: 1250px){
  .lanza-why-panel{
    width: 100vw;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
    margin-top: 140px; 
  }

  .lanza-why-title {
    font-size: 1.8rem;
    text-align: center;
  }

/* Referenziert: dein aktuelles lanza HTML/CSS/JS */

/* Mobile: Footer soll sich beim Aufklappen NICHT verschieben → Details aus dem Flow nehmen */
@media (max-width: 1250px){
  .lanza-probe-wrap{
    position: relative;
    overflow: visible;
   /* deine “Luft unter der Probe-Wrap” (Wert nach Bedarf) */
  }
  /* Referenziert: dein aktuelles lanza HTML/CSS/JS */

.lanza-probe-wrap{
  margin-bottom: clamp(80px, 8vw, 140px);
}


  /* Details unter die Box setzen, aber absolut (nimmt keinen Platz im Layout ein) */
  #lanzaProbeDetails.lanza-probe-details{
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 12px;
    z-index: 2;
  }
}


}

@media (min-width: 701px) and (max-width: 1250px) {
  .lanza-why-panel{
    margin-top: 100px; 
  }


}


@media (max-width: 367px) {
.lanza-why-panel{
  padding-bottom: 240px !important;
}
}

@media (max-width: 300px) {
.lanza-why-panel{
  padding-bottom: 270px !important;
}
}

/* Referenziert: dein aktuelles lanza HTML/CSS/JS */

.lanza-to-products-wrap{
  margin-top: 14px;
}

.lanza-to-products-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(209, 182, 98, 0.85);
  color: rgb(255, 255, 255);

  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  


  line-height: 1;
  cursor: pointer;
  font-weight: 500;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.lanza-to-products-btn:hover{
  background: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.28);
  transform: translateY(-1px);
}

.lanza-to-products-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,0.55);
  outline-offset: 3px;
}