/* =====================================================================
   Byte Vision — Stylesheet
   Self-contained: design tokens + components + layout.
   Fonts are loaded separately via fonts.css (self-hosted, DSGVO-konform).
   ===================================================================== */

/* ----------------------------- Tokens ------------------------------ */
:root {
  /* Brand blue scale */
  --blue-50:#eef0fc; --blue-100:#dadefb; --blue-200:#b4bdf4; --blue-300:#8893ec;
  --blue-400:#5160df; --blue-500:#2c39c9; --blue-600:#1820ad; --blue-700:#0c1499;
  --blue-800:#060d8f; --blue-900:#040a87; --blue-950:#030760;

  /* Ink / neutral scale */
  --ink-950:#07080d; --ink-900:#0e1018; --ink-800:#1b1e2a; --ink-700:#2c3040;
  --ink-600:#444a5e; --ink-500:#5f6678; --ink-400:#868c9d; --ink-300:#b0b5c2;
  --ink-200:#d4d7df; --ink-100:#e8eaee; --ink-50:#f4f5f8; --white:#ffffff;

  /* Semantic */
  --success:#1f8a4c; --success-bg:#e6f4ec;
  --warning:#b5740b; --warning-bg:#fbf0dc;
  --danger:#c5283d;  --danger-bg:#fbe7ea;
  --info:var(--blue-500); --info-bg:var(--blue-50);

  /* Aliases */
  --brand:var(--blue-900); --brand-strong:var(--blue-950); --brand-interactive:var(--blue-500);
  --bg-page:var(--white); --bg-subtle:var(--ink-50); --bg-sunken:var(--ink-100);
  --bg-inverse:var(--ink-950); --bg-brand:var(--blue-900);
  --surface-card:var(--white); --surface-raised:var(--white);
  --text-strong:var(--ink-950); --text-body:var(--ink-800); --text-muted:var(--ink-500);
  --text-faint:var(--ink-400); --text-on-brand:var(--white); --text-link:var(--blue-500);
  --border-subtle:var(--ink-100); --border-default:var(--ink-200); --border-strong:var(--ink-300);
  --border-brand:var(--blue-900); --focus-ring:var(--blue-500);

  /* Typography */
  --font-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --font-sans:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;

  /* Spacing (4px grid) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem; --space-10:5rem;
  --space-11:6rem; --space-12:8rem;
  --container-max:1200px; --container-pad:1.5rem;

  /* Radius */
  --radius-xs:3px; --radius-sm:5px; --radius-md:8px; --radius-lg:12px;
  --radius-xl:18px; --radius-2xl:28px; --radius-pill:999px;

  /* Shadows */
  --shadow-xs:0 1px 2px rgba(7,8,13,.06);
  --shadow-sm:0 1px 2px rgba(7,8,13,.06),0 2px 6px rgba(7,8,13,.05);
  --shadow-md:0 2px 4px rgba(7,8,13,.05),0 8px 20px rgba(7,8,13,.08);
  --shadow-lg:0 8px 16px rgba(7,8,13,.06),0 20px 48px rgba(7,8,13,.12);
  --shadow-brand:0 10px 30px rgba(4,10,135,.28);
  --focus-ring-color:rgba(44,57,201,.4);
}

/* ----------------------------- Reset ------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg-page);color:var(--text-body);
  font-family:var(--font-sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:var(--text-link);text-decoration:none}
h1,h2,h3,h4,p{margin:0}
::selection{background:var(--blue-200)}
:focus-visible{outline:3px solid var(--focus-ring-color);outline-offset:2px;border-radius:var(--radius-xs)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;background:var(--blue-900);
  color:#fff;padding:10px 16px;border-radius:0 0 var(--radius-md) 0;font-weight:600;
}
.skip-link:focus{left:0}

/* Icon helper (uses sprite symbols) */
.ic{width:24px;height:24px;flex:none;stroke-width:1.85;fill:none;stroke:currentColor;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------------------------- Layout ------------------------------- */
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.section{padding:var(--space-12) 0}
.section--subtle{background:var(--bg-subtle)}
.section__head{max-width:640px}
.measure{max-width:46ch}

/* ---------------------------- Kicker ------------------------------- */
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  font:500 13px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-500);
}
.kicker::before{content:"//";color:var(--blue-400);font-weight:600}
.kicker--light{color:var(--blue-200)}
.kicker--light::before{color:var(--blue-300)}

