/* ══════════════════════════════════════════════════════════════════════
   MIETWART MARKETING DESIGN SYSTEM
   Shared tokens + components for the homepage, SEO landing pages and the
   Ratgeber content hub. Calm, mature German-SaaS look: warm off-white
   surfaces, charcoal type, one restrained blue accent, subtle borders,
   soft shadows. No neon gradients, no glassmorphism, no decorative blobs.
   ══════════════════════════════════════════════════════════════════════ */

:root{
    /* Brand accent — kept from the existing Mietwart identity (Tabler primary) */
    --mw-accent:#206bc4;
    --mw-accent-dark:#184f92;
    --mw-accent-tint:#eaf1fb;

    /* Neutral, warm off-white surface scale */
    --mw-bg:#faf9f6;
    --mw-surface:#ffffff;
    --mw-surface-alt:#f4f2ee;
    --mw-border:#e7e3db;
    --mw-border-strong:#d8d3c8;

    /* Charcoal type scale */
    --mw-ink:#1c1e21;
    --mw-ink-2:#3a3d42;
    --mw-muted:#6b6f76;
    --mw-muted-2:#8a8d93;

    /* Dark section (used sparingly: footer, one contrast section) */
    --mw-dark-bg:#14161a;
    --mw-dark-surface:#1c1f24;
    --mw-dark-border:#2b2e34;
    --mw-dark-ink:#f4f3f1;
    --mw-dark-muted:#a7aab0;

    /* Semantic */
    --mw-success:#2f8f5b;
    --mw-success-tint:#e7f4ec;
    --mw-warning:#b5790a;
    --mw-warning-tint:#faf1de;
    --mw-danger:#c0392b;

    /* Layout */
    --mw-container:1240px;
    --mw-container-narrow:760px;
    --mw-radius-sm:8px;
    --mw-radius:14px;
    --mw-radius-lg:20px;
    --mw-shadow-sm:0 1px 2px rgba(28,30,33,.06);
    --mw-shadow:0 10px 30px rgba(28,30,33,.08);
    --mw-shadow-lg:0 24px 60px rgba(28,30,33,.12);
}

/* ── RESET-ISH BASE (scoped to marketing pages only) ──
   :where() is used here on purpose: it makes this reset carry ZERO
   specificity so that ANY single-class rule (buttons, nav/footer links,
   etc.), in any stylesheet, in any load order, can override it. Without
   :where(), ".mw a{color:inherit}" (specificity 0,1,1) was silently
   beating single-class color rules like ".mw-btn-primary{color:#fff}"
   or ".ft-links a{color:rgba(255,255,255,.38)}" (specificity 0,1,0),
   causing dark inherited text to render on dark/blue backgrounds
   (invisible footer links, wrong button text color) sitewide. */
.mw{color:var(--mw-ink);background:var(--mw-bg)}
.mw *{box-sizing:border-box}
.mw img{max-width:100%;display:block}
:where(.mw a){color:inherit}
.mw h1,.mw h2,.mw h3,.mw h4{font-weight:800;letter-spacing:-.01em;line-height:1.2;margin:0 0 .6rem}
.mw p{margin:0}
.mw ul,.mw ol{margin:0;padding:0}

