/* obs-mk-unslop.css - F-0094, 05.11.2026. Quiet layer over obs-mk4.css.
   Direction: hands-on, exact, a little warm - a workshop drawing. One accent (the brand indigo),
   neutral surfaces, no hue gradients, no glows, sentence case, weights 400-600.
   Linked AFTER obs-mk4.css and BEFORE obs-mk-handy.css. Remove the link line = previous look. */

:root {
  --mk4-ink: #17181F;
  --mk4-ink-2: #20222B;
  --mk4-line-dark: rgba(255, 255, 255, .12);
  --mk4-on-ink: #C8C9D4;
  --mk4-accent-on-ink: #A9A5FF;
  --mk4-nacht: var(--mk4-ink);
  --mk4-nv: var(--mk4-ink);
  --shell-dark: var(--mk4-ink);
  --mk4-verlauf: var(--color-accent);
  --mk4-lila: var(--mk4-accent-on-ink);
  --mk4-tuerkis: var(--mk4-accent-on-ink);
  --mk4-sh: 0 1px 2px rgba(15, 16, 36, .05), 0 4px 12px rgba(15, 16, 36, .05);
}

/* ---- type: weights 400-600, sentence case ---- */
h1, h2, h3, h4,
.mk4-h1, .mk4-h2, .mk2-gross, .obs-mk-kopf h2, .mk2-schluss h2 { font-weight: 600; }
.mk4-h1 { letter-spacing: -.03em; }
.mk4-karte h3, .mk2-kachel h3, .obs-mk-karte h3 { font-weight: 600; }
.mk4-preis, .obs-mk-tarif-preis { font-weight: 600; }
.mk2-ehrlich-zeile b, .mk4-vs-kopf b, .mk4-vs-chat-kopf, .mk4-vs-avatar { font-weight: 600; }
.obs-header:has(.mk2-nav) .obs-brand-name { font-weight: 600; }
.btn { font-weight: 600; }

/* small labels: no tracked capitals; the mark (a measuring point) is the signature */
.obs-kicker, .obs-kicker-muted, .obs-eyebrow, .obs-mk-marke, .mk2-kachel-nr, .mk2-schere-marke,
.mk2-matrix thead th, .sys-lbl, .sys-schritt-art, .mk4-chip-marke {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
}
.obs-kicker::before, .obs-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 10px;
  vertical-align: 2px;
  border-radius: 50%;
  background: currentColor;
}
.mk4-video-text .obs-kicker { color: var(--color-accent); }
.mk2-kachel-nr, .mk4-nr { font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .02em; color: var(--color-still); }

