/*!
 * Mondkalender für Gärtner – Stylesheet
 * @author  Giovanni Aureel
 * @version 1.3.0
 * @license GPL-2.0+
 */
/* ============================================================
   Mondkalender – Hobbygärtner Edition
   Warmes, einladendes Design mit erdigen Farben
   ============================================================ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  --mkl-font: Georgia, 'Times New Roman', serif;
  --mkl-font-ui: 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Warme Oberflächen */
  --mkl-bg:        #FEFAF4;
  --mkl-surface:   #FFFDF8;
  --mkl-surface-2: #F5EFE0;
  --mkl-outline:   #D6C9A8;

  /* Primär: sattes Gartengrün */
  --mkl-primary:       #3B6B35;
  --mkl-primary-light: #E6F0E4;
  --mkl-on-primary:    #FFFFFF;

  /* Tagestyp-Farben – warm & satt */
  --mkl-frucht:        #C0392B;
  --mkl-frucht-light:  #FDF1EF;
  --mkl-frucht-border: #E8A89E;

  --mkl-wurzel:        #8B5E3C;
  --mkl-wurzel-light:  #F8F0E8;
  --mkl-wurzel-border: #D4AA80;

  --mkl-bluete:        #9B3DAA;
  --mkl-bluete-light:  #F7EEF9;
  --mkl-bluete-border: #D4A0DC;

  --mkl-blatt:         #1A7A6E;
  --mkl-blatt-light:   #EAF6F4;
  --mkl-blatt-border:  #7ECFC4;

  --mkl-ruhe:          #7A7060;
  --mkl-ruhe-light:    #F2EFE8;
  --mkl-ruhe-border:   #C4BAA4;

  --mkl-heute-ring:    #D4770A;

  /* Schatten */
  --mkl-shadow-1: 0 2px 6px rgba(80,60,20,.10);
  --mkl-shadow-2: 0 4px 14px rgba(80,60,20,.13);
  --mkl-shadow-3: 0 8px 28px rgba(80,60,20,.16);

  /* Radien */
  --mkl-r-sm:  10px;
  --mkl-r-md:  14px;
  --mkl-r-lg:  18px;
  --mkl-r-xl:  26px;

  --mkl-ease: cubic-bezier(.2, 0, 0, 1);
  --mkl-dur:  200ms;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --mkl-bg:        #1E1C17;
    --mkl-surface:   #272520;
    --mkl-surface-2: #312F28;
    --mkl-outline:   #4A4535;

    --mkl-primary:       #7DBF6E;
    --mkl-primary-light: #1A2E17;
    --mkl-on-primary:    #0D2B09;

    --mkl-frucht:        #E8856A;
    --mkl-frucht-light:  #2E1410;
    --mkl-frucht-border: #7A3020;

    --mkl-wurzel:        #C49A6C;
    --mkl-wurzel-light:  #2A1E10;
    --mkl-wurzel-border: #6B4020;

    --mkl-bluete:        #CC88DD;
    --mkl-bluete-light:  #281030;
    --mkl-bluete-border: #6B2E80;

    --mkl-blatt:         #5CC4B8;
    --mkl-blatt-light:   #0A2422;
    --mkl-blatt-border:  #1A6860;

    --mkl-ruhe:          #9A9080;
    --mkl-ruhe-light:    #222018;
    --mkl-ruhe-border:   #4A4535;
  }
}

/* ── Wrapper ─────────────────────────────────────────────────── */
.mkl-wrap {
  font-family:   var(--mkl-font-ui);
  background:    var(--mkl-bg);
  border-radius: var(--mkl-r-xl);
  padding:       28px 24px 24px;
  max-width:     720px;
  margin:        0 auto;
  box-shadow:    var(--mkl-shadow-2);
  position:      relative;
  overflow:      hidden;
  /* Dezente Textur */
  background-image: radial-gradient(circle at 90% 10%, rgba(120,180,80,.05) 0%, transparent 60%);
}

/* ── Header ──────────────────────────────────────────────────── */
.mkl-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   18px;
  gap:             8px;
}

.mkl-title-block {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex:        1;
  justify-content: center;
}

.mkl-moon-icon { font-size: 30px; line-height: 1; }

.mkl-title {
  margin:         0;
  font-family:    var(--mkl-font);
  font-size:      24px;
  font-weight:    700;
  color:          var(--mkl-primary);
  letter-spacing: -.01em;
}

