/* MH CI — Marktplatz Helden Corporate Identity
   Wird nach dem page-eigenen <style>-Block geladen und überschreibt
   alle CI-relevanten Farb- und Formvariablen. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Varela+Round&display=swap');

:root {
  --dark:   #202228;
  --accent: #FA8700;
  --bg:     #F7F6F3;
  --border: #E5E7EB;
  --green:  #059669;
  --red:    #DC2626;
  --mh-orange-glow: rgba(250,135,0,0.28);
}

body {
  font-family: 'Manrope', Arial, sans-serif;
  background: var(--bg);
}

/* ── Header ─────────────────────────────────── */
header {
  background: var(--dark) !important;
  color: rgba(255,255,255,0.9) !important;
  padding: 2rem 1.5rem !important;
  border-radius: 14px !important;
}
header h1,
header h2,
header h3 {
  color: #fff !important;
}
header p,
header .sub {
  color: rgba(255,255,255,0.6) !important;
}
header .eyebrow {
  color: var(--accent) !important;
}

/* ── Cards ──────────────────────────────────── */
.card {
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 4px rgba(25,25,25,0.06), 0 4px 16px rgba(25,25,25,0.04) !important;
}
.card h2 {
  border-bottom: 2px solid var(--accent) !important;
}

/* ── Buttons ─────────────────────────────────── */
button.primary {
  background: var(--accent) !important;
  border-radius: 40px !important;
  box-shadow: 0 8px 22px var(--mh-orange-glow) !important;
  font-family: 'Manrope', Arial, sans-serif !important;
  border: none !important;
}
button.primary:hover:not(:disabled) {
  box-shadow: 0 12px 28px var(--mh-orange-glow) !important;
}
button.primary:disabled {
  background: rgba(250,135,0,0.35) !important;
  box-shadow: none !important;
}
button.secondary {
  border-radius: 40px !important;
  border: 1.5px solid var(--border) !important;
  font-family: 'Manrope', Arial, sans-serif !important;
}
button.secondary:hover {
  border-color: var(--dark) !important;
  background: rgba(25,25,25,0.04) !important;
}

/* ── Toggle-Bar ──────────────────────────────── */
.toggle-bar {
  border-color: var(--dark) !important;
  border-radius: 40px !important;
}
.toggle-bar button.active {
  background: var(--dark) !important;
  color: #fff !important;
}

/* ── Badge ───────────────────────────────────── */
.badge {
  background: rgba(250,135,0,0.12) !important;
  color: var(--accent) !important;
}

/* ── Inputs ──────────────────────────────────── */
input[type=text]:focus,
input[type=url]:focus,
input[type=email]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(250,135,0,0.18) !important;
  outline: none !important;
}

/* ── Submit-Bar ──────────────────────────────── */
.submit-bar {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* ── Modal OK-Button ─────────────────────────── */
.kios-modal-actions .ok {
  background: var(--accent) !important;
}
.kios-modal-actions .ok:disabled {
  background: rgba(250,135,0,0.4) !important;
}