/* Skip link (keyboard accessibility) */
.mw-skip{position:absolute;left:-999px;top:0;background:var(--mw-ink);color:#fff;padding:.6rem 1rem;border-radius:0 0 8px 0;z-index:2000;font-size:.85rem;font-weight:600}
.mw-skip:focus{left:0}

/* Visible focus rings everywhere on marketing pages */
.mw a:focus-visible,.mw button:focus-visible,.mw [tabindex]:focus-visible{outline:3px solid var(--mw-accent);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion: reduce){
    .mw *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ── LAYOUT PRIMITIVES ── */
.mw-wrap{max-width:var(--mw-container);margin:0 auto;padding:0 1.5rem}
.mw-wrap-narrow{max-width:var(--mw-container-narrow);margin:0 auto;padding:0 1.5rem}
.mw-section{padding:5rem 0}
.mw-section-sm{padding:3rem 0}
.mw-section-alt{background:var(--mw-surface-alt)}
.mw-section-dark{background:var(--mw-dark-bg);color:var(--mw-dark-ink)}
.mw-section-dark .mw-muted{color:var(--mw-dark-muted)}
.mw-section-dark h2,.mw-section-dark h3{color:var(--mw-dark-ink)}
@media(max-width:768px){.mw-section{padding:3.5rem 0}}

.mw-grid{display:grid;gap:1.5rem}
.mw-grid-2{grid-template-columns:repeat(2,1fr)}
.mw-grid-3{grid-template-columns:repeat(3,1fr)}
.mw-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.mw-grid-3,.mw-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.mw-grid-2,.mw-grid-3,.mw-grid-4{grid-template-columns:1fr}}

.mw-flex-center{display:flex;align-items:center;justify-content:center}
.mw-center{text-align:center}

/* ── EYEBROW / TAG ──
   width:fit-content + align-self:flex-start keeps the pill hugging the
   label even when the parent is a column-flex card (default align-items:
   stretch would otherwise blow the badge across the full card width). */
.mw-tag{display:inline-flex;align-items:center;gap:.4rem;width:fit-content;max-width:100%;align-self:flex-start;background:var(--mw-accent-tint);color:var(--mw-accent-dark);font-size:.72rem;font-weight:700;padding:.35rem .85rem;border-radius:100px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:1.1rem}
.mw-section-dark .mw-tag{background:rgba(255,255,255,.08);color:#cfe0f5}
.mw-center .mw-tag,.mw-section-head.mw-center .mw-tag{align-self:center;margin-left:auto;margin-right:auto}

/* ── HEADINGS ──
   No inner max-width: titles and leads share the same .mw-wrap edge as
   body copy. A nested 26ch / 620px / 720px column was creating a
   "box inside a box" that did not line up with the page container. */
.mw-h1{font-size:clamp(2.1rem,4vw,3.1rem)}
.mw-h2{font-size:clamp(1.7rem,2.6vw,2.35rem)}
.mw-h3{font-size:1.2rem}
.mw-lead{font-size:1.08rem;color:var(--mw-muted);line-height:1.7}
.mw-section-head{margin-bottom:2.75rem}
.mw-section-head.mw-center .mw-lead{margin:0 auto}

/* ── BUTTONS ── */
.mw-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:.95rem;padding:.8rem 1.6rem;border-radius:10px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease;line-height:1.2}
.mw-btn-primary{background:var(--mw-accent);color:#fff;box-shadow:0 4px 14px rgba(32,107,196,.28)}
.mw-btn-primary:hover{background:var(--mw-accent-dark);box-shadow:0 6px 18px rgba(32,107,196,.34)}
.mw-btn-secondary{background:var(--mw-surface);color:var(--mw-ink);border-color:var(--mw-border-strong)}
.mw-btn-secondary:hover{border-color:var(--mw-accent);color:var(--mw-accent-dark)}
.mw-btn-ghost-light{background:rgba(255,255,255,.06);color:var(--mw-dark-ink);border-color:rgba(255,255,255,.22)}
.mw-btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.mw-btn-lg{padding:.95rem 2rem;font-size:1rem}
@media(max-width:640px){.mw-btn-group{display:flex;flex-direction:column}.mw-btn-group .mw-btn{width:100%}}
.mw-btn-group{display:flex;gap:.9rem;flex-wrap:wrap}

/* ── CARDS ── */
.mw-card{background:var(--mw-surface);border:1px solid var(--mw-border);border-radius:var(--mw-radius);padding:1.9rem;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.mw-card:hover{transform:translateY(-3px);box-shadow:var(--mw-shadow);border-color:var(--mw-border-strong)}
.mw-card-icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;background:var(--mw-accent-tint);color:var(--mw-accent)}
.mw-card h3{font-size:1.05rem;margin-bottom:.5rem}
.mw-card p{color:var(--mw-muted);font-size:.9rem;line-height:1.7}

/* ── PILLS / TRUST STRIP ── */
.mw-pill{background:var(--mw-surface-alt);border:1px solid var(--mw-border);border-radius:100px;padding:.55rem 1.05rem;font-size:.83rem;font-weight:600;color:var(--mw-ink-2);display:inline-flex;align-items:center;gap:.55rem}
.mw-pill svg{width:16px;height:16px;stroke:var(--mw-accent);flex-shrink:0}

/* ── FAQ ACCORDION ── */
.mw-faq{border:1px solid var(--mw-border);border-radius:var(--mw-radius);background:var(--mw-surface);overflow:hidden}
.mw-faq + .mw-faq{margin-top:.85rem}
.mw-faq summary{list-style:none;cursor:pointer;padding:1.1rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-weight:700;font-size:.95rem}
.mw-faq summary::-webkit-details-marker{display:none}
.mw-faq summary .mw-faq-ic{flex-shrink:0;transition:transform .2s ease;color:var(--mw-accent)}
.mw-faq[open] summary .mw-faq-ic{transform:rotate(45deg)}
.mw-faq summary:hover{background:var(--mw-surface-alt)}
.mw-faq-body{padding:0 1.4rem 1.25rem;color:var(--mw-muted);font-size:.9rem;line-height:1.75}
.mw-faq-body p + p{margin-top:.75rem}

/* ── BREADCRUMBS ── */
/* .lp-nav is position:fixed (68px / 64px on mobile — see landing-nav.css),
   so the breadcrumb nav (first element inside <main>) needs enough top
   clearance to not render underneath it. */
nav[aria-label="Breadcrumb"]{padding-top:68px}
.mw-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:.82rem;color:var(--mw-muted);padding:1.1rem 0}
.mw-crumbs a{color:var(--mw-muted);text-decoration:none;font-weight:600}
.mw-crumbs a:hover{color:var(--mw-accent)}
.mw-crumbs .sep{color:var(--mw-border-strong)}
.mw-crumbs .cur{color:var(--mw-ink);font-weight:700}
@media(max-width:600px){nav[aria-label="Breadcrumb"]{padding-top:64px}}

/* ── SIMPLE PAGE HERO (SEO / entity pages) ── */
.mw-page-hero{padding:3.5rem 0 3rem;border-bottom:1px solid var(--mw-border)}
.mw-page-hero .mw-lead{margin-top:1rem}

/* ── SCREENSHOT FRAME ── */
.mw-shot{border-radius:var(--mw-radius-lg);overflow:hidden;box-shadow:var(--mw-shadow-lg);border:1px solid var(--mw-border)}
.mw-shot-bar{background:var(--mw-dark-bg);display:flex;gap:.4rem;align-items:center;padding:.6rem 1rem}
.mw-shot-dot{width:10px;height:10px;border-radius:50%;display:inline-block}

/* ── STEP LIST ── */
.mw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.mw-step{text-align:left}
.mw-step-n{width:44px;height:44px;border-radius:50%;background:var(--mw-accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.05rem}
@media(max-width:1024px){.mw-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.mw-steps{grid-template-columns:1fr}}

/* ── TABLE (guides) ── */
.mw-table-wrap{overflow-x:auto;border:1px solid var(--mw-border);border-radius:var(--mw-radius);margin:1.5rem 0}
.mw-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:480px}
.mw-table th,.mw-table td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--mw-border)}
.mw-table th{background:var(--mw-surface-alt);font-weight:700;color:var(--mw-ink-2)}
.mw-table tr:last-child td{border-bottom:none}