/* --------------------------- Headings ------------------------------ */
.h1{font:700 clamp(40px,5vw,68px)/1.02 var(--font-display);letter-spacing:-.03em;
  color:var(--text-strong);text-wrap:balance}
.h2{font:700 clamp(30px,3.4vw,44px)/1.08 var(--font-display);letter-spacing:-.025em;
  color:var(--text-strong);text-wrap:balance}
.h2--lg{font-size:clamp(30px,3.6vw,48px);line-height:1.06;letter-spacing:-.03em}
.lead{font:400 18px/1.6 var(--font-sans);color:var(--text-muted)}
.lead--lg{font-size:19px}

/* ---------------------------- Buttons ------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:600;letter-spacing:-.01em;
  border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:background 160ms ease,border-color 160ms ease,transform 120ms ease,box-shadow 160ms ease;
}
.btn .ic{width:16px;height:16px;stroke-width:2}
.btn--sm{padding:8px 14px;font-size:14px}
.btn--md{padding:11px 18px;font-size:15px}
.btn--lg{padding:14px 24px;font-size:16px}
.btn--full{width:100%}
.btn--primary{background:var(--blue-900);color:#fff}
.btn--primary:hover{background:var(--blue-950);transform:translateY(-1px);box-shadow:var(--shadow-brand)}
.btn--primary:active{transform:translateY(0)}
.btn--secondary{background:var(--white);color:var(--text-strong);border-color:var(--border-default)}
.btn--secondary:hover{background:var(--ink-50);border-color:var(--border-strong)}
.btn--ghost{background:transparent;color:var(--blue-700)}
.btn--ghost:hover{background:var(--blue-50)}

/* ----------------------------- Cards ------------------------------- */
.card{
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
}
.card--pad{padding:var(--space-6)}
.card--md{box-shadow:var(--shadow-md)}
.card--interactive{transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease}
.card--interactive:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--border-default)}

