/* ============================================================
   mindo-core.css · v1 · 2026-07-05
   Verbindliche Design-Basis für alle …mindo-Webseiten.
   Quelle: mindo-design-system.md (Single Source of Truth).
   NICHT pro Marke ändern — Änderungen nur zentral in
   C:\Users\mail\mindo-logos\mindo-core.css, dann in alle Repos kopieren.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
  /* Kernfarben aus dem Logo-Verlauf */
  --mindo-magenta:  #E5007E;   /* Pink/Magenta – Akzent, Verlauf-Start */
  --mindo-violet:   #7B2FF7;   /* Violett – Verlauf-Mitte, Icons */
  --mindo-orange:   #FF9500;   /* Orange – PRIMÄRE CTA-FARBE */
  --mindo-blue:     #2E7CF6;   /* Blau – Links, sekundäre Akzente */
  --mindo-teal:     #17BEBB;   /* Türkis – kleine Akzente, Icons */

  /* Flächen & Struktur */
  --mindo-navy:     #1E2A5A;   /* Dunkelblau – dunkle Sektionen, sek. Buttons */
  --mindo-ink:      #1D2433;   /* Fließtext */
  --mindo-gray:     #5B6472;   /* Sekundärtext */
  --mindo-bg:       #FFFFFF;   /* Standard-Hintergrund */
  --mindo-bg-soft:  #F7F8FC;   /* Wechsel-Sektionen, Karten-Hintergrund */
  --mindo-border:   #E6E9F2;   /* Kartenränder, Linien */

  /* Der Marken-Verlauf (für Überschrift-Unterstriche, Chips, Deko) */
  --mindo-gradient: linear-gradient(90deg, #7B2FF7 0%, #E5007E 35%, #FF9500 70%, #2E7CF6 100%);
}

body { font-family:'Nunito','Segoe UI',system-ui,sans-serif; color:var(--mindo-ink); background:var(--mindo-bg); margin:0; }
.container { max-width:1160px; margin:0 auto; padding:0 24px; }
section { padding:88px 0; }
.section-soft { background:var(--mindo-bg-soft); }
.section-navy { background:var(--mindo-navy); color:#fff; }

.kicker { text-transform:uppercase; letter-spacing:.12em; font-size:13px; font-weight:800; color:var(--mindo-magenta); text-align:center; }
h2.section-title { text-align:center; font-size:36px; font-weight:800; margin:8px 0 0; }
.title-bar { width:56px; height:4px; border-radius:4px; background:var(--mindo-gradient); margin:14px auto 18px; }

.btn { display:inline-block; border-radius:999px; padding:14px 32px; font-weight:700; text-decoration:none; transition:.15s; }
.btn-primary { background:var(--mindo-orange); color:#fff; }
.btn-secondary { background:var(--mindo-navy); color:#fff; }
.btn-outline { background:#fff; border:2px solid var(--mindo-navy); color:var(--mindo-navy); }
.btn:hover { transform:translateY(-1px); filter:brightness(.95); }

.card { background:#fff; border:1px solid var(--mindo-border); border-radius:16px;
        box-shadow:0 6px 24px rgba(30,42,90,.08); padding:32px 28px; }
.step-number { width:44px; height:44px; border-radius:50%; background:var(--mindo-orange);
        color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; }
.chip { display:inline-block; border:1px solid var(--mindo-border); border-radius:999px;
        padding:10px 22px; font-weight:700; background:#fff; }
.check { color:var(--mindo-orange); font-weight:800; }

/* --- Blog-Bausteine (einheitlich auf allen mindo-Seiten) --- */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.blog-card { background:#fff; border:1px solid var(--mindo-border); border-radius:16px;
        box-shadow:0 6px 24px rgba(30,42,90,.08); padding:28px; display:flex; flex-direction:column; }
.blog-card .blog-tag { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--mindo-violet); }
.blog-card h3 { font-size:21px; margin:10px 0 8px; }
.blog-card p { color:var(--mindo-gray); font-size:16px; line-height:1.6; flex:1; }
.blog-card .blog-more { color:var(--mindo-blue); font-weight:700; text-decoration:none; }
.blog-meta { font-size:14px; color:var(--mindo-gray); }
.article { max-width:760px; margin:0 auto; padding:0 24px; }
.article h1 { font-size:40px; font-weight:800; line-height:1.2; }
.article h2 { font-size:28px; font-weight:800; margin-top:44px; }
.article p, .article li { font-size:18px; line-height:1.7; color:var(--mindo-ink); }
.article .article-lead { font-size:20px; color:var(--mindo-gray); }