/* === Modernes rundes Formular-Design (integriert) === */
    :root{
      --bg:#0f172a; --card:#111827; --text:#e5e7eb; --muted:#9ca3af;
      --primary:#3b82f6; --primary-700:#2563eb; --success:#16a34a; --danger:#ef4444;
      --ring:0 0 0 4px rgba(59,130,246,.25); --radius:16px;
      --shadow:0 10px 30px rgba(0,0,0,.25); --border:1px solid rgba(255,255,255,.08);
    }
    @media (prefers-color-scheme: light){
      :root{ --bg:#f3f4f6; --card:#ffffff; --text:#111827; --muted:#6b7280;
        --primary:#2563eb; --primary-700:#1d4ed8;
        --shadow:0 10px 30px rgba(2,6,23,.08); --border:1px solid rgba(2,6,23,.06);
      }
    }
    *{ box-sizing:border-box }
    html,body{ height:100% }
    body{
      margin:0;
      font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
      background:
      color:var(--text); padding:24px;
    }
    .container{ max-width:740px; margin:0 auto; padding:12px; }
    .card{
      background:var(--card); border:var(--border);
      border-radius:calc(var(--radius) + 4px);
      box-shadow:var(--shadow); padding:28px;
      backdrop-filter:saturate(1.1) blur(2px);
      animation:cardIn .5s ease both;
    }
    @keyframes cardIn{
      from{ opacity:0; transform:translateY(6px) scale(.995) }
      to  { opacity:1; transform:translateY(0)   scale(1) }
    }
    h1{ font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); margin:0 0 18px; letter-spacing:-.01em; }

    label{ display:block; margin:.9rem 0 .45rem; color:var(--muted); font-weight:600; }
    input, select, textarea, button{ font:inherit; }
    input, select, textarea{
      width:100%; background:transparent; color:var(--text);
      border:var(--border); border-radius:var(--radius);
      padding:.9rem 1rem; outline:none;
      transition:border-color .2s, box-shadow .2s, transform .06s ease;
    }
    textarea{ resize:vertical; min-height:160px }
    input::placeholder, textarea::placeholder{ color:color-mix(in srgb, var(--muted) 70%, transparent) }
    input:focus, select:focus, textarea:focus{ border-color:var(--primary); box-shadow:var(--ring); }
    input:hover, select:hover, textarea:hover{ border-color:color-mix(in srgb, var(--muted) 60%, transparent); }

    /* Fehlerzustand, mit deinem JS kompatibel */
    .field-error{
      border-color:var(--danger) !important;
      box-shadow:0 0 0 4px color-mix(in srgb, var(--danger) 30%, transparent);
    }

    /* Layout */
    #contactForm{ display:grid; gap:14px; }
    .hidden-hp{ position:absolute; left:-5000px; }

    /* Button */
    button{
      appearance:none; border:none;
      background:linear-gradient(180deg, var(--primary), var(--primary-700));
      color:#fff; border-radius:calc(var(--radius) + 6px);
      padding:.95rem 1.2rem; font-weight:700; letter-spacing:.2px; cursor:pointer;
      box-shadow:0 8px 18px rgba(37,99,235,.35), inset 0 0 0 1px rgba(255,255,255,.15);
      transition:transform .06s ease, box-shadow .2s ease, filter .2s ease;
    }
    button:hover{ filter:brightness(1.03) }
    button:active{ transform:translateY(1px) scale(.997) }
    button:disabled{ opacity:.6; cursor:not-allowed; filter:grayscale(.2) }

    /* Meldungen */
    #formMsg{ margin-top:4px; font-weight:600; }
    #formMsg.error{ color:var(--danger); }
    #formMsg.ok{ color:var(--success); }

    /* Select-Pfeil */
    select{
      background-image:
        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
        linear-gradient(135deg, var(--muted) 50%, transparent 50%),
        linear-gradient(to right, transparent, transparent);
      background-position:
        calc(100% - 20px) 1.1em,
        calc(100% - 15px) 1.1em,
        calc(100% - 2.5rem) .5em;
      background-size:5px 5px, 5px 5px, 1px 1.5em;
      background-repeat:no-repeat;
      padding-right:2.8rem;
    }

    @media (max-width:520px){
      .card{ padding:20px }
      label{ margin:.7rem 0 .3rem }
    }