:root{
      --brand:#0b5fff;
      --brand-600:#0a49d1;
      --brand-700:#0838a8;
      --ink:#0f172a;          /* Text */
      --muted:#475569;        /* Sekundärtext */
      --line:#e5e7eb;         /* Linien */
      --bg:#f6f8fb;           /* Seitenhintergrund */
      --surface:#ffffff;      /* Karten/Flächen */
      --ok:#16a34a;           /* Akzent grün */
      --warn:#f59e0b;         /* Akzent gelb */
      --danger:#ef4444;       /* Akzent rot */
      --radius:14px;
      --shadow:0 10px 30px rgba(2,6,23,.08);
      --header-h:72px;
    }
    /* Reset/Typo */
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji"; color:var(--ink); background:var(--bg);}
    img{max-width:100%; display:block}
    a{color:var(--brand); text-decoration:none}
    p{line-height:1.65}
    h1,h2,h3{line-height:1.2; margin:0 0 .6rem}
    .container{width:min(1120px, 92vw); margin-inline:auto}
    .btn{display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.15rem; background:var(--brand); color:#fff; border:0; border-radius:12px; cursor:pointer; font-weight:600; box-shadow:var(--shadow); transition:transform .08s ease, background .2s ease}
    .btn:hover{background:var(--brand-600)}
    .btn:active{transform:translateY(1px)}
    .btn.ghost{background:#0000; color:var(--brand); border:1px solid var(--brand); box-shadow:none}
    .chip{font-size:.85rem; padding:.35rem .7rem; border-radius:999px; background:#eaf1ff; color:#0838a8; display:inline-block}
    section{scroll-margin-top:calc(var(--header-h) + 16px)}

    /* Header */
    header.site{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.8); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid #ffffff80}
    .nav{height:var(--header-h); display:flex; align-items:center; justify-content:space-between}
    .brand{display:flex; align-items:center; gap:.75rem; font-weight:800}
    .brand svg{width:28px; height:28px}
    .navlinks{display:flex; align-items:center; gap:1rem}
    .navlinks a{color:#111827; padding:.5rem .7rem; border-radius:10px}
    .navlinks a:hover{background:#f1f5ff}
    .cta{display:flex; align-items:center; gap:.6rem}
    .burger{display:none; background:#0000; border:0; width:40px; height:40px; border-radius:10px}

    /* Mobile menu */
    @media (max-width: 860px){
      .navlinks{display:none}
      .burger{display:inline-grid; place-items:center}
      .mobile-drawer{position:fixed; inset:0 0 0 auto; width:min(86vw,380px); background:var(--surface); box-shadow:-20px 0 60px rgba(2,6,23,.15); transform:translateX(100%); transition:transform .25s ease; z-index:60; padding:1rem}
      .mobile-drawer.open{transform:none}
      .mobile-drawer nav{display:grid; gap:.4rem; margin-top:1rem}
      .mobile-drawer a{padding:.9rem 1rem; border-radius:10px; color:#0f172a}
      .mobile-drawer a:hover{background:#f3f6ff}
      .scrim{position:fixed; inset:0; background:rgba(2,6,23,.45); opacity:0; pointer-events:none; transition:opacity .25s}
      .scrim.show{opacity:1; pointer-events:auto}
    }
    
    /* Verhindert, dass Mobile-Menü auf Desktop sichtbar ist */
    @media (min-width: 861px) {
      .mobile-drawer, .scrim {display: none !important;}
    }

    /* Hero */
    .hero{padding:clamp(40px, 7vw, 90px) 0; background:radial-gradient(1200px 400px at 50% -120px, #eaf1ff, #fff 60%)}
    .hero .grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:48px; align-items:center}
    .hero h1{font-size:clamp(32px, 4.6vw, 48px)}
    .hero p{color:var(--muted); font-size:clamp(16px, 2.2vw, 19px)}
    .hero .actions{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1rem}
    .hero .card{background:var(--surface); padding:1rem; border-radius:var(--radius); box-shadow:var(--shadow)}

    @media (max-width: 900px){
      .hero .grid{grid-template-columns:1fr}
    }

    /* Trustbar */
    .trust{display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center; margin-top:1.2rem; color:#0f172a}
    .trust .item{display:flex; align-items:center; gap:.5rem; background:#fff; border:1px solid var(--line); padding:.5rem .8rem; border-radius:999px}

    /* Services */
    .services{padding:72px 0}
    .section-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:22px}
    .cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px}
    .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
    .card h3{margin:.4rem 0 .6rem}
    .card p{color:var(--muted)}
    .card .tags{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.7rem}
    .card .price{margin-top:.7rem; font-weight:700}
    @media (max-width: 980px){.cards{grid-template-columns:1fr 1fr}}
    @media (max-width: 640px){.cards{grid-template-columns:1fr}}

    /* Steps */
    .steps{padding:72px 0; background:linear-gradient(180deg, #fff, #f7f9ff)}
    .timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
    .step{background:#fff; border:1px dashed #cbd5e1; border-radius:14px; padding:18px}
    .step h4{margin:.4rem 0}
    .step p{color:var(--muted)}
    @media (max-width: 980px){.timeline{grid-template-columns:repeat(2,1fr)}}
    @media (max-width: 560px){.timeline{grid-template-columns:1fr}}

    /* Contact */
    .contact{padding:72px 0}
    .contact .grid{display:grid; grid-template-columns:1.1fr .9fr; gap:24px}
    .contact .panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
    .contact label{display:flex; flex-wrap:wrap; gap:0.6rem; align-items:flex-start;}
    .contact input, .contact textarea{width:100%; padding:.7rem .8rem; border:1px solid #cbd5e1; border-radius:10px; font:inherit}
    .contact textarea{min-height:120px; resize:vertical}
    .muted{color:var(--muted); font-size:.95rem}
    @media (max-width: 900px){.contact .grid{grid-template-columns:1fr}}

    /* Footer */
    footer{padding:28px 0 80px; color:#0b1220}
    .footgrid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px}
    .footgrid h4{margin-bottom:.6rem}
    .footgrid a{color:#0b1220}
    .sub{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:#475569; border-top:1px solid var(--line); padding-top:16px; margin-top:18px}
    @media (max-width: 860px){.footgrid{grid-template-columns:1fr}}

    /* Cookie Banner */
    #cookie-banner{position:fixed; inset:auto 16px 16px 16px; background:#0b1220; color:#fff; border-radius:12px; padding:14px; display:none; gap:12px; align-items:center; box-shadow:var(--shadow)}
    #cookie-banner .actions{margin-left:auto; display:flex; gap:8px}
    #cookie-banner button{border-radius:10px; padding:.6rem .8rem; border:1px solid #233}
    #cookie-banner .accept{background:var(--ok); color:#fff; border:0}
    #cookie-banner .decline{background:#121826; color:#fff}