/* --------------------------- Icon chip ----------------------------- */
.chip{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:var(--radius-md)}
.chip--46{width:46px;height:46px}
.chip--44{width:44px;height:44px}
.chip--48{width:48px;height:48px}
.chip--38{width:38px;height:38px}
.chip--blue{background:var(--blue-50);color:var(--blue-900)}
.chip--brand{background:var(--blue-900);color:#fff}
.chip--glass{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:#fff}
.chip--outline{background:var(--bg-subtle);border:1px solid var(--border-subtle);color:var(--blue-900)}
.chip .ic{width:23px;height:23px}
.chip--38 .ic{width:18px;height:18px}

/* ----------------------------- Logo -------------------------------- */
.bv-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;line-height:1}
.bv-logo__mark{width:26px;height:26px;flex:none}
.bv-logo__word{font:400 21px/1 var(--font-display);letter-spacing:-.02em;color:var(--text-strong)}
.bv-logo__word b{font-weight:700}
.bv-logo--inverse .bv-logo__word{color:#fff}

/* ---------------------------- Header ------------------------------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0);
  border-bottom:1px solid transparent;
  transition:background 200ms ease,border-color 200ms ease}
.site-header.is-scrolled{
  background:rgba(255,255,255,.82);border-bottom-color:var(--border-subtle);
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--container-pad);max-width:var(--container-max);margin:0 auto}
.nav{display:flex;align-items:center;gap:var(--space-6)}
.nav__link{font-size:15px;font-weight:500;color:var(--text-body);letter-spacing:-.01em;
  transition:color 140ms ease}
.nav__link:hover{color:var(--blue-500)}
.nav__toggle{display:none;background:none;border:1px solid var(--border-default);
  border-radius:var(--radius-md);padding:8px;cursor:pointer;color:var(--text-strong)}
.nav__toggle .ic{width:22px;height:22px}

/* ----------------------------- Hero -------------------------------- */
.hero{position:relative;overflow:hidden}
.hero__grid{position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:linear-gradient(var(--ink-100) 1px,transparent 1px),
    linear-gradient(90deg,var(--ink-100) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 0%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 60% 0%,#000 30%,transparent 75%)}
.hero__inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;
  gap:var(--space-9);align-items:center;
  padding:var(--space-11) var(--container-pad) var(--space-12);
  max-width:var(--container-max);margin:0 auto}
.hero__actions{display:flex;gap:var(--space-3);margin-top:var(--space-7);flex-wrap:wrap}

/* --------------------------- Terminal ------------------------------ */
.terminal{position:relative}
.terminal__win{background:var(--ink-950);border:1px solid var(--ink-800);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.terminal__bar{display:flex;align-items:center;gap:8px;padding:14px 18px;
  border-bottom:1px solid var(--ink-800)}
.terminal__dot{width:11px;height:11px;border-radius:50%}
.terminal__title{margin-left:10px;font:500 12px var(--font-mono);color:var(--ink-400)}
.terminal__body{padding:20px 22px;font:400 13.5px/2 var(--font-mono)}
.terminal__row{display:flex;gap:10px;white-space:nowrap;overflow:hidden}
.cursor{width:9px;height:17px;background:var(--blue-300);display:inline-block;
  animation:bv-blink 1.1s step-end infinite}
@keyframes bv-blink{0%,100%{opacity:1}50%{opacity:0}}
.badge-float{position:absolute;background:var(--white);border-radius:var(--radius-pill);
  box-shadow:var(--shadow-md);padding:8px 14px;display:flex;align-items:center;gap:8px;
  font:600 13px var(--font-sans);color:var(--text-strong);white-space:nowrap}
.badge-float .ic{width:16px;height:16px;stroke-width:2.2}
.badge-float--tr{right:-14px;top:-16px}
.badge-float--tl{left:-14px;top:-16px}

/* --------------------------- Grids --------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-9);align-items:center}
.mt-8{margin-top:var(--space-8)}

/* ------------------------- Service card ---------------------------- */
.service{display:flex;flex-direction:column;gap:14px}
.service__title{font:600 20px var(--font-display);letter-spacing:-.01em;color:var(--text-strong)}
.service__body{font:400 15px/1.6 var(--font-sans);color:var(--text-muted)}

/* ----------------------------- Steps ------------------------------- */
.step__head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.step__num{font:500 13px var(--font-mono);color:var(--text-faint);letter-spacing:.04em}
.step__title{font:600 19px var(--font-display);letter-spacing:-.01em;color:var(--text-strong);margin-bottom:8px}
.step__body{font:400 14.5px/1.6 var(--font-sans);color:var(--text-muted)}

/* ------------------------------ KI --------------------------------- */
.feature{display:flex;align-items:flex-start;gap:14px}
.feature__title{font:600 17px var(--font-display);letter-spacing:-.01em;color:var(--text-strong);margin-bottom:3px}
.feature__body{font:400 15px/1.55 var(--font-sans);color:var(--text-muted)}
.feature-list{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-7)}
.assistant__label{font:500 11px var(--font-mono);text-transform:uppercase;letter-spacing:.12em;margin-bottom:7px}
.assistant__q{color:var(--blue-300)}
.assistant__a{color:var(--ink-500)}
.assistant__text{font:400 14.5px/1.55 var(--font-sans);color:#e7eaff}
.assistant__point{display:flex;gap:10px;align-items:flex-start}
.assistant__point span:first-child{width:6px;height:6px;border-radius:50%;background:var(--blue-300);margin-top:7px;flex:none}
.assistant__point span:last-child{font:400 14px/1.5 var(--font-sans);color:var(--ink-300)}
.assistant__source{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:5px 11px;
  border-radius:var(--radius-pill);background:rgba(255,255,255,.06);border:1px solid var(--ink-800);
  font:400 11.5px var(--font-mono);color:var(--ink-400)}

/* ---------------------------- Prinzip ------------------------------ */
.principle{position:relative;background:var(--blue-900);overflow:hidden}
.principle__mark{position:absolute;right:-60px;top:-40px;opacity:.08;color:#fff;width:486px;height:360px}
.principle__inner{position:relative;padding:var(--space-12) var(--container-pad);
  max-width:var(--container-max);margin:0 auto}
.pillar__title{font:600 21px var(--font-display);letter-spacing:-.01em;color:#fff;margin:0 0 8px}
.pillar__body{font:400 15px/1.6 var(--font-sans);color:var(--blue-100)}
.grid-3--wide{gap:var(--space-7);margin-top:var(--space-9)}

/* ---------------------------- Kontakt ------------------------------ */
.contact__row{display:flex;align-items:center;gap:12px}
.contact__row span:last-child{font:500 16px var(--font-sans);color:var(--text-body)}
.contact__list{display:flex;flex-direction:column;gap:14px;margin-top:var(--space-7)}

/* ----------------------------- Form -------------------------------- */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font:600 13px var(--font-sans);color:var(--text-strong)}
.field input,.field textarea{
  font-family:var(--font-sans);font-size:15px;color:var(--text-strong);
  padding:12px 14px;border:1px solid var(--border-default);border-radius:var(--radius-md);
  background:#fff;outline:none;width:100%;transition:border-color 140ms ease,box-shadow 140ms ease}
.field input:focus,.field textarea:focus{border-color:var(--blue-500);box-shadow:0 0 0 3px var(--focus-ring-color)}
.field textarea{resize:vertical;min-height:104px}
.form{display:flex;flex-direction:column;gap:16px}
.form__consent{display:flex;align-items:flex-start;gap:10px;font:400 13px/1.5 var(--font-sans);color:var(--text-muted)}
.form__consent input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--blue-900)}
.form__note{font:400 12.5px var(--font-sans);color:var(--text-faint);text-align:center}
.form-success{text-align:center;padding:28px 12px}
.form-success__icon{width:60px;height:60px;border-radius:50%;background:var(--success-bg);
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--success)}
.form-success__icon .ic{width:30px;height:30px;stroke-width:2.4}
.form-success h3{font:600 24px var(--font-display);color:var(--text-strong);letter-spacing:-.01em;margin-bottom:8px}
.is-hidden{display:none!important}

/* ----------------------------- Footer ------------------------------ */
.site-footer{background:var(--ink-950);color:var(--ink-300)}
.site-footer__inner{padding:var(--space-10) var(--container-pad) var(--space-7);
  max-width:var(--container-max);margin:0 auto}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-7)}
.footer__about{font:400 15px/1.6 var(--font-sans);color:var(--ink-400);margin:18px 0 0;max-width:30ch}
.footer__slogan{font:500 13px var(--font-mono);color:var(--blue-300);letter-spacing:.06em;margin-top:18px}
.footer__head{font:600 13px var(--font-mono);text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-500);margin-bottom:16px}
.footer__links{display:flex;flex-direction:column;gap:11px}
.footer__links a{font:400 15px var(--font-sans);color:var(--ink-300);transition:color 140ms ease}
.footer__links a:hover{color:#fff}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;
  margin-top:var(--space-9);padding-top:var(--space-5);border-top:1px solid var(--ink-800)}
