/* ============================================================
   Vendor Pilot — vendorpilot.de
   Farbwelt: Dunkelblau / Weiß / Signalgrün
   Schrift: RobotoFlex (Überschriften) / NunitoFlex (Fließtext) — selbst
   gehostet, siehe /fonts/
   ============================================================ */

@font-face{
  font-family:'RobotoFlex';
  src:url('fonts/roboto-flex/RobotoFlex-VariableFont.woff2') format('woff2-variations');
  font-weight:100 1000;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'NunitoFlex';
  src:url('fonts/nunito-flex/NunitoFlex-VariableFont.woff2') format('woff2-variations');
  font-weight:200 1000;
  font-style:normal;
  font-display:swap;
}

:root{
  --navy:#0B2545;
  --ink:#101B2E;
  --gray:#57616F;
  --line:#DCE3EA;
  --paper:#FFFFFF;
  --paper-soft:#F1F5F9;
  --green-bright:#2FC12F;   /* Akzente auf Dunkelblau */
  --green:#1D9E1D;          /* Buttons, große Akzente auf Weiß */
  --green-deep:#157515;     /* Links, kleine Akzente auf Weiß */
  --green-tint:#E9F7E9;
  --risk-low:#1D9E1D;
  --risk-mid:#B36F10;
  --risk-high:#C03A2E;
  --input-border:#7C8FA0;  /* dunkler als --line: Formularfelder brauchen 3:1 (WCAG 1.4.11) */
  --font-heading:"RobotoFlex",-apple-system,"Segoe UI",Arial,sans-serif;
  --font-body:"NunitoFlex",-apple-system,"Segoe UI",Arial,sans-serif;
  --radius:10px;
  --container:1140px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:92px}