/* ---- buttons: solid accent, calm secondary ---- */
.btn { transition: background-color .14s ease, color .14s ease, border-color .14s ease; }
.btn-primary { background: var(--color-accent); border-color: var(--color-accent); box-shadow: none; }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); transform: none; }
.btn.ist-glas, .btn-rand, .btn-ghost,
.obs-header:has(.mk2-nav) .btn-ghost, .obs-header:has(.mk2-nav) .mk-cta-angebot {
  background: transparent;
  border-color: var(--mk4-line-dark);
  color: #fff;
}
.btn.ist-glas:hover, .btn-rand:hover { background: rgba(255, 255, 255, .06); }
.obs-header:has(.mk2-nav) .mk-cta-angebot:hover,
.obs-header:has(.mk2-nav) .mk-cta-angebot:focus-visible { background: #fff; border-color: #fff; color: var(--mk4-ink); }
.obs-header:has(.mk2-nav) .mk-cta-angebot::after { border-color: #fff; }

/* ---- header: solid ink, no blur ---- */
.obs-header:has(.mk2-nav) { background: var(--mk4-ink); border-bottom-color: var(--mk4-line-dark); }
@media (min-width: 901px) {
  .obs-header:has(.mk2-nav) { background: var(--mk4-ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.mk2-nav .nav-link { font-weight: 500; color: var(--mk4-on-ink); }
.mk2-nav .nav-link:hover, .mk2-nav .nav-item.ist-offen > .nav-link { background: rgba(255, 255, 255, .06); }
.mk2-nav .nav-item > .nav-link.is-active::before { background: var(--mk4-accent-on-ink); }
.mk2-nav .dropdown-menu { box-shadow: 0 12px 32px rgba(15, 16, 36, .22); }
.mk2-nav .dropdown-item { font-weight: 500; }

/* beta band: flat */
.mk-beta { background: var(--mk4-ink-2); color: #fff; border-bottom: 1px solid var(--mk4-line-dark); }
.mk-beta .mk-beta-pfeil { font-weight: 600; }
.mk-beta .mk-beta-pille { background: rgba(255, 255, 255, .1); }

/* ---- dark bands and hero: one flat ink, no washes ---- */
.mk4-hero, .mk2-band.ist-nacht, .mk2-schluss, .mk4-schluss, .obs-mk-cta,
.obs-mk-seitenkopf, .mk2-ziel-kopf { background: var(--mk4-ink); }
.mk2-schluss, .mk4-schluss { border-radius: 20px; }
.mk4-h1 { color: #fff; }
.mk4-verlauf { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--mk4-accent-on-ink); }
.obs-mk-seitenkopf .mk2-riese .mk2-strich, .mk2-ziel-kopf .mk2-riese .mk2-strich { background: linear-gradient(to top, rgba(169, 165, 255, .3) 0 .12em, transparent .12em); }
.mk4-hero-fuss, .mk4-trust { color: var(--mk4-on-ink); }
.mk4-hero-fuss b { font-weight: 600; }
.mk4-trust li::before { color: var(--mk4-accent-on-ink); }

/* ---- chips and tiles: one accent, the rest neutral ---- */
.mk4-chip { border-radius: 12px; background: rgba(255, 255, 255, .04); border-color: var(--mk4-line-dark); }
.mk4-chip b { font-weight: 600; }
.mk4-chip-marke, .mk4-chip-marke.ist-pink, .mk4-chip-marke.ist-orange, .mk4-chip-marke.ist-tuerkis { color: var(--mk4-accent-on-ink); }
.mk4-kachel, .mk4-kachel.ist-indigo, .mk4-kachel.ist-himmel, .mk4-kachel.ist-bernstein,
.mk4-kachel.ist-tuerkis, .mk4-kachel.ist-pink, .mk4-kachel.ist-violett, .mk4-kachel.ist-orange {
  background: var(--color-accent-100);
  color: var(--color-accent-600);
  border-radius: 12px;
}
.mk4-ton-indigo, .mk4-ton-himmel, .mk4-ton-bernstein, .mk4-ton-tuerkis, .mk4-ton-pink,
.mk4-ton-violett, .mk4-ton-orange { color: var(--color-accent-600); }

/* ---- cards: hairline, neutral shadow, nested radii ---- */
.mk4-karte, .mk2-kachel, .obs-mk-karte, .mk2-gegen-spalte, .mk2-chat, .obs-mk-tarif, .obs-mk-shot,
.mk2-schere, .mk2-matrix-huelle, .mk2-ehrlich-zeile, .mk4-warum { border-radius: 16px; }
.mk4-karte, .mk2-kachel, .obs-mk-karte { box-shadow: none; }
a.mk4-karte:hover, .mk2-kachel:hover { transform: none; border-color: var(--color-accent-300); box-shadow: var(--mk4-sh); }
.obs-mk-shot { box-shadow: 0 1px 2px rgba(15, 16, 36, .05), 0 12px 28px -16px rgba(20, 21, 43, .3); }
.mk2-gegen-spalte.ist-wir, .mk4-karte.ist-wir {
  background: var(--mk4-ink);
  box-shadow: none;
}
.mk2-gegen-spalte.ist-wir .mk2-gegen-liste li::before { color: var(--mk4-accent-on-ink); }
.mk4-warum { background: var(--color-surface); }
.mk4-vorschau { border-radius: 16px; box-shadow: none; background: rgba(255, 255, 255, .04); }
.mk4-vs { border-radius: 12px; }
.mk4-vs-kopf { background: var(--color-neutral-200); color: var(--color-text); }
.mk4-vs-kopf span { color: var(--color-text-muted); }
.mk4-vs-punkt { background: var(--color-accent); }
.mk4-vs-avatar { background: var(--color-accent); }
.mk4-blase.ist-du { background: var(--color-accent); }
.mk4-ketten, .mk4-kette { background: var(--mk4-ink); box-shadow: none; }
.mk4-video-bild figure { box-shadow: 0 1px 2px rgba(15, 16, 36, .05), 0 12px 28px -16px rgba(20, 21, 43, .3); border-radius: 16px; }
.mk4-pfeil, .mk4-kette-hinweis::before { color: var(--mk4-accent-on-ink); }
.mk4-kette-hinweis { background: rgba(255, 255, 255, .06); border-color: var(--mk4-line-dark); }
.mk4-rl.ist-e, .mk4-rl.ist-q, .mk4-rl.ist-p { background: rgba(255, 255, 255, .08); color: var(--mk4-accent-on-ink); }

/* ---- overall system picture (mk3-system.css): flat ink, one accent ---- */
.sys { --sys-grund: var(--mk4-ink); }
.sys-bild.ist-system, .sys-bild.ist-agenten, .sys-bild.ist-werkstatt { background: var(--mk4-ink); }
.sys-bild { border-radius: 16px; }
.sys-kopf h3, .sys-app-kopf h4 { font-weight: 600; }
.sys-app { border-top-width: 2px; border-radius: 12px; }
.sys-app.ist-crm, .sys-app.ist-hub, .sys-app.ist-monitoring { border-top-color: var(--color-accent); }
.sys-schritt { border-top-width: 2px; }
.sys-schritt.ist-wenn, .sys-schritt.ist-verstehe, .sys-schritt.ist-schau, .sys-schritt.ist-entscheide,
.sys-schritt.ist-tu, .sys-schritt.ist-skill, .sys-schritt.ist-plugin, .sys-schritt.ist-markt { border-top-color: var(--color-neutral-700); }
.sys-schritt.ist-verstehe, .sys-schritt.ist-markt { border-top-color: var(--color-accent); }
.sys-schritt .sys-schritt-art { color: var(--color-neutral-700); }
.sys-schritt.ist-verstehe .sys-schritt-art, .sys-schritt.ist-markt .sys-schritt-art { color: var(--color-accent-600); }
.sys-modus.ist-skill, .sys-modus.ist-plugin, .sys-modus.ist-vorschlag, .sys-modus.ist-auto, .sys-modus.ist-ziel {
  border-color: var(--mk4-line-dark);
  color: var(--mk4-on-ink);
}
.sys-modus.ist-vorschlag { border-color: var(--mk4-accent-on-ink); color: var(--mk4-accent-on-ink); }
.sys-pill { font-weight: 600; background: var(--color-accent); }

/* ---- focus and motion ---- */
a:focus-visible, .btn:focus-visible, .mk4-karte:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .btn, .mk4-karte, .mk2-kachel { transition: none; } }