/* HoiCiao.com – zentrale Design-Tokens */
:root {
  --hc-green: #5B922B;
  --hc-green-dark: #347210;
  --hc-green-deep: #1E5C20;
  --hc-orange: #F66D0A;
  --hc-orange-dark: #D94F00;
  --hc-charcoal: #3D464A;
  --hc-charcoal-deep: #20282B;
  --hc-gray: #6F7A7E;
  --hc-bg: #F4F6F2;
  --hc-bg-warm: #FAF8F3;
  --hc-white: #FFFFFF;

  --hc-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hc-radius-sm: 10px;
  --hc-radius-md: 18px;
  --hc-radius-lg: 28px;
  --hc-shadow: 0 18px 50px rgb(32 40 43 / 12%);
}

body {
  color: var(--hc-charcoal-deep);
  background: var(--hc-bg);
  font-family: var(--hc-font);
}

.hc-logo { display: block; width: min(100%, 360px); height: auto; }
.hc-logo--header { width: clamp(180px, 22vw, 310px); }
.hc-logo--footer { width: clamp(190px, 28vw, 340px); }

.hc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; padding: .75rem 1.15rem; border-radius: 999px;
  font-weight: 750; text-decoration: none; border: 2px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.hc-btn:hover { transform: translateY(-2px); }
.hc-btn--primary { background: var(--hc-green-dark); color: var(--hc-white); box-shadow: 0 10px 24px rgb(52 114 16 / 24%); }
.hc-btn--primary:hover { background: var(--hc-green-deep); }
.hc-btn--accent { background: var(--hc-orange); color: var(--hc-charcoal-deep); }
.hc-btn--outline { border-color: var(--hc-green-dark); color: var(--hc-green-dark); background: transparent; }

.hc-card { background: var(--hc-white); border: 1px solid rgb(61 70 74 / 10%); border-radius: var(--hc-radius-md); box-shadow: var(--hc-shadow); }
.hc-category-icon { width: 42px; height: 42px; color: var(--hc-green-dark); }
.hc-accent { color: var(--hc-orange-dark); }
.hc-muted { color: var(--hc-gray); }

/* Orange nicht für längere Texte auf Weiß verwenden; dafür ist der Kontrast zu gering. */