:root{
      --bg:#f4f9f7;
      --surface:#ffffff;
      --surface2:#eaf4ef;

      --text:#1a2e27;
      --muted:#4d7066;

      --border:#b8d9cc;
      --accent:#1a8a62;
      --accent-light:#e0f2ea;

      --btn:#2e6fa3;
      --btn-light:rgba(46,111,163,.12);
      --btn-border:rgba(46,111,163,.4);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      background:
        radial-gradient(1200px 600px at 15% 10%, rgba(26,138,98,.09), transparent 55%),
        radial-gradient(900px 500px at 85% 20%, rgba(46,111,163,.07), transparent 55%),
        var(--bg);
      color:var(--text);
      line-height:1.6;
    }
    a{color:var(--text);text-decoration:none}
    .container{max-width:1100px;margin:0 auto;padding:72px 24px}
    section{margin-bottom:72px}
    p{color:var(--muted)}
    h1,h2,h3{line-height:1.2;font-weight:700;color:var(--text)}
    h1{font-size:2.6rem;margin-bottom:14px}
    h2{font-size:1.8rem;margin-bottom:18px}
    h3{font-size:1.1rem;margin-bottom:8px}

    footer{
      border-top:1px solid var(--border);
      padding:22px 24px;
      color:var(--muted);
    }
    .footer-inner{
      max-width:1100px;margin:0 auto;
      display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
      padding:0 0;
    }
    .footer-links{display:flex;gap:16px}
    .footer-links a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
    .footer-links a:hover{color:var(--text)}


    .nav{
      display:flex;align-items:center;justify-content:space-between;
      padding:14px 24px;
      border-bottom:1px solid var(--border);
      position:sticky;top:0;z-index:50;
      background:rgba(244,249,247,.85);
      backdrop-filter: blur(10px);
      gap:12px;
    }
    .brand a{
      display:inline-block;
      padding:8px 13px;
      border-radius:10px;
      background:var(--accent-light);
      border:1px solid rgba(26,138,98,.35);
      color:var(--accent);
      font-weight:700;
      font-size:.95rem;
      letter-spacing:.2px;
      white-space:nowrap;
    }
    .nav a{color:var(--muted);margin-left:16px}
    .nav a:hover{color:var(--text)}
    .nav .cta{
      padding:10px 14px;border-radius:10px;
      background:var(--btn-light);
      border:1px solid var(--btn-border);
      color:var(--btn);
      white-space:nowrap;
    }

    /* Nav center (4 Schritte) */
    .nav-center{
      text-align:center;
      color:var(--muted);
      line-height:1.15;
      padding: 0 16px;
      max-width: 520px;
    }
    .nav-center-title{
      font-weight:650;
      color:var(--text);
      font-size:.95rem;
    }
    .nav-center-steps{
      font-size:.85rem;
      color:var(--muted);
      margin-top:4px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .nav-links{display:flex;align-items:center}
    .nav-right{display:flex;align-items:center;gap:8px}

    @media (max-width: 980px){
      .nav-center{display:none;}
    }

    /* Hamburger */
    .hamburger{
      display:none;
      flex-direction:column;
      justify-content:center;
      gap:5px;
      width:38px;height:38px;
      border:1px solid var(--border);
      border-radius:10px;
      background:var(--surface);
      cursor:pointer;
      padding:8px;
      flex-shrink:0;
    }
    .hamburger span{
      display:block;
      height:2px;
      background:var(--text);
      border-radius:2px;
      transition:all .2s;
    }
    .mobile-menu{
      display:none;
      position:sticky;
      top:57px;
      left:0;right:0;
      background:rgba(244,249,247,.97);
      backdrop-filter:blur(10px);
      border-bottom:1px solid var(--border);
      padding:8px 24px 14px;
      flex-direction:column;
      gap:0;
      z-index:48;
    }
    .mobile-menu a{
      display:block;
      padding:12px 0;
      border-bottom:1px solid var(--border);
      color:var(--text);
      font-size:1rem;
      margin-left:0;
    }
    .mobile-menu a:last-child{border-bottom:none;padding-bottom:4px;}
    .mobile-menu.open{display:flex;}

    @media (max-width: 640px){
      .nav{padding:12px 16px;position:sticky;}
      .nav-links a:not(.cta){display:none;}
      .hamburger{display:flex;}
    }


    /* Hero */
    .hero{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:28px;
      align-items:center;
      padding-top:42px;
    }
    @media (max-width: 900px){ .hero{grid-template-columns:1fr} }

    .badge{
      display:inline-flex;
      padding:6px 10px;
      border-radius:999px;
      background:var(--accent-light);
      border:1px solid rgba(26,138,98,.35);
      font-size:.85rem;
      margin-bottom:10px;
      color:var(--accent);
      font-weight:600;
    }
    .lead{font-size:1.06rem;max-width:760px}

    .hero-actions{
      margin-top:22px;
      display:flex;gap:12px;flex-wrap:wrap;
    }
    .btn{
      padding:12px 16px;border-radius:12px;
      border:1px solid var(--border);
      background:var(--surface);
      color:var(--text);
      font-weight:650;
      display:inline-block;
    }
    .btn-primary{
      background: var(--btn);
      border:1px solid var(--btn-border);
      color:#ffffff;
    }

    .hero-media{
      background:var(--surface2);
      border:1px solid var(--border);
      border-radius:18px;
      overflow:hidden;
    }
    .hero-media img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
      max-height:380px;
    }
    .media-caption{
      padding:12px 14px;
      color:var(--muted);
      font-size:.9rem;
      border-top:1px solid var(--border);
      background:rgba(234,244,239,.6);
    }

    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:16px;
      margin-top:18px;
    }
    .card{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:16px;
      padding:18px;
    }

    /* Form */
    #anfrage{ scroll-margin-top: 120px; }
    form{margin-top:18px}
    .form-wrap{
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:16px;
      padding:18px;
      max-width:820px;
    }
    .row{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:12px;
      margin-bottom:12px;
    }
    @media (max-width: 700px){ .row{grid-template-columns:1fr} }

    label{
      display:block;
      color:var(--text);
      font-weight:650;
      margin-bottom:6px;
      font-size:.95rem;
    }
    input[type="text"],
    input[type="email"],
    select,
    textarea{
      width:100%;
      padding:12px 12px;
      border-radius:12px;
      border:1px solid var(--border);
      background:var(--surface2);
      color:var(--text);
      outline:none;
    }
    textarea{min-height:120px;resize:vertical}
    input::placeholder, textarea::placeholder{color: rgba(77,112,102,.6)}
    .help{font-size:.9rem;color:var(--muted);margin-top:6px}
    .checkgrid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:10px;
      margin-top:8px;
      margin-bottom:12px;
    }
    .check{
      display:flex;gap:10px;align-items:flex-start;
      padding:10px 12px;border-radius:12px;
      border:1px solid var(--border);
      background:var(--surface2);
    }
    .check input{margin-top:3px}
    .fineprint{
      margin-top:14px;
      font-size:.9rem;
      color:var(--muted);
    }

    /* Submit button */
    button[type="submit"]{
      background: var(--btn);
      border:1px solid var(--btn-border);
      color:#ffffff;
    }

    /* Statusmeldungen Formular */
    .status{
      max-width: 820px;
      margin-top: 16px;
      margin-bottom: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--surface2);
      color: var(--text);
    }
    .status.ok{
      border-color: rgba(26,138,98,.55);
      background: rgba(26,138,98,.08);
    }
    .status.warn{
      border-color: rgba(46,111,163,.55);
      background: rgba(46,111,163,.08);
    }
    .status.err{
      border-color: rgba(180,50,50,.3);
      background: rgba(180,50,50,.05);
    }
    .status strong{color:var(--text)}