/* ============================================================
 *  monstipart – Marken-Stylesheet (auf Bootstrap 5.3 aufsetzend)
 *  Palette: Petrol/Teal + Terrakotta, Warmweiß / Dark-Petrol.
 * ============================================================ */

:root {
  --mp-primary:   #2B7A78;
  --mp-primary-700:#1F5E5C;
  --mp-primary-050:#E7F1F0;
  --mp-part:      #C85C33;
  --mp-part-700:  #A8481F;
  --mp-coral:     #F4A26B;
  --mp-amber:     #F2C14E;
  --mp-eye:       #23413F;
  --mp-paper:     #F7F4EF;
  --mp-surface:   #FFFFFF;
  --mp-ink:       #2D3A3A;
  --mp-muted:     #5B6B6B;
  --mp-line:      #E4DDD2;
  --mp-shadow:    0 8px 30px rgba(31,94,92,.10);

  /* Bootstrap-Variablen überschreiben */
  --bs-primary:   #2B7A78;
  --bs-primary-rgb: 43,122,120;
  --bs-body-bg:   var(--mp-paper);
  --bs-body-color:var(--mp-ink);
  --bs-body-font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-border-color: var(--mp-line);
  --bs-link-color: #226260;
  --bs-link-hover-color: #164544;
}

:root[data-theme="dark"] {
  --mp-primary:   #3FB5AE;
  --mp-primary-700:#7FD8D2;
  --mp-primary-050:#17302E;
  --mp-part:      #F4A26B;
  --mp-part-700:  #F6B487;
  --mp-eye:       #0d1716;
  --mp-paper:     #101A19;
  --mp-surface:   #182726;
  --mp-ink:       #F2EFE9;
  --mp-muted:     #A9B8B6;
  --mp-line:      #26403E;
  --mp-shadow:    0 8px 30px rgba(0,0,0,.40);

  --bs-primary:   #3FB5AE;
  --bs-primary-rgb: 63,181,174;
  --bs-body-bg:   var(--mp-paper);
  --bs-body-color:var(--mp-ink);
  --bs-border-color: var(--mp-line);
  --bs-link-color: #7FD8D2;
  --bs-link-hover-color: #A6E6E1;
  --bs-emphasis-color: #F2EFE9;
}