.footer__copy{font:400 13px var(--font-sans);color:var(--ink-500)}
.footer__social{display:flex;gap:14px}
.footer__social a{display:inline-flex;color:var(--ink-400);transition:color 140ms ease}
.footer__social a:hover{color:#fff}
.footer__social .ic{width:19px;height:19px;stroke-width:1.8}

/* --------------------------- Legal pages --------------------------- */
.legal{padding:calc(var(--space-9) + 40px) 0 var(--space-11)}
.legal__inner{max-width:760px;margin:0 auto;padding:0 var(--container-pad)}
.legal h1{font:700 clamp(32px,4vw,46px)/1.05 var(--font-display);letter-spacing:-.03em;
  color:var(--text-strong);margin-bottom:10px}
.legal__updated{font:400 14px var(--font-sans);color:var(--text-faint);margin-bottom:var(--space-7)}
.legal h2{font:600 24px var(--font-display);letter-spacing:-.01em;color:var(--text-strong);
  margin:var(--space-8) 0 var(--space-3)}
.legal h3{font:600 18px var(--font-display);color:var(--text-strong);margin:var(--space-6) 0 var(--space-2)}
.legal p,.legal li{font:400 16px/1.7 var(--font-sans);color:var(--text-body)}
.legal p{margin-bottom:var(--space-4)}
.legal ul,.legal ol{margin:0 0 var(--space-4);padding-left:1.4em}
.legal li{margin-bottom:6px}
.legal a{color:var(--blue-500);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--blue-700)}
.legal strong{color:var(--text-strong)}
.legal__back{display:inline-flex;align-items:center;gap:8px;margin-top:var(--space-8);
  font-weight:600;color:var(--blue-700)}
