/* Shared across the marketing pages (index, referenz, integration).
   Loaded AFTER each page's inline <style>, so these rules win on equal
   specificity. First step towards one stylesheet for the whole site; the
   page tokens (--bg, --line, --accent, …) still come from each page. */

/* anchor jumps land below the sticky header */
[id]{scroll-margin-top:72px}

/* skip link — visible only when focused */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--accent-ink);
  font-weight:700;padding:10px 16px;border-radius:9px}
.skip:focus{top:12px;text-decoration:none}

/* one visible focus style for every interactive element */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* header: brand · links · actions (CTA + mobile menu button) */
.nav .wrap{gap:20px}
.navlinks{margin-left:auto}
.nav-actions{display:flex;align-items:center;gap:10px}
.menu-toggle{display:none;align-items:center;justify-content:center;gap:8px;min-height:38px;min-width:42px;position:relative;background:transparent;color:var(--ink);
  border:1px solid var(--line-2);border-radius:9px;padding:7px 12px;font:inherit;font-size:14px;cursor:pointer}
.menu-toggle .bars{display:inline-block;width:16px;height:2px;background:currentColor;position:relative}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.menu-toggle .bars::before{top:-5px} .menu-toggle .bars::after{top:5px}
.menu-toggle[aria-expanded="true"] .bars{background:transparent}
.menu-toggle[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}

@media(max-width:820px){
  .menu-toggle{display:inline-flex}
  .nav .wrap{gap:10px}
  .navlinks,.navlinks a:not(.btn){display:none}
  .navlinks.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:6px 24px 14px;
    box-shadow:0 18px 30px #00000066}
  .navlinks.open a{display:block;padding:13px 0;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line)}
  .navlinks.open a:last-child{border-bottom:0}
}
@media(max-width:400px){
  .nav-actions .btn{padding:7px 12px}
  .menu-toggle .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn:hover{transform:none}
}