/* ---------- Basis ---------- */
body {
  background: var(--mp-paper);
  color: var(--mp-ink);
  font-family: var(--bs-body-font-family);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,.h1,.h2,.h3 { font-weight: 800; letter-spacing:-.01em; text-wrap: balance; }
.lead { color: var(--mp-muted); }
a { text-decoration-thickness: .08em; text-underline-offset: .15em; }

.text-primary { color: var(--mp-primary) !important; }
.text-part { color: var(--mp-part); }
.text-muted2 { color: var(--mp-muted) !important; }
.bg-paper { background: var(--mp-paper); }
.bg-surface { background: var(--mp-surface); }

/* ---------- Wortmarke ---------- */
.mp-word { font-family:'Nunito',system-ui,sans-serif; font-weight:800; letter-spacing:-.02em; line-height:1; }
.mp-word .w { color: var(--mp-primary); }
.mp-word .p { color: var(--mp-part); }
.mp-brand { display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; }
.mp-brand svg { height:40px; width:auto; display:block; }
.mp-brand .mp-word { font-size:1.5rem; }
.mp-brand:hover { text-decoration:none; }

/* Icon-Farbrollen (inline-SVG erbt via classes) */
.mp-ico .b { fill: var(--mp-primary); }
.mp-ico .arm { stroke: var(--mp-primary); }
.mp-ico .eye { fill: var(--mp-eye); }
.mp-ico .cheek { fill: var(--mp-coral); opacity:.55; }
.mp-ico .line { stroke: var(--mp-eye); fill:none; stroke-linecap:round; }
.mp-ico .bag { fill: var(--mp-amber); }
.mp-ico .bagh { stroke:#E0A93A; fill:none; }
:root[data-theme="dark"] .mp-ico .eye { fill:#0d1716; }
:root[data-theme="dark"] .mp-ico .line { stroke:#0d1716; }

/* ---------- Navbar ---------- */
.navbar { background: color-mix(in srgb, var(--mp-paper) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom:1px solid var(--mp-line); }
.navbar .nav-link { color: var(--mp-ink); font-weight:600; border-radius:.5rem; padding:.4rem .75rem !important; }
.navbar .nav-link:hover { color: var(--mp-primary); }
.navbar .nav-link.active { color: var(--mp-primary); background: var(--mp-primary-050); }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight:700; border-radius:.7rem; padding:.62rem 1.15rem; }
.btn-primary {
  --bs-btn-bg: var(--mp-primary); --bs-btn-border-color: var(--mp-primary);
  --bs-btn-hover-bg: var(--mp-primary-700); --bs-btn-hover-border-color: var(--mp-primary-700);
  --bs-btn-active-bg: var(--mp-primary-700); --bs-btn-color:#fff; --bs-btn-hover-color:#fff;
}
.btn-part {
  --bs-btn-color:#fff; --bs-btn-bg: var(--mp-part); --bs-btn-border-color: var(--mp-part);
  --bs-btn-hover-bg: var(--mp-part-700); --bs-btn-hover-border-color: var(--mp-part-700);
  --bs-btn-hover-color:#fff; color:#fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--mp-primary); --bs-btn-border-color: var(--mp-primary);
  --bs-btn-hover-bg: var(--mp-primary); --bs-btn-hover-border-color: var(--mp-primary); --bs-btn-hover-color:#fff;
}

/* ---------- Karten ---------- */
.card-soft {
  background: var(--mp-surface); border:1px solid var(--mp-line);
  border-radius:1.1rem; box-shadow: var(--mp-shadow);
}
.card-soft .card-body { padding:1.5rem; }
.feature-ico {
  width:52px; height:52px; border-radius:.9rem; display:inline-flex; align-items:center; justify-content:center;
  background: var(--mp-primary-050); color: var(--mp-primary); font-size:1.5rem; flex:0 0 auto;
}

/* ---------- Hero ---------- */
.hero { position:relative; overflow:hidden; }
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 55% at 82% 18%, color-mix(in srgb, var(--mp-coral) 26%, transparent), transparent 70%),
    radial-gradient(55% 60% at 8% 90%, color-mix(in srgb, var(--mp-primary) 20%, transparent), transparent 70%);
}
.hero > .container { position:relative; z-index:1; }
.hero-blob { max-width:100%; height:auto; filter: drop-shadow(0 14px 30px rgba(31,94,92,.22)); }

/* Badge „Kasse zahlt“ */
.badge-kasse {
  display:inline-flex; align-items:center; gap:.45rem; font-weight:700; font-size:.9rem;
  background: var(--mp-primary-050); color: var(--mp-primary-700);
  padding:.4rem .8rem; border-radius:2rem; border:1px solid color-mix(in srgb, var(--mp-primary) 25%, transparent);
}
:root[data-theme="dark"] .badge-kasse { color: var(--mp-primary); }

/* Abschnitte */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; font-weight:800; color: var(--mp-primary); }
.band { background: var(--mp-primary); color:#fff; }
.band h2, .band h3 { color:#fff; }
.band .lead { color: rgba(255,255,255,.9); }

/* Step-Liste */
.step-num {
  width:2.4rem; height:2.4rem; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background: var(--mp-part); color:#fff; font-weight:800; flex:0 0 auto;
}

/* ---------- Formular ---------- */
.form-control, .form-select { border-radius:.6rem; border-color: var(--mp-line); background: var(--mp-surface); color: var(--mp-ink); }
.form-control:focus, .form-select:focus { border-color: var(--mp-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--mp-primary) 22%, transparent); }
.form-label { font-weight:700; color: var(--mp-ink); }
.req { color: var(--mp-part); }

/* Honeypot */
.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ---------- Footer ---------- */
.site-footer { background: var(--mp-surface); border-top:1px solid var(--mp-line); color: var(--mp-muted); }
.site-footer a { color: var(--mp-muted); text-decoration:none; }
.site-footer a:hover { color: var(--mp-primary); }

/* Theme-Toggle */
.theme-toggle { border:1px solid var(--mp-line); background:transparent; color: var(--mp-ink); border-radius:.6rem; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; }
.theme-toggle:hover { color: var(--mp-primary); border-color: var(--mp-primary); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}