/* ══════════════════════════════════════════════════════════════
   Wildkräuter Hub – Frontend CSS v1.0.0
   ══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Lato:wght@400;700&display=swap');

/* ── HUB WRAP ────────────────────────────────────────────────── */
.wkh-hub,.wkh-saison-banner,.wkh-tipps {
  font-family: 'Lato','Segoe UI',sans-serif;
  color: #1a1a2e;
  line-height: 1.6;
  max-width: 1100px;
  margin: 0 auto;
}
.wkh-hub *,.wkh-saison-banner *,.wkh-tipps * { box-sizing: border-box; margin: 0; padding: 0; }

/* ── HUB HERO ────────────────────────────────────────────────── */
.wkh-hub-hero {
  position: relative;
  background: linear-gradient(135deg,#e8f5e9 0%,#fff9c4 40%,#f3e5f5 100%);
  border-radius: 18px;
  padding: 52px 36px 60px;
  text-align: center;
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: 0 6px 32px rgba(0,0,0,.08);
}
.wkh-hub-hero-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 80%,rgba(249,168,37,.12),transparent 55%),
              radial-gradient(circle at 80% 20%,rgba(76,175,80,.1),transparent 50%);
  pointer-events: none;
}
.wkh-hub-icons { font-size: 2.2rem; margin-bottom: 12px; letter-spacing: 8px; }
.wkh-hub-title {
  font-family: 'Playfair Display',Georgia,serif;
  font-size: clamp(1.8rem,4vw,3rem);
  font-weight: 900;
  color: #1a1a2e;
  margin-bottom: 10px;
}
.wkh-hub-subtitle {
  font-size: .98rem;
  color: #555;
  max-width: 580px;
  margin: 0 auto;
}

/* ── SEASON BANNER (on hub) ──────────────────────────────────── */
.wkh-hub-season-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg,#e8f5e9,#f1f8e9);
  border: 1.5px solid #a5d6a7;
  border-radius: 12px;
  padding: 14px 22px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.wkh-hub-season-icon { font-size: 1.8rem; flex-shrink: 0; }
.wkh-hub-season-banner strong { color: #2e7d32; }
.wkh-hub-season-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1.5px solid;
  border-radius: 50px;
  padding: 4px 14px;
  font-size: .85rem;
  font-weight: 700;
  margin: 3px 4px;
}
.wkh-hub-season-tag a { color: inherit; text-decoration: none; }
.wkh-hub-season-tag a:hover { text-decoration: underline; }

/* ── GUIDE GRID ──────────────────────────────────────────────── */
.wkh-hub-grid {
  display: grid;
  gap: 24px;
  margin-bottom: 40px;
}
.wkh-hub-cards  { grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); }
.wkh-hub-grid-s { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 16px; }
.wkh-hub-list   { grid-template-columns: 1fr; gap: 16px; }

/* ── GUIDE CARD ──────────────────────────────────────────────── */
.wkh-hub-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid #f0f0f0;
  box-shadow: 0 4px 18px rgba(0,0,0,.07);
  transition: transform .25s, box-shadow .25s;
  display: flex;
  flex-direction: column;
}
.wkh-hub-card:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(0,0,0,.13); }
.wkh-hub-card--inactive { opacity: .65; pointer-events: none; }

