/* =========================================================================
       assistic.de — Maßgeschneiderte Lösungen (Re-Konzept Juni 2026)
       Baut vollständig auf assets/site.css (geteilte Komponenten + Tokens +
       editoriale Headlines). Hier nur Base-Reset + Seiten-Visual (flow-mock).
       ========================================================================= */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; font-size: 16px; }
    body {
      font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
      font-weight: 400; line-height: 1.65;
      color: var(--color-text); background: var(--color-bg);
      -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    }
    img, svg { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    p { color: var(--color-text-muted); line-height: 1.7; }

    /* Hero-Hintergrund (Dot-Grid + Verlauf, identisch zur Homepage-Hero) */
    .ds-hero h1 { color: var(--color-text); }
    .ds-hero__lead { font-size: 1.18rem; }

    /* B2B-Hinweis vor dem ersten Kaufweg (Rechts-Gate lena 2026-09-10) —
       gleiche Rolle wie .pricing-hero__cta-note (preise.css). */
    .hero-b2b-note { margin-top: 6px; font-size: 0.85rem; color: var(--color-text-subtle); }

    /* ---------- Flow-Mockup (Hero-Visual: „automatisch erledigt") ---------- */
    .flow-mock { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 18px; box-shadow: var(--shadow-lg); overflow: hidden; max-width: 400px; width: 100%; margin-left: auto; }
    @media (max-width: 900px) { .flow-mock { margin-inline: auto; } }
    .flow-mock__bar { background: var(--color-primary); color: #fff; padding: 14px 18px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.9rem; }
    .flow-mock__bar svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .flow-mock__body { padding: 22px 20px; display: flex; flex-direction: column; }
    .flow-node { display: flex; align-items: flex-start; gap: 14px; position: relative; }
    .flow-node__icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary-soft); color: var(--color-text); z-index: 1; }
    .flow-node.is-done .flow-node__icon { background: var(--color-success); color: #fff; }
    .flow-node__icon svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .flow-node__text { padding-top: 7px; }
    .flow-node__text b { display: block; font-size: 0.92rem; font-weight: 700; color: var(--color-text); line-height: 1.3; }
    .flow-node__text span { font-size: 0.82rem; color: var(--color-text-muted); }
    .flow-connector { width: 2px; height: 22px; background: var(--color-primary-tint); margin-left: 18px; }
    @media (prefers-reduced-motion: no-preference) {
      .flow-node.is-done .flow-node__icon { animation: flowpop .5s var(--ease-out) both; }
      @keyframes flowpop { 0% { transform: scale(0.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
    }
    /* Pain-Point Karten (2×2) */
    .pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 820px; margin: 0 auto; list-style: none; padding: 0; }
    @media (max-width: 600px) { .pain-grid { grid-template-columns: 1fr; } }
    .pain-card {
      display: flex; align-items: flex-start; gap: 16px;
      background: var(--color-surface); border: 1px solid var(--color-border);
      border-radius: var(--radius-lg); padding: 22px 24px;
      box-shadow: var(--shadow-sm);
      transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), border-color var(--duration-base);
    }
    .pain-card:hover { box-shadow: 0 10px 28px -10px rgba(27,31,36,0.16), 0 3px 8px -4px rgba(27,31,36,0.07); transform: translateY(-2px); border-color: var(--color-accent-tint); }
    .pain-icon {
      flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
      background: var(--color-accent-soft); color: var(--color-text);
      display: inline-flex; align-items: center; justify-content: center;
    }
    .pain-icon svg { width: 19px; height: 19px; }
    .pain-card p { font-size: 0.97rem; line-height: 1.55; color: var(--color-text); margin: 0; padding-top: 8px; }