index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="theme-color" content="#0b111c" />
  <title>Vectormap – Schweizer Geodaten als Vektorkarten</title>
  <meta name="description" content="Vectormap stellt offene Geodaten der Schweiz als performante Vektordatensätze bereit und zeigt ihren Einsatz in modernen Webkarten.">
  <link rel="manifest" href="manifest.webmanifest">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Source+Sans+3:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="icon" type="image/png" href="assets/images/logo_v.png">
</head>
<body>
  <header class="site-header">
    <div class="site-container header-inner">
      <a class="brand" href="./">
        <img class="brand-logo" src="assets/images/logo_vectormap_transparent.png" alt="Vectormap Logo">
      </a>
      <nav class="main-nav">
        <a href="./" aria-current="page">Start</a>
        <a href="dataset/">Datensatz</a>
        <a href="styles/">Styles</a>
        <a href="maps/">Karten</a>
        <a href="licenses/">Lizenzen &amp; Quellen</a>
        <a href="about/">Über Vectormap</a>
      </nav>
    </div>
  </header>

  <main>
    <section class="hero">
      <div class="site-container hero-grid">
        <div class="reveal">
          <p class="eyebrow">Offene Vektordaten für die Schweiz</p>
          <h1 class="hero-title">Vectormap – Schweizer Geodaten als Vektorkarten.</h1>
          <p class="hero-lead">Vectormap stellt offene Geodaten der Schweiz als performante Vektordatensätze bereit. Fokus ist die amtliche Vermessung (AV), aufbereitet als PMTiles und sofort nutzbar in modernen Webkarten mit MapLibre.</p>
          <p class="hero-lead">Du behältst die Kontrolle: eigenes Hosting, klare Lizenzen, kein Tracking und keine Plattformbindung.</p>
          <div class="hero-actions">
            <a class="btn btn-primary" href="dataset/">Datensatz entdecken</a>
            <a class="btn btn-secondary" href="styles/">Kartenstile ansehen</a>
          </div>
        </div>
        <div class="hero-card reveal" style="--delay: 0.1s">
          <ul>
            <li><strong>Datengrundlage:</strong> Amtliche Vermessung (AV)</li>
            <li><strong>Format:</strong> Vektorkacheln als PMTiles</li>
            <li><strong>Darstellung:</strong> MapLibre-Styles nach Bedarf</li>
            <li><strong>Prinzip:</strong> Offen, nachvollziehbar, kontrollierbar</li>
          </ul>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="site-container">
        <div class="section-heading">
          <h2 class="section-title">Warum Vectormap?</h2>
          <p class="section-lead">Klare Technikentscheidungen, transparente Quellen und eine saubere Trennung von Daten und Darstellung.</p>
        </div>
        <div class="feature-grid stagger">
          <article class="feature-card">
            <span class="tag">Offen</span>
            <h3 class="card-title">Geodaten ohne Plattformbindung</h3>
            <p class="card-text">Die Daten bleiben im eigenen Hosting. Quellen und Lizenzen sind nachvollziehbar dokumentiert.</p>
          </article>
          <article class="feature-card">
            <span class="tag">Performant</span>
            <h3 class="card-title">PMTiles für effiziente Auslieferung</h3>
            <p class="card-text">Eine Datei, viele Kacheln. Ideal für statisches Hosting, schnelles Caching und stabile Deployments.</p>
          </article>
          <article class="feature-card">
            <span class="tag">Flexibel</span>
            <h3 class="card-title">Darstellung frei wählbar</h3>
            <p class="card-text">Ein Datensatz, mehrere Stile. Von neutral bis kontrastreich, ohne Daten zu duplizieren.</p>
          </article>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="site-container">
        <div class="section-heading">
          <h2 class="section-title">Schneller Einstieg</h2>
          <p class="section-lead">Alle wichtigen Bereiche auf einen Blick.</p>
        </div>
        <div class="card-grid stagger">
          <article class="card">
            <h3 class="card-title">Datensatz entdecken</h3>
            <p class="card-text">Hintergrund zur amtlichen Vermessung, Massstäbe und technische Hinweise.</p>
            <a class="card-link" href="dataset/">Zu den Daten <span>→</span></a>
          </article>
          <article class="card">
            <h3 class="card-title">Kartenstile ansehen</h3>
            <p class="card-text">Stile, die den Datensatz unterschiedlich interpretieren.</p>
            <a class="card-link" href="styles/">Zu den Styles <span>→</span></a>
          </article>
          <article class="card">
            <h3 class="card-title">Karten entdecken</h3>
            <p class="card-text">Interaktive Demos und modulare Bausteine für eigene Projekte.</p>
            <a class="card-link" href="maps/">Zu den Karten <span>→</span></a>
          </article>
          <article class="card">
            <h3 class="card-title">Lizenzen &amp; Quellen</h3>
            <p class="card-text">Lizenztexte, Attribution und kantonale Bedingungen.</p>
            <a class="card-link" href="licenses/">Zu den Lizenzen <span>→</span></a>
          </article>
          <article class="card">
            <h3 class="card-title">Über Vectormap</h3>
            <p class="card-text">Motivation, Hintergrund und wer dahintersteht.</p>
            <a class="card-link" href="about/">Mehr erfahren <span>→</span></a>
          </article>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="site-container">
        <div class="section-heading">
          <h2 class="section-title">Transparenz statt Abhängigkeit</h2>
          <p class="section-lead">Ein nüchterner Vergleich ohne Marketing-Sprech.</p>
        </div>
        <div class="table-wrapper">
          <table class="comparison-table">
            <thead>
              <tr>
                <th>Aspekt</th>
                <th>Proprietäre Plattformen</th>
                <th>Vectormap</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Lizenzmodell</td>
                <td>Komplex, oft nutzungsabhängig</td>
                <td>Klar, offen dokumentiert</td>
              </tr>
              <tr>
                <td>Datenkontrolle</td>
                <td>Plattform bestimmt Darstellung</td>
                <td>Volle Kontrolle über Daten &amp; Stil</td>
              </tr>
              <tr>
                <td>Tracking</td>
                <td>Häufig integriert</td>
                <td>Keine Vorgaben, keine Pflicht</td>
              </tr>
              <tr>
                <td>Hosting</td>
                <td>Gebunden an Anbieter</td>
                <td>Eigener Speicher, eigene Infrastruktur</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="site-container">
        <div class="section-heading">
          <h2 class="section-title">Worum es hier geht</h2>
          <p class="section-lead">Vectormap ist Dokumentation, Demonstrator und Einladung zur Mitwirkung. Mehr über das Projekt findest du unter <a href="about/">Über Vectormap</a>.</p>
        </div>
        <div class="feature-grid stagger">
          <article class="feature-card">
            <h3 class="card-title">Dokumentation</h3>
            <p class="card-text">Erklärt Daten, Formate und technische Entscheidungen klar und nachvollziehbar.</p>
          </article>
          <article class="feature-card">
            <h3 class="card-title">Karten</h3>
            <p class="card-text">Zeigt anhand interaktiver Karten, dass offene Geodaten professionell eingesetzt werden können.</p>
          </article>
          <article class="feature-card">
            <h3 class="card-title">Einladung</h3>
            <p class="card-text">Richtet sich an alle, die offene Karten mitgestalten, testen oder verbessern möchten.</p>
          </article>
        </div>
      </div>
    </section>

  </main>

  <footer class="site-footer">
    <div class="site-container footer-grid">
      <div class="footer-links">
        <a href="dataset/">Datensatz</a>
        <a href="styles/">Styles</a>
        <a href="maps/">Karten</a>
        <a href="licenses/">Lizenzen &amp; Quellen</a>
        <a href="about/">Über Vectormap</a>
        <a href="https://github.com/FabianRechsteiner" target="_blank" rel="noopener">GitHub</a>
      </div>
      <p class="footer-note">Daten basieren auf offenen Geodaten der Schweiz.</p>
      <p class="footer-note"><a href="https://github.com/FabianRechsteiner/vectormap" target="_blank" rel="noopener">© Vectormap</a></p>
    </div>
  </footer>
  <script src="assets/js/pwa-register.js"></script>
</body>
</html>