.wkh-hub-card-bar { height: 5px; background: var(--c,#4caf50); }
.wkh-hub-card-inner { padding: 24px 22px; display: flex; flex-direction: column; flex: 1; }

.wkh-hub-card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}
.wkh-hub-card-icon { font-size: 2.5rem; line-height: 1; flex-shrink: 0; }
.wkh-hub-card-title {
  font-family: 'Playfair Display',serif;
  font-size: 1.2rem;
  color: #1a1a2e;
  margin-bottom: 3px;
}
.wkh-hub-card-season { font-size: .78rem; color: #999; }

.wkh-hub-season-badge {
  margin-left: auto;
  background: #e8f5e9;
  color: #2e7d32;
  border: 1.5px solid #a5d6a7;
  border-radius: 50px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.wkh-hub-card-desc {
  font-size: .88rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 14px;
}

.wkh-hub-card-parts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.wkh-hub-part {
  background: var(--cl,#f1f8e9);
  border: 1px solid;
  border-color: color-mix(in srgb,var(--c,#4caf50) 30%,transparent);
  color: var(--c,#2e7d32);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 700;
}

.wkh-hub-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.wkh-hub-feature {
  font-size: .78rem;
  color: #777;
  background: #f8f8f8;
  border-radius: 50px;
  padding: 2px 10px;
}

.wkh-hub-card-foot { margin-top: auto; }

.wkh-hub-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 12px 20px;
  background: var(--c,#4caf50);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 10px;
  font-weight: 700;
  font-size: .9rem;
  transition: opacity .2s, transform .15s;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.wkh-hub-btn:hover { opacity: .88; transform: translateY(-1px); }
.wkh-hub-unavailable {
  display: block;
  text-align: center;
  color: #bbb;
  font-size: .85rem;
  padding: 10px;
  background: #f8f8f8;
  border-radius: 8px;
}

/* ── HUB LIST STYLE ──────────────────────────────────────────── */
.wkh-hub-list .wkh-hub-card { flex-direction: row; border-radius: 12px; }
.wkh-hub-list .wkh-hub-card-bar { width: 5px; height: auto; }
.wkh-hub-list .wkh-hub-card-inner { flex-direction: row; align-items: center; gap: 20px; flex-wrap: wrap; }
.wkh-hub-list .wkh-hub-card-head { margin-bottom: 0; min-width: 200px; }
.wkh-hub-list .wkh-hub-card-desc { margin: 0; flex: 1; min-width: 200px; }
.wkh-hub-list .wkh-hub-card-features,.wkh-hub-list .wkh-hub-card-parts { display: none; }
.wkh-hub-list .wkh-hub-card-foot { margin: 0; }
.wkh-hub-list .wkh-hub-btn { width: auto; white-space: nowrap; }

/* ── HUB TIPS ────────────────────────────────────────────────── */
.wkh-hub-tips {
  background: linear-gradient(135deg,#f8f9fa,#fff);
  border-radius: 16px;
  padding: 32px;
  border: 1.5px solid #e0e0e0;
}
.wkh-hub-tips-title {
  font-family: 'Playfair Display',serif;
  font-size: 1.4rem;
  color: #1a1a2e;
  margin-bottom: 22px;
  text-align: center;
}
.wkh-hub-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 18px;
}
.wkh-hub-tip-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1.5px solid #f0f0f0;
  transition: box-shadow .2s;
}
.wkh-hub-tip-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.wkh-hub-tip-icon { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.wkh-hub-tip-card h4 { font-size: .95rem; color: #1a1a2e; margin-bottom: 6px; }
.wkh-hub-tip-card p  { font-size: .83rem; color: #666; line-height: 1.55; }

/* ── SAISON BANNER (standalone) ──────────────────────────────── */
.wkh-saison-banner {
  background: linear-gradient(135deg,#e8f5e9,#f1f8e9);
  border: 2px solid #a5d6a7;
  border-radius: 14px;
  padding: 22px 26px;
  margin: 20px 0;
}
.wkh-saison-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.wkh-saison-cal { font-size: 1.8rem; flex-shrink: 0; }
.wkh-saison-header h3 { font-family:'Playfair Display',serif; font-size:1.1rem; color:#2e7d32; margin-bottom:3px; }
.wkh-saison-header p  { font-size:.85rem; color:#666; }
.wkh-saison-plants { display:flex; flex-wrap:wrap; gap:12px; }
.wkh-saison-plant {
  display: flex; align-items: center; gap: 10px;
  background: var(--cl,#f1f8e9);
  border: 1.5px solid var(--c,#4caf50);
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 200px;
}
.wkh-saison-icon { font-size: 1.5rem; }
.wkh-saison-plant strong { display:block; font-size:.9rem; color:#1a1a2e; }
.wkh-saison-plant small  { font-size:.76rem; color:#888; }
.wkh-saison-link {
  margin-left: auto;
  background: var(--c,#4caf50);
  color: #fff !important;
  text-decoration: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}
.wkh-saison-offseason {
  background: #fff;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: .88rem;
  color: #666;
  font-style: italic;
}

/* ── TIPPS (standalone) ──────────────────────────────────────── */
.wkh-tipps { margin: 20px 0; }
.wkh-tipps-header { text-align:center; margin-bottom:28px; }
.wkh-tipps-header h2 { font-family:'Playfair Display',serif; font-size:1.6rem; color:#1a1a2e; margin-bottom:8px; }
.wkh-tipps-header p  { color:#666; font-size:.93rem; }
.wkh-tipps-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.wkh-tipps-card {
  background: #fff;
  border-radius: 14px;
  padding: 22px;
  border: 2px solid #f0f0f0;
  box-shadow: 0 3px 14px rgba(0,0,0,.06);
}
.wkh-tipps-card.safe    { border-color: #a5d6a7; background: linear-gradient(145deg,#fff,#f1f8e9); }
.wkh-tipps-card.warning { border-color: #ffcc80; background: linear-gradient(145deg,#fff,#fff8e1); }
.wkh-tipps-card.season  { border-color: #ce93d8; background: linear-gradient(145deg,#fff,#f3e5f5); }
.wkh-tipps-card.tools   { border-color: #90caf9; background: linear-gradient(145deg,#fff,#e3f2fd); }
.wkh-tipps-card.storage { border-color: #ffe082; background: linear-gradient(145deg,#fff,#fffde7); }
.wkh-tipps-card.ecology { border-color: #80cbc4; background: linear-gradient(145deg,#fff,#e0f7fa); }
.wkh-tipps-card h3 { font-family:'Playfair Display',serif; font-size:1rem; color:#1a1a2e; margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid rgba(0,0,0,.08); }
.wkh-tipps-card ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; }
.wkh-tipps-card li { font-size:.86rem; color:#444; line-height:1.55; }
.wkh-plant-tag { border-radius:4px; padding:1px 7px; font-size:.76rem; font-weight:700; margin-right:4px; }
.wkh-tipps-table { width:100%; border-collapse:collapse; font-size:.83rem; }
.wkh-tipps-table th { background:rgba(0,0,0,.05); padding:5px 8px; text-align:left; font-size:.79rem; border-bottom:1px solid rgba(0,0,0,.1); }
.wkh-tipps-table td { padding:5px 8px; border-bottom:1px solid rgba(0,0,0,.06); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:680px){
  .wkh-hub-hero { padding:36px 18px 44px; }
  .wkh-hub-grid { grid-template-columns:1fr; }
  .wkh-hub-list .wkh-hub-card-inner { flex-direction:column; }
  .wkh-hub-tips { padding:22px 16px; }
  .wkh-tipps-grid { grid-template-columns:1fr; }
  .wkh-hub-tips-grid { grid-template-columns:1fr; }
  .wkh-saison-plants { flex-direction:column; }
}