Salmenweg 14, CH-4057 Basel 
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>MeetFlow – Terminbuchung, Video-Meetings und Messenger in WordPress</title>
  <meta name="description" content="MeetFlow ist die professionelle Buchungsloesung fuer WordPress: Terminbuchung, Video-Meetings und Messenger-Integrationen in einem Plugin." />
  <style>
    :root {
      --bg: #0b1020;
      --bg-soft: #121a33;
      --card: #141f3d;
      --text: #edf2ff;
      --muted: #b8c2e6;
      --line: #2a3869;
      --brand: #5a7cff;
      --brand-2: #22d3ee;
      --ok: #34d399;
      --warn: #fbbf24;
      --max: 1160px;
      --radius: 16px;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      background: radial-gradient(1200px 700px at 80% -20%, #283a73 0%, transparent 60%), var(--bg);
      color: var(--text);
      line-height: 1.6;
    }

    a { color: inherit; text-decoration: none; }

    .wrap { width: min(100% - 2rem, var(--max)); margin-inline: auto; }
    .section { padding: 4.5rem 0; }
    .grid { display: grid; gap: 1rem; }
    .btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      padding: .8rem 1.1rem;
      border-radius: 10px;
      border: 1px solid transparent;
      font-weight: 600;
      transition: .2s ease;
    }
    .btn-primary { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #06122d; }
    .btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .btn-secondary { background: transparent; border-color: var(--line); color: var(--text); }
    .btn-secondary:hover { border-color: var(--brand); color: #dbe7ff; }

    .hero { padding: 5.5rem 0 4rem; }
    .pill {
      display: inline-flex; align-items: center; gap: .45rem;
      border: 1px solid var(--line); border-radius: 999px;
      padding: .35rem .65rem; color: var(--muted); font-size: .9rem;
      background: rgba(255,255,255,.02);
    }
    h1, h2, h3 { line-height: 1.2; margin: 0 0 .8rem; }
    h1 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -0.02em; }
    h2 { font-size: clamp(1.5rem, 2.7vw, 2.25rem); }
    h3 { font-size: 1.1rem; }
    .lead { color: var(--muted); font-size: 1.08rem; max-width: 68ch; }

    .hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1rem; align-items: stretch; margin-top: 1.5rem; }
    .panel {
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 1.15rem;
    }
    .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
    .kpi { background: rgba(255,255,255,.02); border: 1px solid var(--line); border-radius: 12px; padding: .75rem; }
    .kpi b { display: block; font-size: 1.05rem; margin-bottom: .2rem; }
    .kpi span { color: var(--muted); font-size: .9rem; }

    .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 1rem;
    }
    .card p, .card li { color: var(--muted); }
    .list { margin: .5rem 0 0 0; padding-left: 1rem; }
    .list li { margin: .35rem 0; }
    .icon { font-size: 1.2rem; }

    .cta {
      background: linear-gradient(135deg, rgba(90,124,255,.18), rgba(34,211,238,.14));
      border: 1px solid #3a529f;
      border-radius: var(--radius);
      padding: 1.2rem;
    }

    .faq details {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: .8rem .9rem;
      background: rgba(255,255,255,.02);
    }
    .faq details + details { margin-top: .7rem; }
    .faq summary { cursor: pointer; font-weight: 600; }
    .faq p { color: var(--muted); margin: .6rem 0 0; }

    .badge-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
    .badge {
      font-size: .85rem;
      color: #d8e4ff;
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: .3rem .6rem;
      background: rgba(255,255,255,.02);
    }

    footer {
      border-top: 1px solid var(--line);
      color: var(--muted);
      padding: 2rem 0 3rem;
      margin-top: 2rem;
      font-size: .95rem;
    }

    @media (max-width: 980px) {
      .hero-grid { grid-template-columns: 1fr; }
      .cards-3 { grid-template-columns: 1fr 1fr; }
      .kpis { grid-template-columns: 1fr 1fr 1fr; }
    }
    @media (max-width: 700px) {
      .cards-3 { grid-template-columns: 1fr; }
      .kpis { grid-template-columns: 1fr; }
      .section { padding: 3.4rem 0; }
    }
  </style>
