<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <script src="/assets/js/protect.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>DexBinder</title>
  <meta name="description" content="DexBinder ist deine offline-first Sammlung fuer Karten, Binder, Vault, Scans und geteilte Binder.">
  <link rel="stylesheet" href="/assets/fonts/fonts.css">
  <link rel="stylesheet" href="/assets/css/site.css">
</head>
<body class="has-side-nav">
  <nav class="side-nav" aria-label="DexBinder App-Navigation">
    <a class="side-item is-active" href="/">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11.5 12 4l8 7.5"/><path d="M6 10v9h5v-5h2v5h5v-9"/></svg>
      <span>Start</span>
    </a>
    <a class="side-item" href="#binder-regal">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h9a3 3 0 0 1 3 3v13H9a3 3 0 0 1-3-3V4Z"/><path d="M9 4v13"/></svg>
      <span>Binder</span>
    </a>
    <a class="side-sphere" href="#scanner" aria-label="Scanner">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8V6a2 2 0 0 1 2-2h2M20 8V6a2 2 0 0 0-2-2h-2M4 16v2a2 2 0 0 0 2 2h2M20 16v2a2 2 0 0 1-2 2h-2"/><circle cx="12" cy="12" r="3.4"/></svg>
    </a>
    <a class="side-item" href="#listen">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6h11M8 12h11M8 18h11"/><circle cx="4.2" cy="6" r="1.3"/><circle cx="4.2" cy="12" r="1.3"/><circle cx="4.2" cy="18" r="1.3"/></svg>
      <span>Listen</span>
    </a>
    <a class="side-item" href="#listen">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.35-9.5-8.8C.6 7.9 2 4.5 5.3 4a4.6 4.6 0 0 1 4 1.7A4.6 4.6 0 0 1 13.3 4c3.3.5 4.7 3.9 2.8 7.2C19 15.65 12 20 12 20Z"/></svg>
      <span>Wünsche</span>
    </a>
    <a class="side-item" href="#grading">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="5.2"/><path d="M9 13.5 7.5 21 12 18.5 16.5 21 15 13.5"/></svg>
      <span>Grading</span>
    </a>
  </nav>

  <header class="topbar" aria-label="DexBinder Navigation">
    <a class="brand" href="/" aria-label="DexBinder Startseite">
      <img src="/assets/img/app-icon.png" alt="" width="34" height="34">
      <span>DexBinder</span>
    </a>
    <nav class="navlinks" aria-label="Rechtliches und App Links">
      <a href="/app/">App öffnen</a>
      <a href="/privacy/">Datenschutz</a>
    </nav>
  </header>

  <main class="home-shell">
    <section class="hero" aria-labelledby="hero-title">
      <div class="hero-copy">
        <p class="eyebrow">Offline-first Card Binder</p>
        <h1 id="hero-title">DexBinder</h1>
        <p class="lead">Deine Sammlung, Binder, Vault und Scans in einer ruhigen App-Oberflaeche. Lokal zuerst, Cloud nur wenn du sie brauchst.</p>
        <div class="actions" aria-label="DexBinder Aktionen">
          <a class="button button-primary" href="/app/">App öffnen</a>
          <a class="button button-secondary" href="/privacy/">Datenschutz</a>
        </div>
      </div>

      <div class="device-preview" aria-label="DexBinder App Vorschau">
        <div class="phone-frame">
          <div class="app-screen">
            <div class="app-topbar">
              <div class="app-search">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.2-3.2"/></svg>
                <span>Karte suchen …</span>
              </div>
              <div class="app-avatar">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="8" r="3.6"/><path d="M5 20c0-3.6 3.1-5.6 7-5.6s7 2 7 5.6"/></svg>
              </div>
            </div>

            <div class="app-hero-card">
              <div class="hero-row">
                <span class="hero-label">SAMMLUNGSWERT</span>
                <svg class="hero-swap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 8h11l-2.5-2.5M17 16H6l2.5 2.5"/></svg>
              </div>
              <div class="hero-value-row">
                <span class="hero-value">CHF 4'280.00</span>
                <span class="hero-delta">+12.4 %</span>
              </div>
              <svg class="hero-spark" viewBox="0 0 300 60" preserveAspectRatio="none" aria-hidden="true">
                <path d="M0 46 L30 42 L60 44 L90 34 L120 36 L150 26 L180 30 L210 18 L240 22 L270 10 L300 8" fill="none" stroke="#5edc8f" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <div class="hero-foot">
                <span class="hero-chip">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/><path d="M17 7h4v4"/></svg>
                  +CHF 640 seit Kauf
                </span>
                <span class="hero-period">Monat ▾</span>
              </div>
            </div>

            <div class="app-bento">
              <a class="bento-tile bento-dex" href="#sammlung">
                <img src="/assets/img/pokedex_red.webp" alt="">
                <div class="bento-meta">
                  <span>Dex-Tracker</span>
                  <strong>386/1025</strong>
                </div>
              </a>
              <a class="bento-tile" href="#sets-browser">
                <div class="bento-meta">
                  <span>Set-Tracker</span>
                  <strong>Pro Set</strong>
                </div>
              </a>
              <a class="bento-tile" href="#vault">
                <div class="bento-meta">
                  <span>Vault</span>
                  <strong class="pos">+CHF 210</strong>
                </div>
              </a>
              <a class="bento-tile" href="#scanner">
                <div class="bento-meta">
                  <span>Letzte Scans</span>
                  <strong>912</strong>
                </div>
              </a>
            </div>

            <div class="app-section">Wertvollste Karten</div>
            <div class="app-podium">
              <span class="pod pod-2"></span>
              <span class="pod pod-1"></span>
              <span class="pod pod-3"></span>
            </div>
          </div>

          <div class="app-nav">
            <span class="nav-ic is-active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11.5 12 4l8 7.5"/><path d="M6 10v9h5v-5h2v5h5v-9"/></svg></span>
            <span class="nav-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h9a3 3 0 0 1 3 3v13H9a3 3 0 0 1-3-3V4Z"/><path d="M9 4v13"/></svg></span>
            <span class="nav-sphere"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8V6a2 2 0 0 1 2-2h2M20 8V6a2 2 0 0 0-2-2h-2M4 16v2a2 2 0 0 0 2 2h2M20 16v2a2 2 0 0 1-2 2h-2"/><circle cx="12" cy="12" r="3.4"/></svg></span>
            <span class="nav-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6h11M8 12h11M8 18h11"/></svg></span>
            <span class="nav-ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.35-9.5-8.8C.6 7.9 2 4.5 5.3 4a4.6 4.6 0 0 1 4 1.7A4.6 4.6 0 0 1 13.3 4c3.3.5 4.7 3.9 2.8 7.2C19 15.65 12 20 12 20Z"/></svg></span>
          </div>
        </div>
      </div>
    </section>

    <section class="section-head">
      <p class="eyebrow">Alle Funktionen</p>
      <h2 class="section-title">Was in DexBinder steckt</h2>
      <p class="lead">Jede Kachel unten ist eine echte Funktion aus der App — 1:1 gespiegelt, ohne Extras, die es dort nicht gibt.</p>
    </section>

    <section class="feature-strip" aria-label="DexBinder Funktionen">
      <article id="sammlung">
        <span class="feature-icon">01</span>
        <h3>Sammlung &amp; Dex</h3>
        <p>Kartenbestand, Pokedex-Fortschritt und Kartensuche in einer Uebersicht.</p>
        <ul class="feature-sub">
          <li>Pokedex-Fortschritt je Region, inkl. Shiny/Normal-Sprites</li>
          <li>Eigener Hintergrund pro Pokemon, frei zuschneid- und verschiebbar</li>
          <li>Karten nach Spezies, Set oder Illustrator filtern</li>
          <li>Inline-Kartensuche direkt in der Kopfzeile</li>
        </ul>
      </article>
      <article id="sets-browser">
        <span class="feature-icon">02</span>
        <h3>Sets-Browser</h3>
        <p>Alle Sets durchsuchen, Set-Details oeffnen und den eigenen Fortschritt sehen.</p>
        <ul class="feature-sub">
          <li>Set-Tracker mit allen verfuegbaren Sets</li>
          <li>Set-Detail: nur fehlende oder alle Karten anzeigen</li>
          <li>Umschalten zwischen normalem Set und Master-Set</li>
        </ul>
      </article>
      <article id="binder-regal">
        <span class="feature-icon">03</span>
        <h3>Binder-Regal</h3>
        <p>Ledermappen im 3D-Schrank anlegen, anordnen und Seite fuer Seite durchblaettern.</p>
        <ul class="feature-sub">
          <li>3D-Vitrinen-Schrank: Binder antippen zum Herausziehen</li>
          <li>Leder-Farbe und Spaltenzahl beim Anlegen waehlen</li>
          <li>Binder umbenennen oder loeschen, Karten bleiben in der Sammlung</li>
        </ul>
      </article>
      <article id="scanner">
        <span class="feature-icon">04</span>
        <h3>Scanner</h3>
        <p>Karten per Kamera erkennen — OCR und Bild-Erkennung laufen on-device.</p>
        <ul class="feature-sub">
          <li>Live-Scan mit Kamera, Erkennung laeuft direkt auf dem Geraet</li>
          <li>Scan-Verlauf einsehbar und bei Bedarf loeschbar</li>
          <li>Barcode-Scan fuer versiegelte Produkte</li>
        </ul>
      </article>
      <article>
        <span class="feature-icon">05</span>
        <h3>Sealed oeffnen</h3>
        <p>Booster und Displays im RIP-Modus oeffnen und Pulls automatisch erfassen.</p>
        <ul class="feature-sub">
          <li>Produkt per Barcode (EAN) oder manuell anlegen</li>
          <li>Packs und Karten pro Pack hinterlegen</li>
          <li>Pulls einzeln erfassen, bester Pull wird markiert</li>
        </ul>
      </article>
      <article>
        <span class="feature-icon">06</span>
        <h3>Verkaufen</h3>
        <p>Karten im Sell-Modus direkt als verkauft markieren, Bestand bleibt sauber.</p>
        <ul class="feature-sub">
          <li>Sell-Modus direkt aus dem Scanner heraus</li>
          <li>Verkaufspreis erfassen, Bestand aktualisiert sich sofort</li>
          <li>Einzelkarten oder versiegelte Produkte verkaufen</li>
        </ul>
      </article>
      <article>
        <span class="feature-icon">07</span>
        <h3>Tauschen</h3>
        <p>Trade-Modus fuer den Tausch zwischen Sammlern.</p>
        <ul class="feature-sub">
          <li>Getrennte Seiten fuer „Du gibst" und „Du bekommst"</li>
          <li>Bargeld-Ausgleich erhalten oder bezahlt hinzufuegen</li>
          <li>Trade als Entwurf speichern oder direkt abschliessen</li>
        </ul>
      </article>
      <article id="grading">
        <span class="feature-icon">08</span>
        <h3>Grading</h3>
        <p>Kartenzustand dokumentieren, bevor eine Karte eingeschickt oder verkauft wird.</p>
        <ul class="feature-sub">
          <li>Kartenzustand mit markierten Fehlerstellen dokumentieren</li>
          <li>Karten nach fehlerfrei und graded gruppieren</li>
          <li>Eigene Notiz je Karte, z. B. „kleiner Kratzer“</li>
        </ul>
      </article>
      <article id="vault">
        <span class="feature-icon">09</span>
        <h3>Vault</h3>
        <p>Versiegelte Produkte, geoeffnete Lots, Einzelkarten und Verkaeufe im Blick.</p>
        <ul class="feature-sub">
          <li>Bestand und Aktivitaeten (Kauf, Oeffnung, Verkauf) getrennt</li>
          <li>Versiegelte Produkte und Einzelkarten separat gefuehrt</li>
          <li>Realisierter Gewinn/Verlust je Bereich sichtbar</li>
        </ul>
      </article>
      <article id="listen">
        <span class="feature-icon">10</span>
        <h3>Listen &amp; Wunschliste</h3>
        <p>Eigene Listen fuehren und Wunschkarten getrennt von der Sammlung verfolgen.</p>
        <ul class="feature-sub">
          <li>Eigene Listen anlegen, z. B. SAR, Tera ex oder Full Art</li>
          <li>Wunschliste getrennt von der eigentlichen Sammlung</li>
          <li>Tauschliste mit anderen Sammlern teilen</li>
        </ul>
      </article>
      <article>
        <span class="feature-icon">11</span>
        <h3>Live Binder teilen</h3>
        <p>Binder ueber verifizierte Links auf dexbinder.com teilen, live mit Aktivitaet.</p>
        <ul class="feature-sub">
          <li>Verifizierte Share-Links direkt auf dexbinder.com</li>
          <li>Live-Aktivitaet, z. B. Karte verkauft oder zurueckgezogen</li>
          <li>Read-only-Zugriff fuer eingeladene Sammler</li>
        </ul>
      </article>
      <article>
        <span class="feature-icon">12</span>
        <h3>Cloud-Sync</h3>
        <p>Optionales Konto synchronisiert die Sammlung geraeteuebergreifend.</p>
        <ul class="feature-sub">
          <li>Login per E-Mail-Code oder Apple-/Google-Konto</li>
          <li>Cloud-Profil vorbereiten und Sammlung geraeteuebergreifend nutzen</li>
          <li>Konto inkl. aller Cloud-Daten jederzeit vollstaendig loeschbar</li>
        </ul>
      </article>
      <article>
        <span class="feature-icon">13</span>
        <h3>Portfolio &amp; Wert</h3>
        <p>Sammlungswert und Gewinn/Verlust im Zeitverlauf nach Tag, Woche, Monat, Jahr.</p>
        <ul class="feature-sub">
          <li>Gesamtwert nach Zeitraum: Tag, Woche, Monat, Jahr</li>
          <li>Anzeige umschaltbar zwischen Betrag und Prozent</li>
          <li>Vault-Bestand und Karten getrennt ausgewiesen</li>
        </ul>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <span>&copy; 2026 DexBinder</span>
    <a href="/privacy/">Datenschutzerklaerung</a>
  </footer>
</body>
</html>
