/* ===== Design Tokens ===== */
    :root{
      --ink:#111827; --charcoal:#1f2937; --steel:#374151; --slate:#4b5563;
      --cloud:#f3f4f6; --line:#e5e7eb; --white:#fff;
      --amber:#f59e0b; --amber-700:#c47f09; --emerald:#059669;
      --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.06);
      --container:1200px;
      --fs-hero: clamp(28px, 4.4vw, 46px);
      --fs-h2: clamp(22px, 2.8vw, 30px);
      --fs-lead: clamp(16px, 2vw, 20px);
      --sp-sec: clamp(28px, 6vw, 64px);
      --hdr-h: 60px;
    }

    /* ===== Base ===== */
    html,body{margin:0;padding:0;background:#fff;color:var(--charcoal);
      font:400 16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}
    *,*::before,*::after{box-sizing:border-box}
    a{color:var(--emerald);text-decoration:none}
    a:hover{text-decoration:underline}
    img{max-width:100%;height:auto;display:block}
    .wrap{max-width:var(--container);margin:0 auto;padding:0 16px}
    .skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
    .skip:focus{left:12px;top:12px;width:auto;height:auto;background:#fff;border:2px solid var(--amber);padding:.5rem .75rem;border-radius:10px;z-index:10000}

    /* ===== Header (CSS-only Burger) ===== */
    .header{position:sticky;top:0;z-index:999;background:linear-gradient(180deg,#0b1220 0%,#111827 100%);color:#fff;border-bottom:1px solid #0b1220}
    .header-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem 16px;height:var(--hdr-h)}
    /* Dein Logo exakt */
    .header-content{display:flex;align-items:center;min-width:0}
    .header-content .logo a{display:inline-block;line-height:0}
    .header-content .logo img{height:auto;max-height:57px;width:auto}

    .nav{display:flex;align-items:center;gap:.25rem;flex:1;justify-content:center}
    .nav a{color:#e5e7eb;border-radius:10px;padding:.55rem .75rem;font-weight:600;letter-spacing:.2px}
    .nav a:hover{background:#ffffff14}

    .actions{display:flex;align-items:center;gap:.45rem;flex-wrap:nowrap}
    .btn{
      display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;padding:.55rem .9rem;
      font-weight:800;letter-spacing:.2px;border:1px solid #ffffff1f;background:#ffffff12;color:#fff;
      box-shadow: inset 0 0 0 1px #ffffff0d;white-space:nowrap
    }
    .btn:hover{background:#ffffff22}
    .btn-primary{background:var(--amber);color:#1f2937;border:1px solid #00000012;box-shadow:0 6px 16px rgba(245,158,11,.22)}
    .btn-primary:hover{background:var(--amber-700);color:#fff}
    .btn-outline{background:transparent;border:1px solid #ffffff33}

    /* Burger Checkbox + Labels (CSS-only) */
    #nav-toggle{position:absolute;left:-9999px}
    .burger-label{
      display:none;align-items:center;justify-content:center;cursor:pointer;
      width:42px;height:42px;border-radius:10px;border:1px solid #ffffff33;background:#ffffff12
    }
    .burger-label:hover{background:#ffffff22}
    .burger-label svg{width:26px;height:26px;fill:#fff}

    /* Drawer + Overlay */
    .drawer{display:none;position:fixed;inset:var(--hdr-h) 0 0 0;background:#0b1220;color:#fff;border-top:1px solid #131a2c;box-shadow:0 22px 40px rgba(0,0,0,.28)}
    .drawer .wrap{max-width:960px;padding:16px}
    .drawer a{display:block;color:#e5e7eb;padding:.9rem 1rem;border-radius:12px}
    .drawer a:hover{background:#ffffff12}
    .drawer .drawer-actions{display:grid;gap:.6rem;padding:12px 0}
    .drawer-close{
      display:inline-flex;align-items:center;gap:.5rem;margin:2px 0 10px;padding:.45rem .7rem;border:1px solid #ffffff;border-radius:10px;background:#ffffff;cursor:pointer
    }
    .drawer-close:hover{background:#ffffff22}
    .overlay{
      display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:saturate(120%) blur(2px)
    }

    /* Toggle via :checked */
    #nav-toggle:checked ~ .overlay{display:block}
    #nav-toggle:checked ~ .drawer{display:block}

/* Breakpoint: <=1060px -> Buttons & Nav weg, Burger bleibt sichtbar */
@media (max-width:1060px){
  .nav{display:none}
  /* WICHTIG: .actions bleibt sichtbar, nur die Buttons darin verschwinden */
  .actions > a{display:none}
  .burger-label{display:inline-flex}
}

    /* Kleinere Phones: Logo kompakter */
    @media (max-width:420px){
      .header-content .logo img{max-height:50px}
      .btn{padding:.5rem .7rem}
    }

    /* ===== Hero ===== */
    .hero{background:linear-gradient(180deg,#f8fafc 0%,#ffffff 70%);padding:var(--sp-sec) 0}
    .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:center}
    @media (max-width:980px){.hero-grid{grid-template-columns:1fr}}
    .hero h1{font:800 var(--fs-hero)/1.12 system-ui,Arial,sans-serif;margin:.2em 0 .3em;color:#0b1220}
    .lead{font-size:var(--fs-lead);color:var(--slate);max-width:68ch}
    .search{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius);padding:14px;display:grid;gap:10px}
    .row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px}
    @media (max-width:860px){.row{grid-template-columns:1fr}}
    label{font-weight:700;font-size:.92rem;color:#374151}
    input,select{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:12px;font-size:16px;background:#fff}
    .cta{background:var(--amber);color:#1f2937;border:none;border-radius:12px;padding:12px 18px;font-weight:900;cursor:pointer;box-shadow:0 10px 18px rgba(245,158,11,.22)}
    .cta:hover{background:var(--amber-700);color:#fff}
    .aside{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
    .aside h3{margin:4px 0 8px;font-size:18px}
    .aside ul{margin:0;padding-left:18px;color:var(--slate)}

    /* ===== Sections ===== */
    .section{padding:var(--sp-sec) 0}
    .section h2{font:800 var(--fs-h2)/1.2 system-ui,Arial,sans-serif;margin:0 0 8px}
    .muted{color:var(--slate)}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    @media (max-width:1000px){.grid-3{grid-template-columns:1fr 1fr}.grid-4{grid-template-columns:1fr 1fr}}
    @media (max-width:620px){.grid-3,.grid-4{grid-template-columns:1fr}}
    .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
    .card h3{margin:.35rem 0 .25rem}
    .steps{counter-reset:step}
    .step{position:relative;padding-left:54px}
    .step::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:36px;height:36px;display:grid;place-items:center;background:var(--amber);color:#1f2937;border-radius:999px;font-weight:900}

    .band{background:var(--ink);color:#fff;text-align:center;padding:28px 16px}
    .band .btn{background:#fff;color:var(--ink);padding:12px 16px;border-radius:999px;font-weight:900;text-decoration:none}
    .band .btn:hover{background:#f3f4f6}

    /* ===== Footer ===== */
    footer{background:#0b0f16;color:#e5e7eb}
    footer a{color:#f59e0b}
    footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding:28px 0}
    footer .brand{font-weight:900;font-size:18px;margin-bottom:8px}
    @media (max-width:900px){footer .cols{grid-template-columns:1fr}}
    .fine{border-top:1px solid #111827; padding:12px 16px; text-align:center; font-size:14px}

    /* Reduce Motion */
    @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}



    /* ===== Footer ===== */
    footer{background:#0b0f16;color:#e5e7eb}
    footer a{color:#f59e0b}
    footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;padding:28px 0}
    footer .brand{font-weight:900;font-size:18px;margin-bottom:8px}
    @media (max-width:900px){footer .cols{grid-template-columns:1fr}}
    .fine{border-top:1px solid #111827; padding:12px 16px; text-align:center; font-size:14px}

    /* Reduce Motion */
    @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}