:root{--ink:#111827;--muted:#667085;--purple:#6d5bd0;--green:#237a48;--shadow:0 14px 40px rgba(31,55,100,.10)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:linear-gradient(180deg,#eaf2ff 0%,#f4f8ff 42%,#fff 100%);min-height:100vh}

/* Header / Menüband */
header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:16px 40px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 1px 10px rgba(0,0,0,.05)}
.brand img{height:68px;max-width:255px;object-fit:contain;display:block}
nav{padding-top:0}
nav a{margin-left:22px;color:#444;text-decoration:none;font-size:15px}
nav a:hover{color:#111}
.nav-toggle{display:none;background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:#111;padding:6px 4px}

/* Footer */
footer{text-align:center;padding:34px 20px;border-top:1px solid #e9edf3;background:#fff}
footer a{color:#667085;text-decoration:none;margin:0 12px;font-size:14px}
footer .linkedin-link{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:#0077b5;border-radius:6px;vertical-align:middle}
footer .linkedin-link svg{width:15px;height:15px;fill:#fff}
footer .linkedin-link:hover{background:#005e93}
.service{display:block;margin-top:16px;color:var(--purple);font-weight:550}
.version{position:fixed;left:10px;bottom:9px;color:#bcc7dc;font-size:11px}

/* Pill-Label (auf Karten) */
.pill{display:inline-block;background:#eaf7ee;color:var(--green);border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800;margin-bottom:15px}

/* Übergangs-Wartebildschirm (z. B. QuickCheck → Ergebnis, Excel-Analyse → Auswertung) */
.result-card{display:none;max-width:760px;margin:32px auto;background:#fff;border-radius:24px;padding:44px;text-align:center;box-shadow:var(--shadow)}
.result-card h2{font-size:32px;margin-top:0}
.spinner{width:38px;height:38px;border:4px solid #dfe7f7;border-top-color:#587ff3;border-radius:50%;margin:24px auto;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.checks{display:inline-block;text-align:left;line-height:2;color:#40516b}

/* Mobile: Hamburger-Menü */
@media(max-width:820px){
  header{padding:12px 18px;align-items:center}
  .brand img{height:54px}
  nav{display:none}
  nav.open{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#fff;padding:14px 20px;box-shadow:0 12px 24px rgba(0,0,0,.12);z-index:30}
  nav.open a{margin:0;padding:12px 0;border-bottom:1px solid #eee}
  .nav-toggle{display:block}
}