/* ═══════════════════════════════════════════════════════════════════════════
   vc-dokument.css — Erklärseiten im Stil eines professionellen Dokuments

   Betreiber 17.09.2026 (Bild „Für beide Seiten gemacht / Sicherheit ist eingebaut"):
   „alles, was erklärt, soll professionell aussehen — keine Einfärbungsblöcke,
   nicht so umranden, keine Symbole; wie ein professionelles Dokument statt Farben.
   Die Fragen und Antworten kannst du lassen. Kein AI-Slop."

   Gilt für: so-funktioniert-es.html · fuer-kunden.html · fuer-anbieter.html ·
   enterprise.html · faq.html (dort NUR der Schluss-Block „Noch Fragen?" — die
   Fragen/Antworten, die Themen-Reiter und die Suche bleiben unberührt).
   Rechtsseiten und „Sicher handeln" sind bereits Dokumente — nicht eingebunden.

   Nur Darstellung: Karten ohne Fläche/Rand/Schatten, Symbole ausgeblendet, Schrift
   in Text- und Nebenfarbe, Handlungs-Knöpfe als unterstrichene Textverweise.
   Kein Markup, keine Funktion geändert. Hell + dunkel über die Variablen unten.
   Stärke `html:not(#vcdok) body` (zählt wie eine Kennung) + !important, weil die
   Seiten- und Laufzeit-Blätter (vc-dark, vc-knopfdesign, faq --fp-*) sonst gewinnen.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{--vdok-bg:#ffffff;--vdok-text:#0F1722;--vdok-mut:#4B5563;--vdok-line:#E4E8EF}
html[data-theme="dark"]{--vdok-bg:#0f0f12;--vdok-text:#E8EDF5;--vdok-mut:#A0AABA;--vdok-line:#28282e}

/* Seitengrund: enterprise.html setzt body fest auf #fff (ohne Dunkel-Regel) */
html:not(#vcdok) body{background:var(--vdok-bg)!important;color:var(--vdok-text)}

/* ── Kopf ── */
html:not(#vcdok) body .phero .kick{color:var(--vdok-mut)!important;font-weight:600!important;letter-spacing:.04em!important;text-transform:uppercase!important;font-size:.74rem!important}
html:not(#vcdok) body .phero h1,html:not(#vcdok) body .psec h2,html:not(#vcdok) body .psec h3,html:not(#vcdok) body .cta-band h2{color:var(--vdok-text)!important}
html:not(#vcdok) body .phero p,html:not(#vcdok) body .psec .lead,html:not(#vcdok) body .psec p,html:not(#vcdok) body .cta-band p{color:var(--vdok-mut)!important}

/* ── Schritte: Nummer als Text, kein Kästchen ── */
html:not(#vcdok) body .step{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
html:not(#vcdok) body .step-n{display:block!important;width:auto!important;height:auto!important;background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  color:var(--vdok-mut)!important;font-weight:600!important;font-size:.9rem!important;margin:0 0 .35rem!important;padding:0!important}
html:not(#vcdok) body .step-n::after{content:"."}

/* ── Karten und Tafeln: reiner Text ── */
html:not(#vcdok) body .fcard,html:not(#vcdok) body .panel,html:not(#vcdok) body .bcard,
html:not(#vcdok) body .enterprise-fcard{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
html:not(#vcdok) body .fcard h3,html:not(#vcdok) body .panel h3,html:not(#vcdok) body .bcard h3{color:var(--vdok-text)!important;display:block!important}
html:not(#vcdok) body .fcard p,html:not(#vcdok) body .bcard p{color:var(--vdok-mut)!important}
html:not(#vcdok) body .feat,html:not(#vcdok) body .grid{gap:2rem 2.5rem!important}
html:not(#vcdok) body .two{gap:2rem 2.5rem!important}

/* ── Symbole aus ── */
html:not(#vcdok) body .fcard .ic,html:not(#vcdok) body .bcard .ic,html:not(#vcdok) body .panel h3 svg,
html:not(#vcdok) body .catlink .ic,html:not(#vcdok) body .catlink svg,html:not(#vcdok) body .crow .ci,
html:not(#vcdok) body .hero-tag .dot,html:not(#vcdok) body .phero .btn svg,html:not(#vcdok) body .psec .btn svg,
html:not(#vcdok) body .cta-band .btn svg,html:not(#vcdok) body .hero .btn svg,html:not(#vcdok) body .contact .btn svg,
html:not(#vcdok) body .fbtn svg{display:none!important}

/* ── Aufzählungen: schlichter Punkt in Textfarbe ── */
html:not(#vcdok) body .panel li{color:var(--vdok-text)!important;padding-left:1.1rem!important}
html:not(#vcdok) body .panel li::before{background:var(--vdok-mut)!important;width:4px!important;height:4px!important;top:.68rem!important}

/* ── Kategorien: Liste von Textverweisen ── */
html:not(#vcdok) body .catgrid{gap:.55rem 2rem!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important}
html:not(#vcdok) body .catlink{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;
  font-weight:500!important;color:var(--vdok-text)!important;text-decoration:underline!important;text-decoration-color:var(--vdok-line)!important;text-underline-offset:4px!important}
html:not(#vcdok) body .catlink:hover{text-decoration-color:currentColor!important}

/* ── Schluss-Block „Bereit loszulegen?" / „Noch Fragen?" ── */
html:not(#vcdok) body .cta-band,html:not(#vcdok)[data-theme="dark"] body .cta-band{background:none!important;border:0!important;border-top:1px solid var(--vdok-line)!important;
  border-radius:0!important;box-shadow:none!important;padding:2.2rem 0 0!important;text-align:left!important}
html:not(#vcdok) body .cta-band p{margin-left:0!important;margin-right:0!important}
html:not(#vcdok) body .btn-row,html:not(#vcdok) body .hero-cta{justify-content:flex-start!important;gap:.6rem 1.8rem!important}

/* ── Handlungs-Knöpfe: unterstrichener Textverweis ── */
html:not(#vcdok) body .phero .btn,html:not(#vcdok) body .psec .btn,html:not(#vcdok) body .cta-band .btn,
html:not(#vcdok) body .hero .btn,html:not(#vcdok) body .contact .btn,html:not(#vcdok) body .fbtn{
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;min-height:0!important;width:auto!important;
  color:var(--vdok-text)!important;font-weight:600!important;text-decoration:underline!important;text-underline-offset:4px!important;transform:none!important}
html:not(#vcdok) body .phero .btn:hover,html:not(#vcdok) body .psec .btn:hover,html:not(#vcdok) body .cta-band .btn:hover,
html:not(#vcdok) body .hero .btn:hover,html:not(#vcdok) body .contact .btn:hover,html:not(#vcdok) body .fbtn:hover{color:var(--vdok-mut)!important;background:none!important}

/* ══ Enterprise ══ */
html:not(#vcdok) body .hero{background:var(--vdok-bg)!important;background-image:none!important;color:var(--vdok-text)!important;border-bottom:1px solid var(--vdok-line)!important}
html:not(#vcdok) body .hero::before,html:not(#vcdok) body .hero::after{display:none!important}
html:not(#vcdok) body .hero h1,html:not(#vcdok) body .hero h1 b{color:var(--vdok-text)!important}
html:not(#vcdok) body .hero p{color:var(--vdok-mut)!important}
html:not(#vcdok) body .hero-tag{background:none!important;border:0!important;border-radius:0!important;padding:0!important;color:var(--vdok-mut)!important;
  font-weight:600!important;letter-spacing:.04em!important;text-transform:uppercase!important;font-size:.74rem!important}
html:not(#vcdok) body section,html:not(#vcdok) body .sec{background:var(--vdok-bg)!important}
html:not(#vcdok) body .sec-h{color:var(--vdok-text)!important}
html:not(#vcdok) body .sec-sub{color:var(--vdok-mut)!important}
html:not(#vcdok) body .contact{background:var(--vdok-bg)!important;color:var(--vdok-text)!important;border-top:1px solid var(--vdok-line)!important}
html:not(#vcdok) body .contact h2{color:var(--vdok-text)!important}
html:not(#vcdok) body .contact .lead,html:not(#vcdok) body .crow .ct{color:var(--vdok-mut)!important}
html:not(#vcdok) body .crow .cv,html:not(#vcdok) body .crow .cv a{color:var(--vdok-text)!important}
html:not(#vcdok) body .contact .fcard{background:none!important;color:var(--vdok-text)!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important}
html:not(#vcdok) body .contact .fcard h3{color:var(--vdok-text)!important}
html:not(#vcdok) body .contact .fsub,html:not(#vcdok) body .contact .fnote{color:var(--vdok-mut)!important;text-align:left!important}
html:not(#vcdok) body .fg label{color:var(--vdok-text)!important}
html:not(#vcdok) body .fg input,html:not(#vcdok) body .fg textarea{background:transparent!important;color:var(--vdok-text)!important;border:0!important;
  border-bottom:1px solid var(--vdok-line)!important;border-radius:0!important;box-shadow:none!important;padding-left:0!important;padding-right:0!important}
html:not(#vcdok) body .fg input:focus,html:not(#vcdok) body .fg textarea:focus{border-bottom-color:var(--vdok-text)!important;box-shadow:none!important}
html:not(#vcdok) body .fbtn{justify-content:flex-start!important;font-size:.95rem!important;cursor:pointer}