/* Nav-Buttons: warm & klar */
.mkl-nav-btn {
  display:      flex;
  align-items:  center;
  gap:          5px;
  height:       38px;
  padding:      0 14px 0 10px;
  border:       1.5px solid var(--mkl-outline);
  background:   var(--mkl-surface);
  border-radius: 50px;
  cursor:       pointer;
  color:        var(--mkl-primary);
  font-family:  var(--mkl-font-ui);
  font-size:    13px;
  font-weight:  600;
  white-space:  nowrap;
  transition:   background var(--mkl-dur) var(--mkl-ease),
                border-color var(--mkl-dur) var(--mkl-ease),
                box-shadow var(--mkl-dur) var(--mkl-ease);
}
.mkl-nav-btn.mkl-next { padding: 0 10px 0 14px; }
.mkl-nav-btn:hover {
  background:   var(--mkl-primary-light);
  border-color: var(--mkl-primary);
  box-shadow:   var(--mkl-shadow-1);
}
.mkl-nav-btn:active { transform: scale(.97); }
.mkl-nav-btn:focus-visible {
  outline:        3px solid var(--mkl-primary);
  outline-offset: 2px;
}
@media (max-width: 380px) {
  .mkl-nav-btn__label { display: none; }
  .mkl-nav-btn        { padding: 0 11px; }
}

/* ── Legende ─────────────────────────────────────────────────── */
.mkl-legend {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px 14px;
  margin-bottom: 16px;
  font-family:   var(--mkl-font-ui);
  font-size:     12px;
  font-weight:   500;
  color:         var(--mkl-ruhe);
}
.mkl-legend-item {
  display:     flex;
  align-items: center;
  gap:         5px;
}
.mkl-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  flex-shrink:   0;
}
.mkl-dot--frucht { background: var(--mkl-frucht); }
.mkl-dot--wurzel { background: var(--mkl-wurzel); }
.mkl-dot--bluete { background: var(--mkl-bluete); }
.mkl-dot--blatt  { background: var(--mkl-blatt); }
.mkl-dot--ruhe   { background: var(--mkl-ruhe); }

/* ── Grid ────────────────────────────────────────────────────── */
.mkl-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   5px;
}
.mkl-grid--header { margin-bottom: 4px; }

.mkl-weekday {
  text-align:     center;
  font-family:    var(--mkl-font-ui);
  font-size:      11px;
  font-weight:    700;
  color:          var(--mkl-ruhe);
  padding:        5px 0;
  text-transform: uppercase;
  letter-spacing: .07em;
}

/* ── Tages-Zellen ─────────────────────────────────────────────── */
.mkl-day {
  background:    var(--mkl-surface);
  border-radius: var(--mkl-r-sm);
  border:        1.5px solid var(--mkl-outline);
  cursor:        pointer;
  transition:    transform var(--mkl-dur) var(--mkl-ease),
                 box-shadow var(--mkl-dur) var(--mkl-ease);
  position:      relative;
  aspect-ratio:  1 / 1.15;
  min-height:    64px;
}
.mkl-day--empty { background: transparent; border: none; cursor: default; }

/* Tagestyp-Farben */
.mkl-day--frucht { background: var(--mkl-frucht-light); border-color: var(--mkl-frucht-border); }
.mkl-day--wurzel { background: var(--mkl-wurzel-light); border-color: var(--mkl-wurzel-border); }
.mkl-day--bluete { background: var(--mkl-bluete-light); border-color: var(--mkl-bluete-border); }
.mkl-day--blatt  { background: var(--mkl-blatt-light);  border-color: var(--mkl-blatt-border); }
.mkl-day--ruhe   { background: var(--mkl-ruhe-light);   border-color: var(--mkl-ruhe-border);
                   opacity: .65; }

/* Heute */
.mkl-day--heute {
  outline:        3px solid var(--mkl-heute-ring);
  outline-offset: -2px;
  z-index:        1;
}
.mkl-day--heute::after {
  content:       '';
  position:      absolute;
  bottom:        4px;
  left:          50%;
  transform:     translateX(-50%);
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--mkl-heute-ring);
}

/* Aktiver Tag (ausgewählt) */
.mkl-day--active {
  box-shadow: 0 0 0 3px var(--mkl-primary);
  z-index: 2;
}

