/* ============================================================
   Moto Workshop – Public CSS  v5
   Hell auf normalen Seiten, dunkel innerhalb .mwh-courses/.mkp-main
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700&family=Barlow:wght@300;400;500&display=swap');

:root {
  --mwp-orange:   #ff6b00;
  --mwp-orange-d: #e05d00;
  --mwp-dark:     #1a1a2e;
  --mwp-border:   #e0e0e0;
  --mwp-radius:   8px;
  --mwp-shadow:   0 2px 16px rgba(0,0,0,.07);
  --mwp-shadow-h: 0 8px 32px rgba(0,0,0,.13);
  --mwp-green:    #27ae60;
  --mwp-yellow:   #f39c12;
  --mwp-red:      #e74c3c;
}

.mw-workshops-wrap { font-family: 'Barlow', sans-serif; }

/* ── Grid ────────────────────────────────────────────────────── */
.mw-workshops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin: 20px 0 30px;
}

/* ── Card ────────────────────────────────────────────────────── */
.mw-workshop-card {
  background: #fff;
  border-radius: var(--mwp-radius);
  box-shadow: var(--mwp-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mwp-border);
  border-top: 4px solid var(--mwp-orange);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mw-workshop-card:hover { transform: translateY(-4px); box-shadow: var(--mwp-shadow-h); }
.mw-workshop-card.mw-full { opacity: .85; }

.mw-type-basic        { border-top-color: #3a8ee6; }
.mw-type-advance      { border-top-color: #f39c12; }
.mw-type-pitbike      { border-top-color: #27ae60; }
.mw-type-individual   { border-top-color: #9b59b6; }
.mw-type-group_custom { border-top-color: #e67e22; }

.mw-card-header {
  background: #1a1a2e;
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mw-card-icon { font-size: 22px; }
.mw-card-type { font-family: 'Barlow Condensed',sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,.55); }
.mw-card-badge { margin-left: auto; padding: 3px 10px; border-radius: 20px; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.mw-badge-full { background: rgba(231,76,60,.25); color: #ff6b6b; }
.mw-badge-few  { background: rgba(243,156,18,.25); color: #f9ca24; }

.mw-card-body { padding: 20px; flex: 1; }
.mw-card-title { font-family: 'Barlow Condensed',sans-serif; font-size: 20px; font-weight: 700; color: #1a1a2e; margin: 0 0 4px; }
.mw-card-subtitle { font-size: 13px; color: #777; margin: 0 0 14px; }
.mw-card-meta { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.mw-meta-item { font-size: 13px; color: #666; display: flex; align-items: center; gap: 6px; }
.mw-card-description { font-size: 14px; color: #555; line-height: 1.6; border-top: 1px solid var(--mwp-border); padding-top: 14px; margin-top: 14px; }
.mw-card-description ul { margin: 8px 0; padding-left: 18px; }
.mw-card-description li { margin-bottom: 4px; }

.mw-card-footer { padding: 14px 20px; background: #f8f8f8; border-top: 1px solid var(--mwp-border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mw-card-price strong { font-size: 22px; font-weight: 700; color: var(--mwp-orange); }
.mw-card-price small  { display: block; font-size: 11px; color: #999; }

/* ── Buttons ─────────────────────────────────────────────────── */
.mw-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px;
  border-radius: 5px;
  font-family: 'Barlow Condensed',sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  border: 2px solid transparent; cursor: pointer;
  transition: all .2s; text-decoration: none; line-height: 1;
}
.mw-btn-primary  { background: var(--mwp-orange); color: #fff; border-color: var(--mwp-orange); }
.mw-btn-primary:hover { background: var(--mwp-orange-d); border-color: var(--mwp-orange-d); color: #fff; transform: translateY(-1px); }
.mw-btn-secondary { background: transparent; color: #333; border-color: var(--mwp-border); }
.mw-btn-secondary:hover { border-color: #999; color: #000; }
.mw-btn-large { padding: 13px 28px; font-size: 16px; }

/* ── Inline Form ─────────────────────────────────────────────── */
.mw-inline-form { border-top: 3px solid var(--mwp-orange); background: #fafafa; padding: 24px 20px; }
.mw-register-wrap { background: #fff; border-radius: var(--mwp-radius); box-shadow: var(--mwp-shadow); overflow: hidden; margin: 24px 0; }
.mw-workshop-summary { background: #1a1a2e; color: #fff; padding: 22px 28px; }
.mw-workshop-summary h3 { margin: 0 0 10px; color: #fff; font-size: 20px; font-family: 'Barlow Condensed',sans-serif; font-weight: 700; }
.mw-workshop-summary .mw-meta-item { color: rgba(255,255,255,.7); }
.mw-form.mw-register-form { padding: 28px; }

/* ── Fields ─────────────────────────────────────────────────── */
.mw-form-row   { margin-bottom: 16px; }
.mw-form-2col  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mw-form-3col  { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.mw-field { display: flex; flex-direction: column; gap: 5px; }
.mw-field label { font-size: 12px; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: .5px; font-family: 'Barlow Condensed',sans-serif; }
.mw-field input, .mw-field select, .mw-field textarea {
  padding: 10px 13px; border: 2px solid #d8d8d8; border-radius: 5px;
  font-size: 14px; font-family: 'Barlow',sans-serif; background: #fff; color: #333;
  width: 100%; box-sizing: border-box; transition: border-color .2s, box-shadow .2s;
}
.mw-field input:focus, .mw-field select:focus, .mw-field textarea:focus {
  outline: none; border-color: var(--mwp-orange); box-shadow: 0 0 0 3px rgba(255,107,0,.12);
}
.mw-field textarea { resize: vertical; min-height: 80px; }
.mw-checkbox-label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #555; cursor: pointer; line-height: 1.5; }
.mw-checkbox-label input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--mwp-orange); }
.mw-form-actions { margin-top: 20px; }

/* ── Notices ─────────────────────────────────────────────────── */
.mw-notice { padding: 12px 16px; border-radius: 5px; margin-bottom: 18px; font-size: 14px; line-height: 1.5; }
.mw-notice-warning { background: #fff8e1; border-left: 4px solid var(--mwp-yellow); color: #7a5c00; }
.mw-notice-success { background: #e8f5e9; border-left: 4px solid var(--mwp-green); color: #1b5e20; }
.mw-notice-error   { background: #fdecea; border-left: 4px solid var(--mwp-red); color: #7f1d1d; }

.mw-form-response { padding: 13px 17px; border-radius: 5px; font-size: 14px; font-weight: 600; margin-top: 14px; }
.mw-form-response.mw-success { background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; }
.mw-form-response.mw-error   { background: #fdecea; color: #7f1d1d; border: 1px solid #ffcdd2; }
.mw-loading { opacity: .7; pointer-events: none; }

.mw-info-box { background: #f0f4ff; border: 1px solid #d0d8f0; border-left: 4px solid #1a1a2e; border-radius: var(--mwp-radius); padding: 20px 24px; margin-top: 30px; font-size: 14px; line-height: 1.7; color: #444; }
.mw-info-box p { margin: 0 0 8px; }
.mw-info-box p:last-child { margin-bottom: 0; }
.mw-no-workshops { text-align: center; padding: 40px; background: #f8f8f8; border-radius: var(--mwp-radius); color: #666; border: 1px dashed #ddd; }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — greift auf Homepage (.mwh-courses) und Kurse-Template (.mkp-main)
   ═══════════════════════════════════════════════════════════════ */
.mwh-courses .mw-workshop-card,
.mkp-main .mw-workshop-card {
  background: #1a1a1a !important;
  border-color: rgba(255,255,255,.07) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.35) !important;
}
.mwh-courses .mw-workshop-card:hover,
.mkp-main .mw-workshop-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5) !important;
}
.mwh-courses .mw-card-header,
.mkp-main .mw-card-header { background: rgba(255,255,255,.04) !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; }
.mwh-courses .mw-card-title,
.mkp-main .mw-card-title  { color: #f5f0ea !important; }
.mwh-courses .mw-card-subtitle,
.mkp-main .mw-card-subtitle { color: #888 !important; }
.mwh-courses .mw-meta-item,
.mkp-main .mw-meta-item   { color: #c0b9b0 !important; }
.mwh-courses .mw-card-description,
.mkp-main .mw-card-description { color: #c0b9b0 !important; border-top-color: rgba(255,255,255,.07) !important; }
.mwh-courses .mw-card-footer,
.mkp-main .mw-card-footer { background: rgba(0,0,0,.2) !important; border-top-color: rgba(255,255,255,.07) !important; }
.mwh-courses .mw-inline-form,
.mkp-main .mw-inline-form { background: rgba(0,0,0,.3) !important; }
.mwh-courses .mw-info-box,
.mkp-main .mw-info-box { background: #1a1a1a !important; border-color: rgba(255,255,255,.07) !important; border-left-color: #ff6b00 !important; color: #c0b9b0 !important; }
.mwh-courses .mw-field label,
.mkp-main .mw-field label { color: #b0a9a0 !important; }
.mwh-courses .mw-field input,
.mwh-courses .mw-field select,
.mwh-courses .mw-field textarea,
.mkp-main .mw-field input,
.mkp-main .mw-field select,
.mkp-main .mw-field textarea {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.13) !important;
  color: #f5f0ea !important;
}
.mwh-courses .mw-field input::placeholder,
.mwh-courses .mw-field textarea::placeholder,
.mkp-main .mw-field input::placeholder,
.mkp-main .mw-field textarea::placeholder { color: rgba(255,255,255,.22) !important; }
.mwh-courses .mw-field select option,
.mkp-main .mw-field select option { background: #1a1a1a; color: #f5f0ea; }
.mwh-courses .mw-checkbox-label,
.mkp-main .mw-checkbox-label { color: #c0b9b0 !important; }
.mwh-courses .mw-btn-secondary,
.mkp-main .mw-btn-secondary { color: #f5f0ea !important; border-color: rgba(255,255,255,.2) !important; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .mw-workshops-grid { grid-template-columns: 1fr !important; }
  .mw-form-2col, .mw-form-3col { grid-template-columns: 1fr; }
  .mw-form.mw-register-form { padding: 18px; }
  .mw-card-footer { flex-direction: column; align-items: stretch; }
}