/* zusatz CSS: Produkte Seite */

/* ============================================================
   JAHRESZEITEN-BEREICH (äußerer Container)
   - steuert die maximale Breite des gesamten Abschnitts
   ============================================================ */
.jahreszeit {
  max-width: 100%;   /* Gesamtbreite der Jahreszeit – HIER einstellen */
  margin: 0 auto;     /* zentriert */
  padding: 20px;      /* Innenabstand */
}

/* Hintergrundfarben */
.fruehjahr   { background:#fbfbf0; }
.sommer      { background:#f0fff0; }
.herbst      { background:#fff0dd; }
.winter      { background:#f4f4ff; }
.ganzjaehrig { background:#f0f0f0; }

/* Titel */
.jahreszeit h2 {
  margin-bottom:0.7em;
  font-size:1.8rem;   /* Schriftgröße DESKTOP */
  line-height:0.1em;
  text-align:center;
  font-weight:bold;
  color:rgba(0,0,0,0.3);
  letter-spacing:0.5rem;
}



/* ============================================================
   PRODUKT-GRID
   - flexible Anzahl Spalten
   - minmax = Kachelgröße
   ============================================================ */
.produkt-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(66px,1fr)); /* 👉 Kachelgröße HIER */
  gap:12px;               /* 👉 Abstand zwischen Kacheln */
  width:100%;             /* volle Breite */
  box-sizing:border-box;
}



/* ============================================================
   PRODUKT-KACHEL
   ============================================================ */
.produkt {
  text-align:center;
  cursor:pointer;
  position:relative; /* nötig für Zoom-Overlay */
}



/* ============================================================
   BILDBEREICH
   ============================================================ */
.img-box {
  width:100%;
  aspect-ratio:1/1;   /* quadratische Kacheln */
  position:relative;
  overflow:visible;   /* Zoom darf rausstehen */
 /*  border-radius:6px;  keine Wirkung (?) >> ist nur der Thumb umgebende Container */
  
}

.thumb {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:6px;
  box-shadow: 2px 2px 3px rgba(0,0,0,0.25); /* 👉 dezenter THUMB Schatten */
}



/* ============================================================
   PRODUKTNAME
   ============================================================ */
.name {
  margin-top:-2px;
  font-size:0.8rem;   /* 👉 Schriftgöße (Achtung: Mobile separat einstellen unten) */
  line-height:0.9em;  /* 👉 Zeilenhöhe */
  font-weight:500;
  color:#663333;
}




/* ============================================================
   ZOOM-OVERLAY
   ============================================================ */
.full-wrap {
  position:absolute;
  top:50%; left:50%;
  width:350px;                 /* 👉 Größe des großen Bildes */
  border-radius:10px;
  overflow:hidden;
  transform:translate(-50%,-50%) scale(0.2); /* Start-Zoom */
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:99;
  display:flex;
  align-items:center;
  justify-content:center;
}

.full {
  width:100%;
  height:auto;
  object-fit:contain;
}

.produkt:hover .full-wrap {
  opacity:1;
}



/* ============================================================
   NO-ZOOM (Platzhalter)
   ============================================================ */
.produkt.nozoom { cursor:default; }
.produkt.nozoom .full-wrap { display:none !important; }
.produkt.nozoom:hover .full-wrap {
  opacity:0 !important;
  transform:none !important;
}



/* ============================================================
   ZOOMGRÖSSEN – DESKTOP
   ============================================================ */
@media (hover:hover){
  .produkt:hover .full-wrap      {transform:translate(-50%,-50%) scale(0.75);} /* Standard */
  .produkt.quer:hover .full-wrap {transform:translate(-50%,-50%) scale(0.9);} /* Querformat */
  .produkt.hoch:hover .full-wrap {transform:translate(-50%,-50%) scale(0.6);} /* Hochformat */
}







/* ===========================================================================================
   ==============================    RESPONSIVE: MOBILE    ===================================
   =========================================================================================== */
@media (max-width:1000px){




/* ============================================================
   ZOOMGRÖSSEN – MOBILE
   ============================================================ */
  .produkt:hover .full-wrap      {transform:translate(-50%,-50%) scale(1.3);} /* Standard */
  .produkt.quer:hover .full-wrap {transform:translate(-50%,-50%) scale(1.6);} /* Querformat */
  .produkt.hoch:hover .full-wrap {transform:translate(-50%,-50%) scale(1.1);} /* Hochformat */



  /* Titel */
  .jahreszeit h2 {
    margin-bottom:2rem;
    font-size:3.5rem;  /* 👉 Schriftgöße (Achtung: Desktop separat einstellen oben) */
    line-height:0.8em; /* 👉 Zeilenhöhe */ 
    letter-spacing:1rem;
  }



  .produkt-grid {
    grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); /* 👉 größere Kacheln */
    gap:25px;
  }


.thumb {
  border-radius:16px;
}

  .name {
    margin-top:0;
    font-size:2.0rem; /* 👉 Schriftgöße (Achtung: Desktop separat einstellen oben) */
    letter-spacing:-1px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

}