.mkl-day:not(.mkl-day--empty):hover {
  transform:  translateY(-3px) scale(1.03);
  box-shadow: var(--mkl-shadow-2);
  z-index:    2;
}
.mkl-day:not(.mkl-day--empty):focus-visible {
  outline:        3px solid var(--mkl-primary);
  outline-offset: 2px;
}

/* Zelleninhalt */
.mkl-day__inner {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
  padding:         7px 4px 5px;
  gap:             1px;
}

.mkl-day__number {
  font-family: var(--mkl-font-ui);
  font-size:   13px;
  font-weight: 700;
  line-height: 1;
}
.mkl-day--ruhe .mkl-day__number { opacity: .45; }

/* Größere, prominentere Icons */
.mkl-day__moon     { font-size: 11px; line-height: 1; opacity: .7; }
.mkl-day__typ-icon { font-size: 16px; line-height: 1; }
.mkl-day__sign     { font-size: 10px; line-height: 1; opacity: .6; }

/* ── Detail-Panel ─────────────────────────────────────────────── */
.mkl-detail {
  margin-top:    18px;
  background:    var(--mkl-surface);
  border-radius: var(--mkl-r-lg);
  border:        1.5px solid var(--mkl-outline);
  box-shadow:    var(--mkl-shadow-3);
  overflow:      hidden;
  animation:     mkl-slide-in 240ms var(--mkl-ease) both;
}
.mkl-detail[hidden] { display: none; }

@keyframes mkl-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Farbiger Streifen oben je nach Typ */
.mkl-detail[data-typ="frucht"] { border-top: 4px solid var(--mkl-frucht); }
.mkl-detail[data-typ="wurzel"] { border-top: 4px solid var(--mkl-wurzel); }
.mkl-detail[data-typ="bluete"] { border-top: 4px solid var(--mkl-bluete); }
.mkl-detail[data-typ="blatt"]  { border-top: 4px solid var(--mkl-blatt); }
.mkl-detail[data-typ="ruhe"]   { border-top: 4px solid var(--mkl-ruhe); }

/* Inhaltsbereich */
.mkl-detail__content { padding: 20px 22px 16px; }

/* Datum + Icon Zeile */
.mkl-detail__date-row {
  display:       flex;
  align-items:   center;
  gap:           14px;
  margin-bottom: 12px;
}
.mkl-detail__typ-icon {
  font-size:   42px;
  line-height: 1;
  flex-shrink: 0;
}
.mkl-detail__date {
  font-family:    var(--mkl-font-ui);
  font-size:      11px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--mkl-ruhe);
  margin-bottom:  3px;
}
.mkl-detail__typ-label {
  margin:      0;
  font-family: var(--mkl-font);
  font-size:   20px;
  font-weight: 700;
  color:       var(--mkl-primary);
  line-height: 1.2;
}

.mkl-detail__beschreibung {
  margin:      0 0 16px;
  font-family: var(--mkl-font-ui);
  font-size:   14px;
  line-height: 1.7;
  color:       var(--mkl-ruhe);
}

/* Chips */
.mkl-detail__chips {
  display:       flex;
  flex-wrap:     wrap;
  gap:           6px;
  margin-bottom: 14px;
}
.mkl-chip {
  display:       flex;
  align-items:   center;
  gap:           5px;
  background:    var(--mkl-surface-2);
  border:        1.5px solid var(--mkl-outline);
  border-radius: 50px;
  padding:       5px 13px 5px 9px;
  font-family:   var(--mkl-font-ui);
  font-size:     12px;
  font-weight:   600;
  color:         var(--mkl-primary);
}
.mkl-chip__icon { font-size: 14px; line-height: 1; }

/* Gießhinweis */
.mkl-detail__giessen {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  background:    var(--mkl-blatt-light);
  border-radius: var(--mkl-r-sm);
  border:        1.5px solid var(--mkl-blatt-border);
  padding:       11px 16px;
  font-family:   var(--mkl-font-ui);
  font-size:     13px;
  color:         var(--mkl-blatt);
  line-height:   1.55;
}
.mkl-giess-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }

/* ── Fußzeile mit Schließen-Button ── */
.mkl-detail__footer {
  display:         flex;
  justify-content: flex-end;
  align-items:     center;
  padding:         10px 16px 12px;
  border-top:      1px solid var(--mkl-outline);
  background:      var(--mkl-surface-2);
}