/* ---------- Barrierefreiheit ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
     overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;top:-48px;left:12px;z-index:100;background:var(--navy);
     color:#fff;padding:10px 18px;border-radius:0 0 8px 8px;font-weight:700;
     transition:top .15s ease-out}
.skip-link:focus{top:0}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);
     font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}

/* ---------- Typografie ---------- */
h1,h2,h3{font-family:var(--font-heading);line-height:1.12;letter-spacing:-0.02em;text-wrap:balance}
h1{font-size:clamp(2.5rem,5.2vw,3.9rem);font-weight:800}
h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800}
h3{font-size:1.25rem;font-weight:700;letter-spacing:-0.01em}
p{max-width:68ch}
.lede{font-size:1.2rem;color:var(--gray);max-width:60ch}
.accent{color:var(--green)}
.on-dark .accent{color:var(--green-bright)}
a{color:var(--green-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
strong{font-weight:700}

/* ---------- Header ---------- */
.site-header{background:var(--navy);position:sticky;top:0;z-index:50}
.site-header .container{display:flex;align-items:center;gap:28px;height:76px;max-width:1280px}
.brand{display:flex;align-items:center;gap:10px}
.brand:hover{text-decoration:none}
.brand .mark{width:30px;height:30px;flex:none}
.brand-name{font-family:var(--font-heading);font-size:1.3rem;font-weight:800;
     letter-spacing:-0.01em;color:#fff;white-space:nowrap}
.brand-name em{font-style:normal;color:var(--green-bright)}
.nav{display:flex;gap:20px;margin-left:auto;align-items:center}
.nav a{color:#D9DFE8;font-weight:600;font-size:.95rem;white-space:nowrap}
.nav a:hover{color:#fff;text-decoration:none}
.nav a[aria-current="page"]{color:var(--green-bright)}
/* Im Menü ist die Button-Schrift klein (.nav a): Weiß auf --green hätte nur
   3,5:1. Hellgrün mit dunkelblauer Schrift auf dem Kopf erreicht 6,4:1. */
.nav .btn{margin-left:10px;padding:12px 20px;background:var(--green-bright);color:var(--navy)}
.nav .btn:hover{background:#5BD85B;color:var(--navy)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid #3A4A5E;
            border-radius:8px;color:#fff;padding:8px 12px;font:inherit;font-weight:700;cursor:pointer}

/* ---------- Buttons ---------- */
.btn{display:inline-block;background:var(--green);color:#fff;font-weight:800;
     font-size:1.2rem;padding:14px 26px;border-radius:var(--radius);border:0;cursor:pointer;
     transition:background .15s ease-out,transform .15s ease-out,box-shadow .15s ease-out}
.btn:hover{background:#178A17;transform:translateY(-1px);
           box-shadow:0 6px 18px rgba(20,110,20,.25);text-decoration:none;color:#fff}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--green-bright);outline-offset:2px}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);font-weight:700}
.btn.ghost:hover{background:var(--ink);color:#fff;box-shadow:none}
.on-dark .btn.ghost{color:#fff;border-color:#fff}
.on-dark .btn.ghost:hover{background:#fff;color:var(--navy)}
.textlink{font-weight:700;color:var(--green-deep)}
.textlink::after{content:" →"}

/* ---------- Sektionen ---------- */
section{padding:84px 0}
section.tight{padding:56px 0}
.kicker{display:block;font-size:.85rem;font-weight:800;letter-spacing:.12em;
        text-transform:uppercase;color:var(--green-deep);margin-bottom:14px}
.on-dark .kicker{color:var(--green-bright)}
section h2{margin-bottom:16px}
section h2+p,section h3+p{margin-top:6px}
.section-soft{background:var(--paper-soft)}
.on-dark{background:var(--navy);color:#E8ECF2}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark p{color:#C9D3E0}
.on-dark a{color:var(--green-bright)}

/* ---------- Hero ---------- */
.hero{padding:96px 0 90px}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero h1{margin-bottom:22px}
.hero .lede{margin-bottom:34px}
.hero-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap}

/* Authoritatives Produkt-Artefakt: Registerauszug */
.report{background:#fff;border:1px solid var(--line);border-radius:14px;
        box-shadow:0 18px 50px rgba(11,37,69,.10),0 2px 8px rgba(11,37,69,.05);overflow:hidden}
.report-head{display:flex;justify-content:space-between;align-items:baseline;
             padding:16px 20px;border-bottom:1px solid var(--line)}
.report-head strong{font-size:.95rem}
.report-head span{font-size:.78rem;color:var(--gray)}
.report table{width:100%;border-collapse:collapse;font-size:.88rem}
.report td{padding:12px 20px;border-top:1px solid var(--line);vertical-align:middle}
.report tr:first-child td{border-top:0}
.report .svc{color:var(--gray);font-size:.8rem;display:block}
.chip{display:inline-block;font-size:.75rem;font-weight:800;padding:3px 10px;border-radius:99px;white-space:nowrap}
.chip.low{background:var(--green-tint);color:#116311}
.chip.mid{background:#FBF1DF;color:#8A5407}
.chip.high{background:#FAE9E7;color:#9E2C22}
.report .ok{color:var(--green-deep);font-weight:700;white-space:nowrap}
.report-alert{display:flex;gap:12px;align-items:flex-start;margin:14px 16px 16px;
              padding:13px 16px;background:var(--navy);border-radius:10px;color:#E8ECF2;font-size:.85rem}
.report-alert .dot{width:9px;height:9px;border-radius:50%;background:var(--green-bright);
                   flex:none;margin-top:6px;animation:pulse 2.2s ease-out infinite}
.report-alert strong{color:#fff}
.report-caption{font-size:.78rem;color:var(--gray);margin-top:10px;text-align:right}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,193,47,.55)}70%{box-shadow:0 0 0 9px rgba(47,193,47,0)}100%{box-shadow:0 0 0 0 rgba(47,193,47,0)}}
.report tr{opacity:0;transform:translateY(6px);animation:rise .5s cubic-bezier(.16,1,.3,1) forwards}
.report tr:nth-child(1){animation-delay:.1s}.report tr:nth-child(2){animation-delay:.22s}
.report tr:nth-child(3){animation-delay:.34s}.report tr:nth-child(4){animation-delay:.46s}
.report-alert{opacity:0;animation:rise .5s cubic-bezier(.16,1,.3,1) .62s forwards}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .report tr,.report-alert{animation:none;opacity:1;transform:none}
  .report-alert .dot{animation:none}
  .btn{transition:none}
}

/* ---------- Schritte ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);
       border-radius:14px;overflow:hidden;margin-top:40px}
.step{padding:30px 28px;background:#fff}
.step+.step{border-left:1px solid var(--line)}
.step .num{font-size:2rem;font-weight:800;color:var(--green);line-height:1}
.step h3{margin:12px 0 8px}
.step p{font-size:.95rem;color:var(--gray)}
.steps-note{margin-top:22px;font-size:1.05rem}

/* ---------- Paket-Strip ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);margin-top:40px;
       border:2px solid var(--navy);border-radius:14px;overflow:hidden}
.tier{padding:30px 28px;background:#fff}
.tier+.tier{border-left:2px solid var(--navy)}
.tier .name{font-weight:800;font-size:1.05rem}
.tier .price{font-size:2.1rem;font-weight:800;letter-spacing:-0.02em;margin:8px 0 2px}
.tier .price small{font-size:.95rem;font-weight:600;color:var(--gray);letter-spacing:0}
.tier p{font-size:.93rem;color:var(--gray)}
.tier.featured{background:var(--navy);color:#E8ECF2}
.tier.featured .name{color:var(--green-bright)}
.tier.featured .price{color:#fff}
.tier.featured .price small{color:#AEB9C7}
.tier.featured p{color:#C9D3E0}

/* ---------- Preistabellen ---------- */
.pricetable{width:100%;border-collapse:collapse;margin:36px 0 8px;font-size:.98rem}
.pricetable th{background:var(--navy);color:#fff;text-align:left;padding:14px 18px;font-weight:700}
.pricetable th:first-child{border-radius:10px 0 0 0}
.pricetable th:last-child{border-radius:0 10px 0 0}
.pricetable td{padding:13px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.pricetable .yes{color:var(--green-deep);font-weight:800}
.pricetable .no{color:#B9C1BB}
.pricetable .rowprice{font-weight:800;font-size:1.15rem;white-space:nowrap}
.pricetable tbody tr:hover{background:var(--paper-soft)}

/* ---------- FAQ ---------- */
.faq{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 4px;font-weight:700;font-size:1.05rem;list-style:none;
             display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--green);font-weight:800;font-size:1.3rem;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 4px 20px;color:var(--gray);max-width:75ch}

/* ---------- Inhalt / Artikel ---------- */
.prose{max-width:72ch}
.prose h2{margin-top:52px;margin-bottom:14px;font-size:1.6rem}
.prose p{margin-bottom:18px}
.prose ul{margin:0 0 18px 22px}
.prose li{margin-bottom:8px}
.article-head{padding:80px 0 30px}
.article-head .meta{color:var(--gray);font-size:.9rem;margin-top:16px}
.article-cta{margin:56px 0 0;padding:26px 30px;background:var(--green-tint);border-radius:14px;max-width:72ch}
.article-cta p{margin:0;max-width:none}
.backlink{display:inline-block;margin-bottom:22px;font-weight:700}

/* ---------- Video ---------- */
.video-frame{max-width:960px;border-radius:14px;overflow:hidden;background:var(--navy);
     box-shadow:0 18px 50px rgba(11,37,69,.18)}
.video-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9}
.video-note{color:var(--gray);font-size:.9rem;margin-top:12px}
.transcript{margin-top:32px;max-width:72ch;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.transcript summary{cursor:pointer;padding:16px 4px;font-weight:700}
.transcript .prose{padding:0 4px 12px}
.transcript .prose p{margin-bottom:12px}

/* ---------- Wissen-Liste ---------- */
.postlist{margin-top:44px;display:grid;gap:0;border-top:1px solid var(--line)}
.post{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
      padding:30px 4px;border-bottom:1px solid var(--line)}
.post h3{font-size:1.35rem}
.post h3 a{color:var(--ink)}
.post h3 a:hover{color:var(--green-deep);text-decoration:none}
.post p{color:var(--gray);margin-top:8px}

/* ---------- Zweispalter, Definitionen ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.deflist{margin-top:36px;display:grid;gap:0;border-top:1px solid var(--line)}
.defrow{display:grid;grid-template-columns:260px 1fr;gap:28px;padding:26px 4px;border-bottom:1px solid var(--line)}
.defrow h3{color:var(--green-deep)}
.defrow p{color:var(--gray);font-size:.98rem;max-width:none}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;margin-top:44px}
form .field{margin-bottom:20px}
form label{display:block;font-weight:700;font-size:.95rem;margin-bottom:7px}
form input,form textarea{width:100%;font:inherit;padding:13px 15px;border:2px solid var(--input-border);
     border-radius:var(--radius);background:#fff;transition:border-color .15s ease-out}
form input:focus,form textarea:focus{outline:none;border-color:var(--green)}
form textarea{min-height:150px;resize:vertical}
.consent{font-size:.85rem;color:var(--gray);margin:14px 0 22px;max-width:none}
.contact-direct{background:var(--paper-soft);border-radius:14px;padding:34px}
.contact-direct h3{margin-bottom:14px}
.contact-direct p{margin-bottom:10px}

/* ---------- CTA-Band ---------- */
.cta-band{background:var(--navy);border-radius:0;padding:76px 0}
.cta-band h2{color:#fff;margin-bottom:14px}
.cta-band p{color:#C9D3E0;margin-bottom:30px}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#AEB9C7;padding:64px 0 34px;font-size:.92rem}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.site-footer h4{color:#fff;font-size:.95rem;margin-bottom:14px}
.site-footer ul{list-style:none}
.site-footer li{margin-bottom:9px}
.site-footer a{color:#AEB9C7}
.site-footer a:hover{color:var(--green-bright);text-decoration:none}
.footer-brand .brand{margin-bottom:12px}
.footer-tag{border-top:1px solid #22304A;padding-top:26px;display:flex;
            justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-tag span{color:#8FA0B0}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero .container,.split,.contact-grid{grid-template-columns:1fr;gap:44px}
  .steps,.tiers{grid-template-columns:1fr}
  .step+.step{border-left:0;border-top:1px solid var(--line)}
  .tier+.tier{border-left:0;border-top:2px solid var(--navy)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .defrow{grid-template-columns:1fr;gap:8px}
  .pricetable{display:block;overflow-x:auto}
}
/* Menü klappt unter 1240px ein: Die Kopfzeile braucht mit allen Einträgen
   ca. 1150px, darunter würden Links zweizeilig umbrechen. */
@media (max-width:1240px){
  .nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--navy);
       flex-direction:column;align-items:flex-start;padding:18px 24px 26px;gap:18px;
       border-top:1px solid #22304A}
  .nav.open{display:flex}
  .nav-toggle{display:block}
}
@media (max-width:820px){
  section{padding:60px 0}
  .hero{padding:64px 0}
  .post{grid-template-columns:1fr}
}