<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex, nofollow, noarchive, nosnippet, noimageindex" />
    <meta name="googlebot" content="noindex, nofollow, noarchive, nosnippet, noimageindex" />
    <title>Contact | felgner.ch</title>
    <script src="/js/vendor/openpgp.min.js" defer></script>
    <style>
      :root {
        --bg: #f3efe6;
        --surface: #fffaf2;
        --ink: #1e2a22;
        --accent: #0f766e;
        --accent-2: #115e59;
        --line: #d6cab4;
      }
      * { box-sizing: border-box; }
      body {
        margin: 0;
        font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
        color: var(--ink);
        background:
          radial-gradient(circle at 10% 10%, #efe4cf 0%, transparent 40%),
          radial-gradient(circle at 90% 80%, #d7e7e4 0%, transparent 35%),
          var(--bg);
        min-height: 100vh;
        display: grid;
        place-items: center;
        padding: 24px;
        overflow-x: hidden;
      }
      .card {
        width: min(760px, 100%);
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 20px;
        padding: clamp(20px, 4vw, 38px);
        box-shadow: 0 18px 50px rgba(17, 25, 40, 0.12);
      }
      h1 {
        margin: 0 0 20px;
        font-size: clamp(1.6rem, 3.6vw, 2.4rem);
        letter-spacing: -0.02em;
      }
      form { display: grid; gap: 14px; }
      .row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }
      label {
        display: grid;
        gap: 6px;
        font-size: 0.95rem;
        font-weight: 600;
      }
      input, textarea, button {
        font: inherit;
      }
      input, textarea {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 10px 12px;
        color: var(--ink);
        max-width: 100%;
      }
      textarea { min-height: 150px; resize: vertical; }
      input:focus, textarea:focus {
        outline: 2px solid color-mix(in oklab, var(--accent), white 62%);
        outline-offset: 1px;
      }
      button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
        outline: 3px solid color-mix(in oklab, var(--accent), white 40%);
        outline-offset: 2px;
      }
      input[aria-invalid="true"], textarea[aria-invalid="true"] {
        border-color: #9f1239;
      }
      .field-error {
        margin: 0;
        min-height: 1.2em;
        font-size: 0.84rem;
        color: #9f1239;
        font-weight: 500;
      }
      .option-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 10px 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
      }
      .option-row input {
        width: 18px;
        height: 18px;
        margin-top: 2px;
      }
      .option-row p {
        margin: 2px 0 0;
        font-size: 0.9rem;
        color: #30463d;
      }
      .pgp-section {
        display: grid;
        gap: 12px;
        padding: 12px;
        border: 1px dashed var(--line);
        border-radius: 12px;
        background: #fff;
      }
      .pgp-section[hidden] { display: none; }
      .helper {
        margin: 0;
        font-size: 0.88rem;
        color: #30463d;
      }
      .notice {
        font-size: 0.9rem;
        margin: 0;
        color: #30463d;
      }
      .notice a {
        color: var(--accent-2);
        font-weight: 700;
      }
      .post-send[hidden] { display: none; }
      .post-send {
        display: grid;
        gap: 8px;
        margin-top: 4px;
      }
      .post-send .helper { margin: 0; }
      .secondary-btn {
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 8px 12px;
        background: white;
        color: var(--ink);
        cursor: pointer;
        width: fit-content;
        font-weight: 600;
      }
      .lookup-results-grid {
        display: grid;
        gap: 8px;
      }
      .lookup-results-grid[hidden] { display: none; }
      .lookup-card {
        width: 100%;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        padding: 10px 12px;
        text-align: left;
        cursor: pointer;
        color: var(--ink);
      }
      .lookup-card.active {
        border-color: var(--accent);
        box-shadow: inset 0 0 0 1px var(--accent);
        background: #f4fbfa;
      }
      .lookup-card strong {
        display: block;
        font-size: 0.95rem;
      }
      .lookup-card span {
        display: block;
        font-size: 0.84rem;
        color: #3d4d44;
      }
      button[type="submit"] {
        border: 0;
        border-radius: 12px;
        padding: 12px 18px;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
        color: white;
        font-weight: 700;
        cursor: pointer;
        width: fit-content;
      }
      button[disabled] { opacity: 0.6; cursor: wait; }
      .status { min-height: 1.4em; font-size: 0.95rem; margin-bottom: 0; }
      .ok { color: #116530; }
      .err { color: #9f1239; }
      .hp { position: absolute; left: -9999px; top: -9999px; }
      @media (max-width: 700px) {
        body { padding: 12px; }
        .card { padding: 16px; border-radius: 14px; }
        .row { grid-template-columns: 1fr; }
        textarea { min-height: 130px; }
        button[type="submit"] { width: 100%; }
      }
    </style>
  </head>
  <body>
    <main class="card">
      <h1 data-i18n="title">Contact</h1>

      <form id="contact-form" novalidate>
        <div class="row">
          <label>
            <span data-i18n="name">Name</span>
            <input id="name-input" type="text" name="name" required maxlength="120" aria-describedby="name-error" />
            <p id="name-error" class="field-error" aria-live="polite"></p>
          </label>
          <label>
            <span data-i18n="email">Email</span>
            <input id="email-input" type="email" name="email" required maxlength="190" aria-describedby="email-error" />
            <p id="email-error" class="field-error" aria-live="polite"></p>
          </label>
        </div>

        <label class="hp" aria-hidden="true">
          <span data-i18n="leaveEmpty">Leave empty</span>
          <input type="text" name="company" autocomplete="off" tabindex="-1" />
        </label>

        <label>
          <span data-i18n="message">Message</span>
          <textarea id="message-input" name="message" required maxlength="12000" aria-describedby="message-error"></textarea>
        </label>
        <p id="message-error" class="field-error" aria-live="polite"></p>

        <label class="option-row">
          <input id="encrypt-toggle" type="checkbox" name="encrypted" />
          <span>
            <strong data-i18n="encryptLabel">Encrypt message with PGP</strong>
            <p data-i18n="encryptHelp">If enabled, your message is encrypted in your browser before sending.</p>
          </span>
        </label>

        <section id="pgp-section" class="pgp-section" hidden>
          <p id="pgp-fingerprint" class="helper"></p>
          <p class="helper" data-i18n="recipientInfo">Your message is encrypted to <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe7e2e8ffe3cdebe8e1eae3e8ffa3eee5">[email&#160;protected]</a> using the configured recipient public key.</p>
          <p id="recipient-pin-warning" class="helper" style="color:#9f1239" hidden></p>
          <button id="trust-recipient-key" type="button" class="secondary-btn" hidden>Trust new recipient key</button>
          <button id="lookup-key" type="button" class="secondary-btn" data-i18n="lookupKey">Find my public key automatically</button>
          <p id="lookup-status" class="helper" aria-live="polite"></p>
          <p id="lookup-select-label" class="helper" hidden data-i18n="lookupSelect">Select a key to import</p>
          <div id="lookup-results-grid" class="lookup-results-grid" hidden></div>
          <label>
            <span data-i18n="senderKey">Your public key (optional, for encrypted reply)</span>
            <textarea id="sender-public-key" name="senderPublicKey" maxlength="50000" aria-describedby="sender-key-error"></textarea>
          </label>
          <p id="sender-key-error" class="field-error" aria-live="polite"></p>
          <p class="helper" data-i18n="senderKeyHelp">If you add your public key, I can reply to you with encrypted email later.</p>
        </section>

        <p class="notice">
          <span data-i18n="privacyLead">By submitting this form, you agree to the processing of your data as described in the</span>
          <a href="/privacy/" data-i18n="privacyLink">privacy policy</a>.
        </p>

        <button type="submit" data-i18n="send">Send message</button>
        <p id="status" class="status" aria-live="polite" role="status"></p>
        <div id="post-send" class="post-send" hidden>
          <p class="helper" data-i18n="downloadHint">If needed, you can download the recipient public key used for encryption.</p>
          <button id="download-recipient-key" type="button" class="secondary-btn" data-i18n="downloadRecipientKey">Download recipient public key</button>
        </div>
      </form>
    </main>

    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="module" src="/js/contact-form.mjs"></script>
  </body>
</html>