.mkl-detail__close {
  display:       flex;
  align-items:   center;
  gap:           6px;
  height:        36px;
  padding:       0 16px 0 12px;
  border:        1.5px solid var(--mkl-outline);
  background:    var(--mkl-surface);
  border-radius: 50px;
  cursor:        pointer;
  color:         var(--mkl-ruhe);
  font-family:   var(--mkl-font-ui);
  font-size:     13px;
  font-weight:   600;
  transition:    background var(--mkl-dur) var(--mkl-ease),
                 border-color var(--mkl-dur) var(--mkl-ease),
                 color var(--mkl-dur) var(--mkl-ease);
}
.mkl-detail__close:hover {
  background:    var(--mkl-ruhe-light);
  border-color:  var(--mkl-ruhe);
}
.mkl-detail__close:focus-visible {
  outline:        3px solid var(--mkl-primary);
  outline-offset: 2px;
}

/* ── Ladeanzeige ─────────────────────────────────────────────── */
.mkl-loading {
  position:    absolute;
  inset:       0;
  display:     flex;
  align-items: center;
  justify-content: center;
  background:  rgba(254,250,244,.75);
  border-radius: var(--mkl-r-xl);
  z-index:     10;
}
.mkl-loading[hidden] { display: none; }

.mkl-spinner {
  width:  38px;
  height: 38px;
  border: 3px solid var(--mkl-primary-light);
  border-top-color: var(--mkl-primary);
  border-radius: 50%;
  animation: mkl-spin .9s linear infinite;
}
@keyframes mkl-spin { to { transform: rotate(360deg); } }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .mkl-wrap           { padding: 16px 12px; border-radius: var(--mkl-r-lg); }
  .mkl-title          { font-size: 20px; }
  .mkl-day            { min-height: 52px; }
  .mkl-day__number    { font-size: 11px; }
  .mkl-day__typ-icon  { font-size: 14px; }
  .mkl-day__moon,
  .mkl-day__sign      { font-size: 9px; }
  .mkl-legend         { font-size: 11px; }
}


/* ── FAQ-Bereich ─────────────────────────────────────────────── */
.mkl-faq {
  max-width:   720px;
  margin:      32px auto 0;
  font-family: var(--mkl-font-ui);
}

.mkl-faq__title {
  font-family:  var(--mkl-font);
  font-size:    20px;
  font-weight:  700;
  color:        var(--mkl-primary);
  margin:       0 0 16px;
  padding-bottom: 10px;
  border-bottom:  2px solid var(--mkl-primary-light);
}

.mkl-faq__item {
  background:    var(--mkl-surface);
  border:        1.5px solid var(--mkl-outline);
  border-radius: var(--mkl-r-md);
  margin-bottom: 8px;
  overflow:      hidden;
  transition:    box-shadow var(--mkl-dur) var(--mkl-ease);
}
.mkl-faq__item[open] {
  box-shadow: var(--mkl-shadow-1);
  border-color: var(--mkl-primary);
}

.mkl-faq__frage {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     14px 18px;
  font-size:   14px;
  font-weight: 600;
  color:       var(--mkl-primary);
  cursor:      pointer;
  list-style:  none;
  user-select: none;
  gap:         12px;
}
.mkl-faq__frage::-webkit-details-marker { display: none; }
.mkl-faq__frage::after {
  content:     '+';
  font-size:   20px;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  color:       var(--mkl-primary);
  transition:  transform var(--mkl-dur) var(--mkl-ease);
}
.mkl-faq__item[open] .mkl-faq__frage::after {
  transform: rotate(45deg);
}
.mkl-faq__frage:hover { background: var(--mkl-primary-light); }

.mkl-faq__antwort {
  padding:     0 18px 16px;
  border-top:  1px solid var(--mkl-outline);
}
.mkl-faq__antwort p {
  margin:      12px 0 0;
  font-size:   14px;
  line-height: 1.7;
  color:       var(--mkl-ruhe);
}
.mkl-faq__antwort strong { color: var(--mkl-primary); font-weight: 600; }

@media (max-width: 480px) {
  .mkl-faq__frage  { padding: 12px 14px; font-size: 13px; }
  .mkl-faq__antwort { padding: 0 14px 12px; }
}