/* ============================================================
   SAISONKALENDER – Design des Original-Kalenders übernommen
   Farben exakt wie im Bestand (style.css)
     Saison      = rgb(135, 179, 31)   (kräftiges Grün)
     Lagerware   = hsl(78, 70%, 61%)   (helles Grün)
     keine Saison= rgb(240, 217, 128)  (Gelb)
   ============================================================ */

/* ---------- Aktueller Monat: die Leiste oben (Signature) ---------- */
.jetzt{background:var(--wald); color:#fff; padding:30px 0;}
.jetzt__kopf{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:16px;}
.jetzt__kopf span{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; opacity:.8;}
.jetzt__kopf strong{font-family:head; font-size:26px; font-weight:normal; color:var(--korn);}
.jetzt__gruppe{display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; flex-wrap:wrap;}
.jetzt__gruppe h3{
  font-family:read; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--spross); flex:0 0 74px; margin:0; padding-top:6px;
}
.jetzt__liste{display:flex; gap:8px; flex-wrap:wrap; flex:1; margin:0; padding:0; list-style:none;}
.jetzt__liste li{
  font-size:14.5px; background:rgba(255,252,240,.14);
  border:1px solid rgba(255,252,240,.3); padding:4px 13px; border-radius:50px;
}
.jetzt__liste li.lager{background:transparent; border-style:dashed; opacity:.85;}
.jetzt__leer{opacity:.7; font-size:14.5px; font-style:italic;}

/* ---------- Filter + Legende (Original-Stil) ---------- */
.kal-steuer{display:flex; gap:22px; align-items:center; flex-wrap:wrap; margin-bottom:20px;}
.kal-filter{display:flex; gap:10px; flex-wrap:wrap;}
.kal-filter button{
  font-family:read; font-size:16px; color:darkolivegreen; cursor:pointer;
  padding:9px 20px; border:2px solid rgb(179, 211, 104); border-radius:8px;
  background-color:rgb(179, 211, 104); box-shadow:0 0 4px 0 hsla(0,0%,0%,.4);
  transition:ease .2s;
}
.kal-filter button:hover{box-shadow:0 0 0 0 hsla(0,0%,0%,.5);}
.kal-filter button[aria-pressed="true"]{
  background-color:var(--wald); border-color:var(--wald); color:#fff;
}
.kal-legende{display:flex; gap:20px; margin:0; padding:0; list-style:none; font-size:14px; color:darkolivegreen;}
.kal-legende li{display:flex; align-items:center; gap:8px;}
.kal-legende i{width:15px; height:15px; border-radius:4px; display:block;}
.i-saison{background-color:rgb(135, 179, 31);}
.i-lager{background-color:hsl(78, 70%, 61%);}
.i-keine{background-color:rgb(240, 217, 128);}

/* ---------- Der Kalender: Kachel-Look des Originals ---------- */
.kal{width:100%;}
.kal-kopf, .kal-zeile{display:flex; align-items:stretch;}
.kal-zeile{border-radius:5px; transition:ease .2s;}
.kal-zeile:hover{background-color:rgb(228, 200, 159);}

/* linke Spalte: Sortenname, rechtsbündig wie im Original */
.kal-name{
  flex:0 0 16%; max-width:16%; font-size:17px; color:darkolivegreen;
  text-align:right; padding:0 10px 0 0; display:flex; align-items:center; justify-content:flex-end;
  -webkit-hyphens:auto; hyphens:auto; overflow-wrap:anywhere; word-break:break-word; line-height:1.15;
}

/* Monatszellen: jede ein eigenes gerundetes Feld mit Abstand */
.kal-zelle{
  flex:1 1 0; margin:2px; padding:11px 0; border-radius:5px;
  font-size:16px; text-align:center; color:darkolivegreen;
}
.z1{background-color:rgb(135, 179, 31);}   /* Saison   */
.z2{background-color:hsl(78, 70%, 61%);}   /* Lager    */
.z0{background-color:rgb(240, 217, 128);}  /* keine    */

/* Kopfzeile mit Monatskürzeln – deutlich abgesetzt */
.kal-kopf{background:var(--wald); padding:4px 4px; margin-bottom:6px; border-radius:8px;}
.kal-kopf .ecke{flex:0 0 16%; max-width:16%;}
.kal-kopf button{
  flex:1 1 0; margin:2px; padding:10px 0; border:none; cursor:pointer;
  font-family:head; font-size:17px; color:#fff; background:transparent;
  border-radius:5px; transition:ease .15s;
}
.kal-kopf button:hover{background-color:rgba(255,252,240,.2);}
.kal-kopf button[aria-current="true"]{background-color:var(--korn); color:darkolivegreen;}

/* Gruppentrenner */
.kal-gruppe{
  font-family:head; font-size:20px; color:var(--wald);
  margin:22px 0 8px; padding-left:2px;
}
.kal-fuss{margin-top:16px; font-size:13px; color:var(--tinte-hell);}

/* ---------- Erklärkarten (Saison / Lager / keine) ---------- */
.erklaer{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px;}
.erklaer__karte{
  background:var(--papier); border:1px solid var(--sand); border-radius:var(--rund);
  padding:20px 22px; border-top:5px solid var(--sand);
}
.erklaer__karte.saison{border-top-color:rgb(135, 179, 31);}
.erklaer__karte.lager{border-top-color:hsl(78, 70%, 61%);}
.erklaer__karte.import{border-top-color:rgb(240, 217, 128);}
.erklaer__karte h3{font-size:19px; margin-bottom:8px;}
.erklaer__karte p{font-size:14.5px; color:var(--tinte-hell); margin:0; line-height:1.6;}

/* ---------- Gründe ---------- */
.gruende{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px;}
.grund{
  background:var(--papier); border:1px solid var(--sand); border-radius:var(--rund);
  padding:20px 22px;
}
.grund h3{font-family:read; font-size:16px; font-weight:700; margin-bottom:5px;}
.grund h3 b{
  display:inline-block; font-family:head; font-weight:normal; color:var(--wiese);
  font-size:22px; margin-right:8px;
}
.grund p{font-size:14.5px; color:var(--tinte-hell); margin:0; line-height:1.6;}

@media (max-width:760px){
  .kal-name{font-size:12px; flex-basis:15%; max-width:15%;}
  .kal-zelle{font-size:0; padding:9px 0; margin:1.5px;}
  .kal-kopf button{font-size:13px; margin:1.5px;}
  .kal-kopf .ecke, .kal-name{flex-basis:15%; max-width:15%;}
  .jetzt__gruppe h3{flex:0 0 100%; padding-top:0;}
}