/* ============================================================
   CannaMesse.de — Design System v1
   Globale Utility-Klassen für konsistentes UI
   ============================================================ */

:root {
  --cm-green:       #10c956;
  --cm-green-light: #e8f5e9;
  --cm-green-dark:  #0da048;
  --cm-text:        #111;
  --cm-text-sub:    #555;
  --cm-text-dim:    #9ca3af;
  --cm-border:      #e5e7eb;
  --cm-bg:          #fff;
  --cm-bg-soft:     #f9fafb;
  --cm-radius:      10px;
  --cm-radius-sm:   6px;
  --cm-radius-pill: 20px;
  --cm-shadow:      0 2px 8px rgba(0,0,0,.07);
  --cm-shadow-md:   0 4px 16px rgba(0,0,0,.1);
}

/* ── Section Headers ── */
.cm-section-h {
  font-size: 1.05em;
  font-weight: 700;
  margin: 0 0 .8em;
  padding-bottom: .4em;
  border-bottom: 2px solid var(--cm-green-light);
  color: var(--cm-text);
}

/* ── Cards ── */
.cm-card {
  background: var(--cm-bg);
  border: 1px solid var(--cm-border);
  border-radius: var(--cm-radius);
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
.cm-card:hover {
  box-shadow: var(--cm-shadow-md);
  border-color: #c8e6c9;
}
.cm-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  padding: 14px;
}
.cm-card-link:hover { text-decoration: none; }

/* ── Typ-Icon Box ── */
.cm-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--cm-radius);
  margin-bottom: 10px;
  flex-shrink: 0;
}
/* Grüne Variante (default - für alle Typen einheitlich) */
.cm-type-icon.green { background: var(--cm-green-light); color: var(--cm-green); }
/* Per-Typ Farben (optional, wenn Farbkodierung gewünscht) */
.cm-type-icon.messe    { background: #e8f5e9; color: #10c956; }
.cm-type-icon.festival { background: #fef3c7; color: #d97706; }
.cm-type-icon.cup      { background: #ede9fe; color: #7c3aed; }
.cm-type-icon.demo     { background: #fee2e2; color: #dc2626; }
.cm-type-icon.csc      { background: #ccfbf1; color: #0d9488; }
.cm-type-icon.workshop { background: #ffedd5; color: #ea580c; }
.cm-type-icon.online   { background: #f3f4f6; color: #6b7280; }

/* ── Pill / Tag ── */
.cm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: var(--cm-radius-pill);
  border: 1.5px solid var(--cm-border);
  font-size: .82em;
  font-weight: 600;
  color: var(--cm-text-sub);
  background: var(--cm-bg);
  text-decoration: none;
  transition: border-color .12s, color .12s, background .12s;
  cursor: pointer;
}
.cm-pill:hover {
  border-color: var(--cm-green);
  color: var(--cm-green);
  text-decoration: none;
}
.cm-pill.active {
  background: var(--cm-green);
  border-color: var(--cm-green);
  color: #fff;
}
/* Typ-farbige Pills */
.cm-pill-typed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--cm-radius-pill);
  font-size: .83em;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .12s;
}
.cm-pill-typed:hover { opacity: .85; text-decoration: none; }

/* ── Badge ── */
.cm-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--cm-radius-pill);
  font-size: .72em;
  font-weight: 700;
  color: #fff;
}
.cm-badge.messe    { background: #10c956; }
.cm-badge.festival { background: #d97706; }
.cm-badge.cup      { background: #7c3aed; }
.cm-badge.demo     { background: #dc2626; }
.cm-badge.csc      { background: #0d9488; }
.cm-badge.workshop { background: #ea580c; }
.cm-badge.online   { background: #6b7280; }
.cm-badge.event    { background: #10c956; }

/* ── Grid Layouts ── */
.cm-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.cm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cm-grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 10px; }
.cm-grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.2em; }

/* ── Flex wraps ── */
.cm-pills-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Country/City tiles ── */
.cm-geo-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--cm-radius);
  border: 1px solid var(--cm-border);
  background: var(--cm-bg);
  text-decoration: none;
  color: var(--cm-text);
  transition: border-color .12s, box-shadow .12s;
  font-size: .88em;
}
.cm-geo-tile:hover { border-color: var(--cm-green); box-shadow: var(--cm-shadow); text-decoration: none; }
.cm-geo-code {
  font-size: .72em;
  font-weight: 800;
  color: var(--cm-text-sub);
  background: var(--cm-bg-soft);
  border: 1px solid var(--cm-border);
  border-radius: 4px;
  padding: 2px 5px;
  flex-shrink: 0;
  letter-spacing: .03em;
}

/* ── Event Count badge (in geo tile) ── */
.cm-count { font-size: .78em; color: var(--cm-text-dim); margin-top: 1px; }
.cm-count-green { font-size: .78em; font-weight: 700; color: var(--cm-green); margin-top: 2px; }

/* ── Buttons ── */
.cm-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--cm-radius-sm);
  font-size: .88em;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: opacity .12s;
  text-decoration: none;
}
.cm-btn:hover { opacity: .88; text-decoration: none; }
.cm-btn-primary { background: var(--cm-green); color: #fff; }
.cm-btn-outline { background: none; color: var(--cm-green); border: 2px solid var(--cm-green); }
.cm-btn-ghost { background: none; color: var(--cm-text-sub); border: 1.5px solid var(--cm-border); }

/* ── Scrolling filters (mobile) ── */
@media (max-width: 640px) {
  .cm-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cm-scroll-x::-webkit-scrollbar { display: none; }
}