/* Schriften liegen lokal bei der Seite (Ordner fonts/) statt bei Google zu
     laden - dadurch entsteht keine Verbindung zu Google-Servern und keine
     Übermittlung der Besucher-IP an Dritte (siehe LG München I, Az. 3 O 17493/20). */
  @font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
  @font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2'); }
  @font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); }
  @font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
  @font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
  @font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
  @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }
  @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); }
  @font-face{ font-family:'Poppins'; font-style:italic; font-weight:600; font-display:swap; src:url('fonts/poppins-latin-600-italic.woff2') format('woff2'); }



  :root{
    --ink: #0A1420;
    --ink-2: #101D2E;
    --ink-3: #16273A;
    --line: rgba(234,241,240,0.10);
    --signal: #22D3BC;
    --signal-dim: rgba(34,211,188,0.14);
    --alert: #FF5A4E;
    --alert-dim: rgba(255,90,78,0.14);
    --amber: #F5A93F;
    --amber-dim: rgba(245,169,63,0.14);
    --paper: #EAF1F0;
    --slate: #8AA0A8;
    --slate-dim: #5A7078;
    --radius: 10px;
    --disp: 'Space Grotesk', sans-serif;
    --body: 'IBM Plex Sans', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
    --logotype: 'Poppins', sans-serif;
    --brand-desk: #5FE0E8;
    --brand-sentinel: #22D3BC;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--ink);
    color:var(--paper);
    font-family:var(--body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }

  img{ max-width:100%; display:block; }
  a{ color:inherit; }

  .wrap{
    max-width:1160px;
    margin:0 auto;
    padding:0 28px;
  }

  h1,h2,h3{
    font-family:var(--disp);
    font-weight:600;
    letter-spacing:-0.01em;
    line-height:1.15;
  }

  section{ padding:96px 0; border-top:1px solid var(--line); }
  section:first-of-type{ border-top:none; }

  .eyebrow{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--signal);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
  }
  .eyebrow::before{
    content:"";
    width:7px; height:7px;
    background:var(--signal);
    border-radius:50%;
    box-shadow:0 0 0 3px var(--signal-dim);
  }

  /* ---------- Header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(10,20,32,0.82);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  header .wrap{
    display:flex; align-items:center; justify-content:space-between;
    height:72px;
  }
  .brand{ display:flex; align-items:center; gap:10px; font-size:20px; text-decoration:none; }
  .brand-mark{ width:32px; height:32px; object-fit:contain; }
  .brand .name{
    font-family:var(--logotype); font-style:italic; font-weight:600;
    letter-spacing:-0.01em;
  }
  .brand .name .t1{ color:var(--brand-desk); }
  .brand .name .t2{ color:var(--brand-sentinel); }

  nav.primary{ display:flex; align-items:center; gap:36px; }
  nav.primary a{ text-decoration:none; color:var(--slate); font-size:14.5px; font-weight:500; transition:color .15s; }
  nav.primary a:hover{ color:var(--paper); }

  .nav-login{
    text-decoration:none; color:var(--paper); font-size:14.5px; font-weight:600;
    padding:8px 4px; border-bottom:1px solid transparent; transition:border-color .15s;
  }
  .nav-login:hover{ border-color:var(--signal); }
  .mobile-only-link{ display:none; }

  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--body); font-weight:600; font-size:14.5px;
    padding:12px 22px; border-radius:8px; text-decoration:none;
    border:1px solid transparent; cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease, background .15s;
  }
  .btn-primary{ background:var(--signal); color:#04211C; }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 8px 24px -8px rgba(34,211,188,0.55); }
  .btn-ghost{ border-color:var(--line); color:var(--paper); background:transparent; }
  .btn-ghost:hover{ border-color:var(--slate-dim); }

  .nav-toggle{ display:none; background:none; border:none; color:var(--paper); font-size:26px; cursor:pointer; }

  /* ---------- Hero ---------- */
  .hero{
    padding:168px 0 96px;
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:64px; align-items:center;
    border-top:none;
  }
  .hero h1{ font-size:46px; margin-bottom:22px; }
  .hero h1 span{ color:var(--signal); }
  .hero p.lead{ font-size:17.5px; color:var(--slate); max-width:480px; margin-bottom:34px; }
  .hero .cta-row{ display:flex; gap:14px; margin-bottom:38px; flex-wrap:wrap; }
  .hero .microcopy{ font-family:var(--mono); font-size:12.5px; color:var(--slate-dim); }

  /* ---------- Console demo (signature element) ---------- */
  .console{
    background:var(--ink-2);
    border:1px solid var(--line);
    border-radius:16px;
    padding:22px;
    box-shadow:0 40px 80px -32px rgba(0,0,0,0.6);
  }
  .console-head{
    display:flex; align-items:center; justify-content:space-between;
    font-family:var(--mono); font-size:11.5px; color:var(--slate-dim);
    letter-spacing:0.08em; text-transform:uppercase;
    padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--line);
  }
  .console-head .dots{ display:flex; gap:6px; }
  .console-head .dots span{ width:8px; height:8px; border-radius:50%; background:var(--line); }

  .tile{
    background:var(--ink-3);
    border:1px solid var(--line);
    border-radius:12px;
    padding:20px;
    transition:border-color .4s ease, background .4s ease;
  }
  .tile-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
  .tile-obj{ font-family:var(--disp); font-weight:600; font-size:15.5px; }
  .tile-sub{ font-family:var(--mono); font-size:11.5px; color:var(--slate-dim); margin-top:3px; }

  .status-pill{
    font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.06em;
    padding:5px 10px; border-radius:999px; text-transform:uppercase;
    display:flex; align-items:center; gap:6px;
    background:var(--signal-dim); color:var(--signal);
    transition:background .4s ease, color .4s ease;
  }
  .status-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

  .tile.state-amber .status-pill{ background:var(--amber-dim); color:var(--amber); }
  .tile.state-alert .status-pill{ background:var(--alert-dim); color:var(--alert); }
  .tile.state-amber{ border-color:rgba(245,169,63,0.35); }
  .tile.state-alert{ border-color:rgba(255,90,78,0.45); animation:pulse-border 1.4s ease-in-out infinite; }

  @keyframes pulse-border{
    0%,100%{ box-shadow:0 0 0 0 rgba(255,90,78,0.0); }
    50%{ box-shadow:0 0 0 6px rgba(255,90,78,0.10); }
  }

  .timer-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:18px; }
  .timer{ font-family:var(--mono); font-size:32px; font-weight:600; letter-spacing:0.01em; }
  .timer-label{ font-family:var(--mono); font-size:11px; color:var(--slate-dim); text-transform:uppercase; letter-spacing:0.08em; }

  .tile-btn{
    width:100%; padding:13px; border-radius:8px; border:1px solid var(--line);
    background:rgba(234,241,240,0.04); color:var(--paper);
    font-family:var(--body); font-weight:600; font-size:14px;
    cursor:pointer; transition:all .15s;
  }
  .tile-btn:hover{ background:rgba(234,241,240,0.08); }
  .tile.state-alert .tile-btn{ background:var(--alert); border-color:var(--alert); color:#2A0703; }
  .tile.state-amber .tile-btn{ background:rgba(245,169,63,0.16); border-color:rgba(245,169,63,0.4); }

  .console-foot{
    margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:11.5px; color:var(--slate-dim);
    display:flex; justify-content:space-between;
  }

  /* ---------- Trust bar ---------- */
  .trust{ padding:44px 0; }
  .trust .wrap{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:space-between; }
  .trust p{ font-family:var(--mono); font-size:12.5px; color:var(--slate-dim); letter-spacing:0.04em; }
  .trust-facts{ display:flex; gap:36px; flex-wrap:wrap; }
  .trust-facts div{ text-align:left; }
  .trust-facts b{ display:block; font-family:var(--disp); font-size:20px; color:var(--paper); }
  .trust-facts span{ font-size:12.5px; color:var(--slate); }

  /* ---------- Problem ---------- */
  .problem .wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; }
  .problem h2{ font-size:32px; margin-bottom:20px; }
  .problem p{ color:var(--slate); font-size:16px; max-width:440px; }
  .problem-list{ display:flex; flex-direction:column; gap:18px; }
  .problem-item{
    display:flex; gap:16px; padding:20px; border:1px solid var(--line); border-radius:10px; background:var(--ink-2);
  }
  .problem-item .mark{ font-family:var(--mono); color:var(--alert); font-weight:600; font-size:14px; flex-shrink:0; }
  .problem-item p{ margin:0; color:var(--paper); font-size:14.5px; max-width:none; }
  .problem-item p b{ display:block; font-family:var(--disp); font-size:15.5px; margin-bottom:4px; font-weight:600; }

  /* ---------- How it works ---------- */
  .steps{ counter-reset:step; }
  .steps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:56px; }
  .step{ position:relative; padding-top:8px; }
  .step .num{
    font-family:var(--mono); font-size:13px; color:var(--signal);
    border:1px solid var(--signal-dim); background:var(--signal-dim);
    width:34px; height:34px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; margin-bottom:22px;
  }
  .step h3{ font-size:19px; margin-bottom:10px; }
  .step p{ color:var(--slate); font-size:14.5px; }
  .step-line{ position:absolute; top:17px; left:34px; width:calc(100% - 34px); height:1px; background:var(--line); }
  .step:last-child .step-line{ display:none; }

  /* ---------- Features ---------- */
  .features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:56px; }
  .feature{ background:var(--ink); padding:32px 28px; }
  .feature h3{ font-size:16.5px; margin-bottom:10px; }
  .feature p{ color:var(--slate); font-size:14px; }
  .feature .tag{ font-family:var(--mono); font-size:11px; color:var(--signal); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:14px; display:block; }

  /* ---------- Security ---------- */
  .security{ background:var(--ink-2); }
  .security .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
  .security h2{ font-size:30px; margin-bottom:18px; }
  .security > .wrap > div:first-child p{ color:var(--slate); font-size:15.5px; margin-bottom:12px; }
  .sec-list{ display:flex; flex-direction:column; gap:0; }
  .sec-item{ padding:20px 0; border-bottom:1px solid var(--line); display:flex; gap:16px; }
  .sec-item:last-child{ border-bottom:none; }
  .sec-item .check{ color:var(--signal); font-family:var(--mono); flex-shrink:0; }
  .sec-item b{ display:block; font-family:var(--disp); font-size:15px; font-weight:600; margin-bottom:3px; }
  .sec-item span{ color:var(--slate); font-size:13.5px; }

  /* ---------- Pricing ---------- */
  .billing-toggle{
    display:inline-flex; flex-wrap:wrap; gap:4px; margin-top:32px; padding:5px;
    background:var(--ink-2); border:1px solid var(--line); border-radius:10px;
  }
  .billing-btn{
    font-family:var(--body); font-size:13.5px; font-weight:600; color:var(--slate);
    background:transparent; border:none; border-radius:7px; padding:9px 16px;
    cursor:pointer; display:flex; align-items:center; gap:6px; transition:all .15s;
  }
  .billing-btn:hover{ color:var(--paper); }
  .billing-btn.is-active{ background:var(--signal); color:#04211C; }
  .billing-btn .save-tag{
    font-family:var(--mono); font-size:10.5px; padding:2px 5px; border-radius:4px;
    background:rgba(255,255,255,0.18); color:inherit;
  }
  .billing-btn:not(.is-active) .save-tag{ background:var(--signal-dim); color:var(--signal); }

  .price-block{ padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
  .price-amount{ display:flex; align-items:baseline; gap:6px; font-family:var(--disp); }
  .price-amount .amount{ font-size:30px; font-weight:600; }
  .price-amount .per{ font-size:14px; color:var(--slate); font-family:var(--body); font-weight:500; }
  .price-sub{ font-family:var(--mono); font-size:12px; color:var(--slate-dim); margin-top:6px; }

  .pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px; }
  .plan{ border:1px solid var(--line); border-radius:12px; padding:32px 28px; background:var(--ink-2); display:flex; flex-direction:column; }
  .plan.featured{ border-color:rgba(34,211,188,0.4); background:linear-gradient(180deg, rgba(34,211,188,0.06), var(--ink-2) 60%); }
  .plan .plan-name{ font-family:var(--disp); font-size:18px; font-weight:600; margin-bottom:6px; }
  .plan .plan-for{ font-size:13px; color:var(--slate); margin-bottom:22px; }
  .plan .plan-price{ font-family:var(--mono); font-size:13px; color:var(--signal); margin-bottom:22px; padding-bottom:22px; border-bottom:1px solid var(--line); }
  .plan ul{ list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:28px; flex-grow:1; }
  .plan li{ font-size:13.5px; color:var(--paper); display:flex; gap:10px; }
  .plan li::before{ content:"—"; color:var(--slate-dim); flex-shrink:0; }

  /* ---------- CTA / Contact ---------- */
  .cta-section{ text-align:center; }
  .cta-section h2{ font-size:34px; max-width:640px; margin:0 auto 16px; }
  .cta-section p{ color:var(--slate); max-width:520px; margin:0 auto 44px; font-size:16px; }

  form.contact{
    max-width:560px; margin:0 auto; text-align:left;
    background:var(--ink-2); border:1px solid var(--line); border-radius:14px; padding:36px;
  }
  .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
  .field{ display:flex; flex-direction:column; gap:7px; }
  .field.full{ grid-column:1 / -1; }
  .field label{ font-family:var(--mono); font-size:11.5px; color:var(--slate); text-transform:uppercase; letter-spacing:0.06em; }
  .field input, .field textarea{
    background:var(--ink); border:1px solid var(--line); border-radius:8px;
    padding:12px 14px; color:var(--paper); font-family:var(--body); font-size:14.5px;
    outline:none; transition:border-color .15s;
  }
  .field input:focus, .field textarea:focus{ border-color:var(--signal); }
  .field textarea{ resize:vertical; min-height:90px; }
  form.contact .btn{ width:100%; margin-top:6px; padding:14px; }
  .form-note{ font-family:var(--mono); font-size:11.5px; color:var(--slate-dim); text-align:center; margin-top:16px; }
  .form-success{ display:none; text-align:center; padding:20px; }
  .form-success.show{ display:block; }
  .form-success .check-big{ color:var(--signal); font-size:32px; margin-bottom:12px; font-family:var(--mono); }

  /* ---------- Footer ---------- */
  footer{ padding:56px 0 40px; }
  footer .wrap{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; }
  .foot-brand{ display:flex; align-items:center; gap:8px; font-size:16px; }
  .foot-brand .brand-mark{ width:24px; height:24px; }
  .foot-brand .name{ font-family:var(--logotype); font-style:italic; font-weight:600; }
  .foot-brand .name .t1{ color:var(--brand-desk); }
  .foot-brand .name .t2{ color:var(--brand-sentinel); }
  .foot-slogan{ font-family:var(--mono); font-size:11px; color:var(--slate-dim); letter-spacing:0.1em; text-transform:uppercase; margin-top:6px; }
  .foot-links{ display:flex; gap:32px; flex-wrap:wrap; }
  .foot-col h4{ font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--slate); margin-bottom:14px; }
  .foot-col a{ display:block; text-decoration:none; color:var(--slate); font-size:13.5px; margin-bottom:10px; }
  .foot-col a:hover{ color:var(--paper); }
  .foot-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-size:12.5px; color:var(--slate-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

  .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:none; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .tile.state-alert{ animation:none; }
    .reveal{ opacity:1; transform:none; transition:none; }
  }

  @media (max-width: 900px){
    nav.primary, header .btn-primary, header .nav-login{ display:none; }
    nav.primary.nav-open{
      display:flex; flex-direction:column;
      position:fixed; top:72px; left:0; right:0;
      background:#0A1420; padding:24px 28px;
      border-bottom:1px solid var(--line);
      z-index:99;
    }
    .mobile-only-link{ display:block; margin-top:8px; padding-top:16px; border-top:1px solid var(--line); }
    .nav-toggle{ display:block; }
    .hero{ grid-template-columns:1fr; padding-top:140px; }
    .hero h1{ font-size:34px; }
    .problem .wrap, .security .wrap{ grid-template-columns:1fr; }
    .steps-grid, .features-grid, .pricing-grid{ grid-template-columns:1fr; }
    .step-line{ display:none; }
    .form-row{ grid-template-columns:1fr; }
    footer .wrap{ flex-direction:column; }
  }