/* ═══════════════════════════════════════════════════════════════════
   mailorga — Marketing-Site, site-weite Identitaet (akquise, #209).
   Machart wie die LiquidStar-Marketing-Site: Georgia-Serif-Headings,
   system-ui-Body, EIN Akzent (petrol-teal #15605a) + funktionales
   Warn-Rot, flach (radius 2px), 1px-Linien als einziges Trennmittel,
   Supra-Akzentlinie 22x2px ueber jedem H2 als Leitmotiv, warmes Papier.
   Eigene Identitaet -- nicht der LiquidStar-Blueprint-Blau-Klon.
   Ueber wire.yml extra_css geladen.
═══════════════════════════════════════════════════════════════════ */

:root {
  --ink:    #1b1d1c;
  --muted:  #56605c;
  --faint:  #969d98;
  --line:   #e6e5df;
  --line-s: #cac8be;
  --accent:   #15605a;
  --accent-d: #0e433f;
  --rot:    #b23b2e;
  --amber:  #b7791f;
  --gruen:  #176a36;
  --bg:     #fbfaf7;
  --bg-2:   #f4f2ec;
  --bg-tint: #eaf1ef;
  --serif:  Georgia, "Times New Roman", serif;
  --sans:   system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body { overflow-x: hidden; max-width: 100%; }
body {
  font: 400 17px/1.65 var(--sans);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings durchweg Serif, ruhig, eng. */
h1, h2, h3 { font-family: var(--serif); color: var(--ink); letter-spacing: -.015em; font-weight: 400; }
a { color: var(--accent); text-underline-offset: 2px; }

/* ── HEADER / MARKETING-NAV ───────────────────────────────────────── */
.site-header { background: var(--bg); border-bottom: none; }
.site-logo-text {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.01em;
  color: var(--ink); font-size: 19px;
}
.header-nav a, .offerings-nav a {
  font-family: var(--sans); font-size: 14px; color: var(--muted); letter-spacing: .01em;
  transition: color .15s;
}
.header-nav a:hover, .offerings-nav a:hover,
.header-nav a.nav-active, .offerings-nav a.nav-active { color: var(--accent); }
.header-nav a.nav-active { font-weight: 500; border-bottom: 2px solid var(--accent); }
.offerings-bar { border-top: 1px solid var(--line); }

/* Nav-CTA -- quadratisch, Versal */
.nav-cta, a.nav-cta {
  background: var(--accent); color: #fff !important; border: 1px solid var(--accent);
  border-radius: 2px; font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .07em; text-transform: uppercase; padding: 9px 18px;
}
.nav-cta:hover { background: var(--accent-d); border-color: var(--accent-d); }

/* ── LANDING-SEKTIONEN (Shortcode-Chrome) ────────────────────────── */
.landing-content .section .section-inner,
.landing-content .section-hero .section-inner {
  max-width: 72rem; margin-left: auto; margin-right: auto;
}

/* Hero (Wire-Standard; die Plattform-Home ueberschreibt mit eigenem Blueprint-Hero inline) */
.section-hero { background: var(--bg); border-bottom: 1px solid var(--line); }
.section-hero .section-inner { padding-top: 4.5rem; padding-bottom: 3.5rem; max-width: 48rem; }
.section-hero h1 {
  font-family: var(--serif); font-size: clamp(2rem, 4.4vw, 3rem);
  line-height: 1.14; letter-spacing: -.02em; color: var(--ink); margin: 0 0 .6rem;
}
.section-hero h1::before {
  content: ""; display: block; width: 28px; height: 2px;
  background: var(--accent); margin: 0 0 1.3rem;
}
.section-hero p, .section-hero .section-inner > p:first-of-type {
  font-size: 1.16rem; line-height: 1.65; color: var(--muted); max-width: 48ch;
}
.hero-actions { margin-top: 1.9rem; gap: .7rem; }

/* Alternierende Sektionsbaender */
.section-light { background: var(--bg-2); }
.section h2 {
  font-family: var(--serif); font-size: clamp(1.45rem, 2.6vw, 2rem);
  letter-spacing: -.018em; color: var(--ink); font-weight: 400;
}
.section h2::before {
  content: ""; display: block; width: 22px; height: 2px;
  background: var(--accent); margin: 0 0 1rem;
}

/* Body-Sektionen linksbuendig (editorial), Hero zentriert. */
.landing-content .section:not(.section-hero) h2,
.landing-content .section:not(.section-hero) .section-inner { text-align: left; }
.section-hero h1::before { margin-left: auto; margin-right: auto; }
.section-hero .trust-strip { justify-content: center; }
.section-hero .stats, .section-hero .stats-bar { margin-left: auto; margin-right: auto; }

/* ── BUTTONS (Shortcode :::cta -> .btn) ──────────────────────────── */
.btn, a.btn {
  display: inline-block; border-radius: 2px; font-family: var(--sans);
  font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  padding: 11px 24px; border: 1px solid var(--accent); color: var(--accent);
  text-decoration: none; white-space: normal;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--bg-tint); text-decoration: none; }
.btn-primary, a.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-d); border-color: var(--accent-d); color: #fff; }