.legal__back .ic{width:16px;height:16px;transform:rotate(180deg);stroke-width:2}
.placeholder{background:var(--warning-bg);color:#7a4e06;border-radius:var(--radius-xs);
  padding:1px 6px;font-weight:600;font-size:.95em}
.legal table{border-collapse:collapse;width:100%;margin-bottom:var(--space-4)}
.legal th,.legal td{border:1px solid var(--border-default);padding:8px 12px;text-align:left;
  font:400 15px/1.5 var(--font-sans);vertical-align:top}
.legal th{background:var(--bg-subtle);font-weight:600;color:var(--text-strong)}

/* ------------------------- Cookie banner --------------------------- */
.cookie{position:fixed;left:var(--space-5);right:var(--space-5);bottom:var(--space-5);z-index:120;
  max-width:520px;margin-left:auto;background:#fff;border:1px solid var(--border-default);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:18px 20px;
  display:flex;flex-direction:column;gap:12px}
.cookie p{font:400 14px/1.55 var(--font-sans);color:var(--text-body)}
.cookie a{color:var(--blue-600);text-decoration:underline}
.cookie__actions{display:flex;gap:10px;justify-content:flex-end}

/* --------------------------- Responsive ---------------------------- */
@media (max-width:960px){
  .hero__inner{grid-template-columns:1fr;gap:var(--space-8);padding-top:var(--space-9)}
  .grid-2{grid-template-columns:1fr;gap:var(--space-7)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr);gap:var(--space-7)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-7) var(--space-6)}
  .principle__mark{display:none}
}
@media (max-width:680px){
  .section{padding:var(--space-10) 0}
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-md);
    padding:8px var(--container-pad) 18px;transform:translateY(-130%);transition:transform 220ms ease;
    z-index:40}
  .nav.is-open{transform:translateY(0)}
  .nav__link{padding:13px 0;border-bottom:1px solid var(--border-subtle);font-size:16px}
  .nav .btn{margin-top:12px;justify-content:center}
  .nav__toggle{display:inline-flex}
  .grid-3,.grid-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer__bottom{flex-direction:column;gap:16px;align-items:flex-start}
  .hero__actions .btn{flex:1 1 auto}
  .cookie{left:var(--space-4);right:var(--space-4);bottom:var(--space-4)}
}

/* --------------------------- Motion pref --------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}