</head>
<body>
  <header class="hero">
    <div class="wrap">
      <span class="pill">🚀 MeetFlow fuer WordPress</span>
      <h1>Terminbuchung, Video-Meetings und Messenger-Kommunikation in einem Plugin</h1>
      <p class="lead">
        MeetFlow ist die professionelle Buchungsloesung fuer Unternehmen, Agenturen und Dienstleister.
        Von der Anfrage bis zur Bestaetigung laeuft alles zentral in WordPress – effizient, modern und skalierbar.
      </p>
      <div class="btns">
        <a class="btn btn-primary" href="https://app.kitech.ai/plaene">Jetzt starten</a>
        <a class="btn btn-secondary" href="#funktionen">Funktionen ansehen</a>
      </div>

      <div class="hero-grid">
        <div class="panel">
          <h3>Mehr Buchungen. Weniger Aufwand.</h3>
          <p class="lead" style="font-size:1rem;">
            Automatisieren Sie Ihren Buchungsprozess und reduzieren Sie manuelle Abstimmungen auf ein Minimum.
          </p>
          <div class="badge-row">
            <span class="badge">✅ Buchungsformular</span>
            <span class="badge">✅ Verfuegbarkeiten</span>
            <span class="badge">✅ E-Mail-Bestaetigungen</span>
            <span class="badge">✅ DSGVO-Ready</span>
            <span class="badge">✅ Mobile optimiert</span>
          </div>
        </div>
        <div class="panel">
          <h3>Integration nach Bedarf</h3>
          <div class="kpis">
            <div class="kpi"><b>Teams</b><span>Business Meetings</span></div>
            <div class="kpi"><b>Zoom</b><span>Online Termine</span></div>
            <div class="kpi"><b>Google Meet</b><span>Schnelle Calls</span></div>
            <div class="kpi"><b>Webex</b><span>Enterprise Calls</span></div>
            <div class="kpi"><b>WhatsApp</b><span>Direkter Kanal</span></div>
            <div class="kpi"><b>Telegram</b><span>Bot Workflows</span></div>
          </div>
        </div>
      </div>
    </div>
  </header>

  <main>
    <section id="funktionen" class="section">
      <div class="wrap">
        <h2>Funktionen im Ueberblick</h2>
        <div class="grid cards-3" style="margin-top:1rem;">
          <article class="card">
            <h3><span class="icon">📅</span> Buchung & Kalender</h3>
            <ul class="list">
              <li>Online-Terminbuchung direkt in WordPress</li>
              <li>Flexible Business Hours pro Wochentag</li>
              <li>Verfuegbarkeits- und Blockierlogik</li>
              <li>Admin-Buchungslisten und Kalenderansicht</li>
            </ul>
          </article>
          <article class="card">
            <h3><span class="icon">✉️</span> Kommunikation</h3>
            <ul class="list">
              <li>Automatische E-Mail-Bestaetigungen</li>
              <li>Klarer Workflow fuer Support/Feedback</li>
              <li>Lizenzbasierte Zusatzkanäle</li>
              <li>Optional Messenger-Integrationen</li>
            </ul>
          </article>
          <article class="card">
            <h3><span class="icon">🔒</span> Kontrolle & Updates</h3>
            <ul class="list">
              <li>Lizenzverwaltung in der Plugin-Administration</li>
              <li>Update-Flow fuer lizenzierte Installationen</li>
              <li>WP.org-ready Readme und Asset-Strategie</li>
              <li>Saubere Erweiterbarkeit fuer neue Features</li>
            </ul>
          </article>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="wrap">
        <div class="cta">
          <h2 style="margin-bottom:.5rem;">Fuer wen ist MeetFlow gemacht?</h2>
          <p class="lead" style="margin:.2rem 0 0;">
            Ideal fuer Beratungen, Agenturen, Coaches, Praxen und Service-Teams,
            die ihren Terminprozess professionell digitalisieren moechten.
          </p>
          <div class="btns">
            <a class="btn btn-primary" href="https://app.kitech.ai/plaene">Plaene ansehen</a>
            <a class="btn btn-secondary" href="mailto:developer@kitech.ai">Demo anfragen</a>
          </div>
        </div>
      </div>
    </section>

    <section class="section faq">
      <div class="wrap">
        <h2>Haeufige Fragen</h2>
        <details open>
          <summary>Kann ich MeetFlow ohne Integrationen nutzen?</summary>
          <p>Ja. Die Basisfunktionen fuer Terminbuchung, Verfuegbarkeiten und E-Mail-Bestaetigungen funktionieren auch ohne externe Integrationen.</p>
        </details>
        <details>
          <summary>Unterstuetzt MeetFlow mehrere Kommunikationskanaele?</summary>
          <p>Ja. Je nach Lizenz koennen Teams, Zoom, Google Meet, Webex, WhatsApp und Telegram aktiviert werden.</p>
        </details>
        <details>
          <summary>Wie starte ich am schnellsten?</summary>
          <p>Plugin installieren, Einstellungen konfigurieren, Shortcode auf einer Seite einbinden und optional Ihre Integrationen aktivieren.</p>
        </details>
      </div>
    </section>
  </main>

  <footer>
    <div class="wrap">
      <strong>MeetFlow</strong> – Terminbuchung und Kommunikation in WordPress.
      <div style="margin-top:.45rem;">
        <a href="https://app.kitech.ai/plaene">Plaene</a> ·
        <a href="https://kitech.ai/en/">KITech.ai</a> ·
        <a href="mailto:developer@kitech.ai">Kontakt</a>
      </div>
    </div>
  </footer>
</body>
</html>