/* ── FEATURE-CARDS (1px-Grid, flach, Hover-Akzentstreifen) ──────── */
.feature-grid { gap: 1px; background: var(--line); border: 1px solid var(--line); }
.feature-card {
  background: var(--bg); border: none; border-radius: 0; padding: 28px 26px;
  box-shadow: none; position: relative; transition: background .15s;
}
.feature-card:hover { background: var(--bg-2); transform: none; box-shadow: none; }
.feature-card::after {
  content: ""; position: absolute; left: 0; top: 22px; bottom: 22px;
  width: 2px; background: transparent; transition: background .2s;
}
.feature-card:hover::after { background: var(--accent); }
.feature-card h3 {
  font-family: var(--serif); font-weight: 400; font-size: 17px;
  color: var(--ink); margin: 0 0 .5rem; letter-spacing: -.005em;
}
.feature-card p { font-size: 14px; line-height: 1.65; color: var(--muted); }

/* ── STEP-FLOW (:::steps) ────────────────────────────────────────── */
.step-marker { background: var(--accent); color: #fff; border-radius: 2px; box-shadow: none; }
.steps .step-title, .steps h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); }

/* ── METRIK-KACHELN (:::stats) ───────────────────────────────────── */
.stats, .stats-bar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 1.6rem 0;
}
.stats .stat, .stats-bar .stat { background: var(--bg); padding: 26px 24px; position: relative; text-align: left; }
.stats .stat::before {
  content: ""; display: block; width: 20px; height: 2px;
  background: var(--accent); margin-bottom: 14px;
}
.stat-value {
  font-family: var(--serif); font-weight: 400; font-size: 30px;
  line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 8px; }

/* ── QUOTE-CARDS (:::quotes) ─────────────────────────────────────── */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.quote {
  background: var(--bg); border: none; border-radius: 0; padding: 30px 28px;
  font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--ink);
}
.quote cite, .quote .quote-author {
  display: block; margin-top: 16px; font-family: var(--sans); font-style: normal;
  font-size: 13px; color: var(--muted); letter-spacing: .01em;
}

/* ── TRUST-STRIP ─────────────────────────────────────────────────── */
.trust-strip {
  list-style: none; padding: 0; margin: 1.4rem 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.trust-strip li {
  font-family: var(--sans); font-size: 12.5px; color: var(--muted);
  border: 1px solid var(--line-s); border-radius: 2px; padding: 5px 11px;
  display: inline-flex; align-items: center; gap: 7px;
}
.trust-strip li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); }

/* ── BADGES (:::badges) ──────────────────────────────────────────── */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2rem 0; }
.badge {
  font-family: var(--sans); font-size: 12px; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 2px; padding: 5px 12px; background: var(--bg-tint);
}