/* ── ARTICLE / LONG-FORM CONTENT ──
   Fills the same .mw-wrap as the page hero (title, badge, date). */
.mw-article{width:100%;max-width:none;margin:0;font-size:1.02rem;line-height:1.8;color:var(--mw-ink-2)}
.mw-article h2{font-size:1.5rem;margin-top:2.4rem;color:var(--mw-ink)}
.mw-article h3{font-size:1.15rem;margin-top:1.8rem;color:var(--mw-ink)}
.mw-article p{margin-bottom:1.15rem}
.mw-article ul,.mw-article ol{margin:0 0 1.15rem 1.4rem}
.mw-article li{margin-bottom:.5rem}
.mw-article a{color:var(--mw-accent-dark);text-decoration:underline;text-decoration-color:var(--mw-border-strong);text-underline-offset:2px}
.mw-article a:hover{text-decoration-color:var(--mw-accent)}
.mw-article strong{color:var(--mw-ink)}
.mw-article-meta{display:flex;gap:.75rem;align-items:center;color:var(--mw-muted);font-size:.85rem;margin-bottom:2rem}
.mw-article-callout{background:var(--mw-accent-tint);border:1px solid #d3e2f6;border-radius:var(--mw-radius);padding:1.4rem 1.6rem;margin:1.8rem 0}
.mw-article-callout p{margin:0}
.mw-article-callout p + p{margin-top:.6rem}

/* ── RATGEBER HUB CARDS ── */
.mw-guide-card{background:var(--mw-surface);border:1px solid var(--mw-border);border-radius:var(--mw-radius);padding:1.5rem 1.4rem;display:flex;flex-direction:column;align-items:stretch;height:100%;transition:transform .18s ease,box-shadow .18s ease}
.mw-guide-card:hover{transform:translateY(-3px);box-shadow:var(--mw-shadow)}
.mw-guide-card .mw-tag{margin-bottom:.85rem;flex:0 0 auto}
.mw-guide-card h3{margin-bottom:.6rem;font-size:1.05rem}
.mw-guide-card p{color:var(--mw-muted);font-size:.88rem;line-height:1.65;flex:1}
.mw-guide-card .mw-guide-link{margin-top:1.1rem;font-weight:700;font-size:.85rem;color:var(--mw-accent-dark);text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.mw-guide-card .mw-guide-link:hover{text-decoration:underline}

/* ── FINAL CTA BAND ── */
.mw-cta{background:var(--mw-ink);border-radius:var(--mw-radius-lg);padding:3.5rem 2.5rem;text-align:center;color:#fff}
.mw-cta h2{color:#fff}
.mw-cta .mw-lead{color:rgba(255,255,255,.72);margin:0 auto 2rem}
@media(max-width:640px){.mw-cta{padding:2.5rem 1.5rem;border-radius:var(--mw-radius)}}

/* ── UTILITIES ── */
.mw-muted{color:var(--mw-muted)}
.mw-mt-0{margin-top:0}
.mw-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}