/* ── FOOTER ──────────────────────────────────────────────────────── */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--line); color: var(--muted); }
.footer-heading { font-family: var(--sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.footer-tagline { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink); max-width: 46ch; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }

/* ── FAQ (:::faq) -- flache Linien-Liste statt Box ───────────────── */
.faq { margin: 0 auto; max-width: 72rem; }
.faq-item {
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  margin: 0; background: transparent; overflow: visible;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item[open] { border-color: var(--line); }
.faq-item summary {
  padding: 15px 4px 15px 0; font-family: var(--serif); font-weight: 400;
  font-size: 16px; line-height: 1.3; color: var(--ink);
}
.faq-item summary:hover { background: transparent; color: var(--accent); }
.faq-item[open] summary { color: var(--accent); border-bottom: none; }
.faq-item summary::after { color: var(--accent); font-weight: 300; }
.faq-answer { padding: 0 0 16px; }
.faq-answer p { margin: 0 0 10px; color: var(--muted); line-height: 1.7; max-width: 64ch; font-size: 15px; }
.faq-answer code {
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; padding: 1px 6px;
}

/* Dezenter Rechts-/Abgrenzungs-Hinweis */
.legal-note { max-width: 64ch; margin: 1.4rem 0 1.4rem auto; padding: 12px 0 12px 16px; border-left: 2px solid var(--line-s); color: var(--faint); font-size: 13px; line-height: 1.6; }

/* ── APP-SCREENSHOT (echtes Produkt-Visual, clean) ───────────────── */
.app-shot { width: 100%; max-width: 72rem; margin: 1.6rem auto; }
.app-shot img { width: 100%; height: auto; display: block; border: 1px solid var(--line-s); border-radius: 4px; box-shadow: 0 18px 44px -30px rgba(26,29,33,.45); }
.app-shot figcaption { font-size: 12px; font-style: italic; color: var(--faint); margin-top: 8px; }

/* ── ARTIKEL/BLOG -- Editorial-Look (Pain-Point-Cluster) ─────────── */
.article-header h1, .article-hero h1 { font-family: var(--serif); color: var(--ink); font-weight: 400; letter-spacing: -.018em; }
.article-body { font-family: var(--serif); color: var(--ink); }
.article-body p, .article-body li { font-size: 1.05rem; line-height: 1.78; color: #2c302d; }
.article-body h2 { font-family: var(--serif); color: var(--accent); font-weight: 400; font-size: 1.4rem; border-top: 1px solid var(--line); padding-top: 1.4rem; margin-top: 2.2rem; letter-spacing: -.01em; }
.article-body h2::before { display: none; }
.article-body h3 { font-family: var(--serif); color: var(--accent); font-weight: 400; font-size: 1.12rem; margin-top: 1.6rem; }
.article-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.article-body strong { color: var(--ink); }
.article-cta-btn { background: #fff; color: var(--accent); }
.article-cta-btn:hover { background: var(--bg-tint); color: var(--accent); opacity: 1; text-decoration: none; }

/* Artikel-Tabellen */
.article-body table { font-family: var(--sans); font-size: 14px; border-collapse: collapse; width: 100%; margin: 1.2rem 0; }
.article-body th, .article-body td { padding: 11px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }
.article-body thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; border-bottom: 1.5px solid var(--line-s); background: var(--bg-2); }
.article-body tbody tr:last-child td { border-bottom: none; }
.article-body td { color: #3d423f; font-variant-numeric: tabular-nums; }
.article-body td strong, .article-body th { color: var(--ink); }

/* ── MOBILE-HYGIENE ──────────────────────────────────────────────── */
.offerings-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; }
.offerings-nav::-webkit-scrollbar { display: none; }
@media (max-width: 768px) {
  .offerings-bar, .offerings-inner, .site-header, .section, .section-inner, .landing-content { max-width: 100%; }
  .offerings-nav a { white-space: nowrap; }
  .hero-actions { flex-wrap: wrap; }
}

/* Header-Logo: Mark + Wortname (mailorga ist die Marke -- anders als LiquidStar) */
.site-logo-img { width: 28px; height: 28px; border-radius: 6px; }

/* Artikel-/Seiten-Layout (about, faq, legal): Luft nach der Nav, sonst klebt der Titel oben (Vince-Befund) */
.page-header { padding-top: 3rem; }
.page-header h1 { margin-top: 0; }

/* Eyebrow ueber Pillar-/Unterseiten-H1 (Homepage-Hero-Signatur auf allen Seiten -> weniger 0815) */
.page-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; font-style: normal; font-weight: 500; }
.section-hero .page-eyebrow { text-align: left; }
.page-header .page-eyebrow { margin-bottom: 10px; }


/* ═══════════════════════════════════════════════════════════════════
   PLATTFORM-HOME (#209) -- Landing-Komponenten. In custom.css statt
   inline <style>, weil verschachtelte @media-Braces im Markdown-
   <style> den Wire/MkDocs-Build brechen (akquise-Lernen). Klassen
   .mo-* / .pf-* / .vp5-* / .vs-* sind home-spezifisch, kollidieren nicht.
═══════════════════════════════════════════════════════════════════ */

/* ── Blueprint-Hero: warmes Papier + Linien-Raster + Glasplatte ───── */
.mo-hero {
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: 0;
  min-height: clamp(420px, 58vh, 640px);
  background:
    linear-gradient(180deg, rgba(251,250,247,0) 60%, var(--bg) 100%),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(21,96,90,.05) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(21,96,90,.05) 38px 39px),
    radial-gradient(120% 90% at 78% 18%, var(--bg-tint) 0%, var(--bg) 62%);
  position: relative; display: flex; align-items: flex-end; justify-content: flex-start;
  padding-bottom: clamp(48px, 8vh, 96px); margin-bottom: 0; border-bottom: 1px solid var(--line);
}
.mo-cap {
  position: relative; z-index: 3; max-width: 36rem; text-align: left;
  margin: 0 0 0 max(24px, calc((100vw - 72rem) / 2));
  padding: 26px 34px 26px 28px; background: rgba(251,250,247,0.94);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 4px 26px rgba(27,29,28,0.10); border-left: 2px solid var(--accent);
}
.mo-eyebrow {
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 12px; font-style: normal;
}
.mo-cap h1 {
  font-family: var(--serif); font-size: clamp(23px, 2.8vw, 35px); font-weight: 400;
  line-height: 1.16; letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px;
}
.mo-cap h1::before { content: none; }
.mo-cap > p { font-size: 16px; line-height: 1.65; color: #3a403d; margin: 0 0 22px; }
.mo-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mo-btn {
  display: inline-block; padding: 11px 24px; border: 1px solid var(--accent);
  border-radius: 2px; background: var(--accent); color: #fff !important; font-size: 12px;
  font-weight: 500; letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.mo-btn:hover { background: var(--accent-d); border-color: var(--accent-d); text-decoration: none; }
.mo-btn-sec { background: var(--bg); color: var(--accent) !important; }
.mo-btn-sec:hover { background: var(--bg-tint); border-color: var(--accent); }
/* Hero-Motiv: sortiertes Postfach als ruhige Linien-Illustration rechts (kein Fake-Foto) */
.mo-hero-art { position: absolute; right: max(20px, calc((100vw - 72rem) / 2)); top: 50%; transform: translateY(-50%); width: min(38vw, 26rem); z-index: 1; pointer-events: none; }
.mo-hero-art svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .mo-hero-art { display: none; } }

/* Wires Auto-Hero-Wrapper neutralisieren, damit der Hero buendig unter der Nav sitzt */
.landing-content > .section-hero:has(.mo-hero) { padding-top: 0; background: transparent; border-bottom: none; }
.landing-content > .section-hero:has(.mo-hero) > .section-inner { padding: 0; max-width: none; }
/* Pillar-/Unterseiten-Hero: Luft nach der Nav, ruhige Lesespalte (nicht zu schmal/zentriert-gequetscht) */
.landing-content > .section-hero:not(:has(.mo-hero)) > .section-inner { padding-top: 3.4rem; padding-bottom: 2.6rem; max-width: 52rem; }
.section-hero:not(:has(.mo-hero)) h1 { text-align: left; }
.section-hero:not(:has(.mo-hero)) h1::before { margin-left: 0; margin-right: 0; }
.section-hero:not(:has(.mo-hero)) p, .section-hero:not(:has(.mo-hero)) .section-inner > p { text-align: left; max-width: 60ch; margin-left: 0; }
.section-hero:not(:has(.mo-hero)) .trust-strip { justify-content: flex-start; }

/* ── Postfach-Banner: die eine bedeutungstragende Live-Animation ──── */
.pf-banner { width: min(94vw, 96rem); max-width: none; margin: 20px auto 8px; position: relative; z-index: 2; }
.pf-frame { border: 1px solid var(--ink); background: var(--bg); box-shadow: 0 18px 44px -30px rgba(27,29,28,.5); }
.pf-titlebar {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 22px; border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.pf-title { font-family: var(--serif); font-size: 16px; color: var(--ink); letter-spacing: .01em; }
.pf-sub { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pf-sub b { font-family: var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 400; }
.pf-body { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; }
.pf-feed { padding: 8px 22px 14px; border-right: 1px solid var(--line); min-height: 268px; }
.pf-row {
  display: grid; grid-template-columns: 1fr auto; gap: 10px 14px; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--line); transition: opacity .4s, background .3s; opacity: 0;
}
.pf-row:last-child { border-bottom: none; }
.pf-rl { font-size: 13.5px; color: var(--ink); line-height: 1.35; }
.pf-rl em { font-style: normal; font-size: 11.5px; color: var(--muted); display: block; margin-top: 1px; }
.pf-chip {
  font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  padding: 3px 9px; border-radius: 2px; border: 1px solid var(--line-s); color: var(--muted);
}
.pf-chip.neu { color: var(--muted); border-color: var(--line-s); }
.pf-chip.ans { color: var(--accent); border-color: var(--accent); background: var(--bg-tint); }
.pf-chip.draft { color: var(--amber); border-color: var(--amber); }
.pf-chip.human { color: var(--rot); border-color: var(--rot); }
.pf-side { padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; }
.pf-side-lbl { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.pf-weeks { display: flex; align-items: flex-end; gap: 12px; height: 120px; }
.pf-week { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pf-bar-wrap { width: 100%; height: 92px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; }
.pf-bar-done { background: var(--accent); width: 100%; transition: height .6s ease; }
.pf-bar-open { background: var(--line-s); width: 100%; transition: height .6s ease; }
.pf-week-lbl { font-size: 10.5px; color: var(--faint); }
p.pf-side-note { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin: 0; max-width: none; }
.pf-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 10.5px; color: var(--muted); }
.pf-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pf-legend i { width: 10px; height: 10px; display: inline-block; border-radius: 1px; }
p.pf-cap { font-size: 12px; font-style: italic; color: var(--muted); padding: 8px 4px 0; margin: 8px auto 0; max-width: min(94vw, 96rem); }

/* ── Value-Carousel (vp5) ────────────────────────────────────────── */
.vp5-wrap { max-width: 72rem; margin: 52px auto 0; padding: 36px 0 0; border-top: 1px solid var(--line); }
.vp5-head { margin: 0 0 24px; }
.vp5-head h2 { font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: 1.25; letter-spacing: -.015em; color: var(--ink); margin: 0 0 6px; }
.vp5-head h2::before { content: ""; display: block; width: 22px; height: 2px; background: var(--accent); margin-bottom: 14px; }
.vp5-head p { font-size: 15px; color: var(--muted); line-height: 1.7; margin: 0; max-width: 60ch; }
.vp5-window { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--bg); height: clamp(420px, 52vh, 540px); }
.vp5-track { display: flex; transition: transform .4s ease; height: 100%; }
.vp5-slide { flex: 0 0 100%; box-sizing: border-box; padding: 34px 40px 26px; display: flex; flex-direction: column; overflow-y: auto; }
.vp5-num { font-size: 10px; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 16px; }
.vp5-slide h3 { font-family: var(--serif); font-size: 20px; font-weight: 400; line-height: 1.22; letter-spacing: -.015em; color: var(--ink); margin: 0 0 16px; }
p.vp5-lead { font-size: 14px; color: var(--muted); line-height: 1.65; margin: 0 0 18px; max-width: 62ch; }
.vp5-benlist { display: flex; flex-direction: column; }
.vp5-ben { padding: 15px 0; border-top: 1px solid var(--line); }
.vp5-ben:first-child { border-top: none; padding-top: 0; }
.vp5-ben h4 { font-family: var(--serif); font-size: 15px; font-weight: 400; color: var(--ink); margin: 0 0 6px; line-height: 1.3; border-left: 2px solid var(--accent); padding-left: 10px; }
.vp5-ben p { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; padding-left: 12px; }
.vp5-two { display: flex; gap: 28px; width: 100%; margin-top: 4px; }
.vp5-tcol { flex: 1; }
.vp5-th { font-family: var(--serif); font-size: 14px; font-weight: 400; color: var(--ink); margin-bottom: 12px; }
.vp5-yes, .vp5-no { list-style: none; margin: 0; padding: 0; }
.vp5-yes li, .vp5-no li { font-size: 13px; line-height: 1.55; color: #41463f; padding: 5px 0 5px 22px; position: relative; }
.vp5-yes li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.vp5-no li { color: var(--faint); }
.vp5-no li::before { content: "\2013"; position: absolute; left: 0; color: var(--line-s); }
.vp5-bar { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 0; gap: 16px; }
.vp5-dots { display: flex; gap: 6px; align-items: center; }
.vp5-dot { width: 5px; height: 5px; border: 1px solid var(--line-s); background: transparent; cursor: pointer; padding: 0; transition: background .15s, border-color .15s, width .15s; }
.vp5-dot.active { background: var(--accent); border-color: var(--accent); width: 14px; }
.vp5-arrow { width: 36px; height: 36px; border: 1px solid var(--line-s); background: var(--bg); cursor: pointer; font-size: 18px; color: var(--ink); display: flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s; }
.vp5-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.vp5-arrow:disabled { opacity: .22; cursor: default; }

/* ── Vorher/Nachher-Grid (vs) ────────────────────────────────────── */
.vs-section { margin: 48px 0 0; padding: 36px 0 0; border-top: 1px solid var(--line); }
.vs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 8px 0 0; }
.vs-col { background: var(--bg); padding: 24px 24px 20px; }
.vs-col h3 { font-family: var(--serif); font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 14px; padding: 0; border: none; line-height: 1.3; }
.vs-yes h3 { border-left: 2px solid var(--accent); padding-left: 10px; }
.vs-no h3 { color: var(--muted); }
.vs-col ul { list-style: none; margin: 0; padding: 0; }
.vs-col ul li { font-size: 13px; line-height: 1.55; color: #41463f; padding: 5px 0 5px 22px; position: relative; margin: 0; border: none; }
.vs-yes ul li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.vs-no ul li { color: var(--faint); }
.vs-no ul li::before { content: "\2013"; position: absolute; left: 0; color: var(--line-s); }

/* ── Preis-Flaeche (Tiers-ready, heute: 1 bestaetigtes Modell) ───── */
.mo-price { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 8px 0 0; }
.mo-price-col { background: var(--bg); padding: 26px 24px; position: relative; }
.mo-price-col.feat { background: var(--bg-tint); }
.mo-price-col.feat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.mo-price-lbl { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; }
.mo-price-val { font-family: var(--serif); font-size: 28px; font-weight: 400; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.mo-price-val small { font-size: 14px; color: var(--muted); }
.mo-price-col p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 12px 0 0; }

/* ── Vertrauens-/Sicherheits-Sektion (#215, aus security-PASS doku) ── */
.mo-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 8px 0 0; }
.mo-trust-item { background: var(--bg); padding: 22px 24px; }
.mo-trust-item h3 { font-family: var(--serif); font-weight: 400; font-size: 15px; color: var(--ink); margin: 0 0 7px; padding: 0 0 0 24px; position: relative; line-height: 1.3; border: none; }
.mo-trust-item h3::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 600; }
.landing-content .mo-trust-item p { font-size: 13.5px; color: var(--muted); line-height: 1.6; margin: 0; max-width: none; }
p.mo-trust-note { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 18px 0 0; padding: 4px 0 4px 16px; border-left: 2px solid var(--line-s); max-width: 70ch; }

/* Wire zentriert rohe Landing-Bloecke per Default -> Home-Komponenten explizit
   linksbuendig, sonst schwimmt Fliesstext mittig (Wikipedia-Fail, akquise-Lernen). */
.mo-cap, .pf-banner, .pf-feed, .pf-side, .pf-cap,
.vp5-wrap, .vp5-head, .vp5-slide, .vp5-num, .vp5-two,
.mo-price, .mo-price-col, .vs-section, .vs-col,
.mo-trust, .mo-trust-item, p.mo-trust-note { text-align: left; }

/* ── Sende-Schalter: die 3 Modi als Mockup ──────────────────────── */
.mo-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 10px 0 0; text-align: left; }
.mo-mode { background: var(--bg); padding: 18px 20px; position: relative; }
.mo-mode.safe { background: var(--bg-tint); }
.mo-mode.safe::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.mo-mode .mo-mode-tag { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 8px; }
.mo-mode h4 { font-family: var(--serif); font-weight: 400; font-size: 15px; color: var(--ink); margin: 0 0 6px; line-height: 1.25; }
.landing-content .mo-mode p { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0; max-width: none; }
@media (max-width: 620px) { .mo-modes { grid-template-columns: 1fr; } }

/* ── Dunkles Statement-Band (modern, kontrastreich, Un-AI-Differenzierer) ── */
.mo-darkband { width: 100vw; margin-left: calc(50% - 50vw); background: #10302d; color: #eaf1ef; padding: clamp(52px, 8vw, 104px) 0; margin: 56px 0 0; position: relative; overflow: hidden; }
.mo-darkband::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.018) 46px 47px); pointer-events: none; }
.mo-darkband-inner { max-width: 72rem; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; text-align: left; }
.mo-darkband .mo-db-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #7fb3aa; margin: 0 0 16px; }
.mo-darkband h2 { font-family: var(--serif); font-size: clamp(27px, 3.6vw, 42px); font-weight: 400; line-height: 1.18; letter-spacing: -.02em; color: #fff; margin: 0 0 20px; max-width: 22ch; }
.mo-darkband h2::before { content: ""; display: block; width: 28px; height: 2px; background: #7fb3aa; margin: 0 0 20px; }
.landing-content .mo-darkband p { font-size: 16px; line-height: 1.72; color: #c4d3ce; max-width: 58ch; margin: 0 0 28px; }
.mo-db-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.mo-db-cta a { display: inline-block; padding: 12px 26px; border-radius: 2px; font-size: 12px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; border: 1px solid; transition: background .15s, color .15s, border-color .15s; }
.mo-db-cta .pri { background: #eaf1ef; color: #10302d !important; border-color: #eaf1ef; }
.mo-db-cta .pri:hover { background: #fff; color: #10302d !important; }
.mo-db-cta .sec { background: transparent; color: #eaf1ef !important; border-color: #4a6b65; }
.mo-db-cta .sec:hover { border-color: #eaf1ef; }

/* ── "Konkret am Tool" (#220): Postfach = Ordner aus einfachen Dateien ── */
.mo-config { border: 1px solid var(--line-s); background: #fff; max-width: 58rem; margin: 10px 0 0; text-align: left; }
.mo-config-head { padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mo-config-head b { font-family: var(--serif); text-transform: none; letter-spacing: 0; color: var(--accent); font-size: 15px; font-weight: 400; }
.mo-file { display: grid; grid-template-columns: 15rem 1fr; gap: 6px 22px; padding: 13px 18px; border-bottom: 1px solid var(--line); align-items: baseline; }
.mo-file:last-child { border-bottom: none; }
.mo-fname { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; color: var(--ink); }
.mo-fname .mo-dir { color: var(--accent); }
.mo-fdesc { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.mo-fval { color: var(--accent); }
.mo-answer { max-width: 58rem; margin: 10px 0 0; border: 1px solid var(--line-s); background: #fff; text-align: left; }
.mo-answer-in { padding: 14px 18px; border-bottom: 1px dashed var(--line-s); background: var(--bg-2); }
.mo-answer-out { padding: 14px 18px; }
.mo-answer-lbl { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin: 0 0 7px; }
.mo-answer-from { font-size: 13px; color: var(--ink); margin: 0; }
.mo-answer-from b { font-weight: 600; }
.landing-content .mo-answer-out p { font-size: 14px; color: #2c302d; line-height: 1.62; margin: 0 0 8px; max-width: none; }
.mo-answer-chip { display: inline-block; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber); border-radius: 2px; padding: 2px 8px; margin-top: 6px; }
@media (max-width: 620px) { .mo-file { grid-template-columns: 1fr; gap: 2px 0; } }

@media (max-width: 760px) {
  .mo-hero { align-items: center; justify-content: center; padding: 28px 0; min-height: auto; }
  .mo-cap { margin: 0 16px; max-width: 36rem; border-left: none; border-top: 2px solid var(--accent); padding: 24px 22px; }
  .mo-cap h1 { font-size: 23px; }
  .pf-body { grid-template-columns: 1fr; }
  .pf-feed { border-right: none; border-bottom: 1px solid var(--line); min-height: 0; }
  .vp5-two { flex-direction: column; gap: 14px; }
  .vs-grid { grid-template-columns: 1fr; }
}