<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Imkerei Muster – Echter Honig aus [Ort]</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lato:wght@400;600&display=swap" rel="stylesheet">

  <style>
    :root {
      --color-primary: #E8A735;   /* Honig-Gold */
      --color-primary-dark: #C88311;
      --color-green: #6B8E23;
      --color-green-light: #A6C65B;
      --color-bg: #FFF9EF;
      --color-bg-white: #FFFFFF;
      --color-border: #E5DDCF;
      --color-text: #2F2415;
      --color-text-muted: #7A6D5A;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Lato", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 17px;
      line-height: 1.6;
      color: var(--color-text);
      background-color: var(--color-bg);
    }

    a {
      color: var(--color-primary-dark);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    h1, h2, h3, h4 {
      font-family: "Playfair Display", Georgia, "Times New Roman", serif;
      margin-top: 0;
      color: var(--color-text);
    }

    h1 {
      font-size: 46px;
      line-height: 1.2;
      margin-bottom: 0.4em;
    }

    h2 {
      font-size: 34px;
      line-height: 1.2;
      margin-bottom: 0.6em;
    }

    h3 {
      font-size: 24px;
      line-height: 1.3;
      margin-bottom: 0.4em;
    }

    p {
      margin-top: 0;
      margin-bottom: 1em;
    }

    .subheadline {
      font-family: "Lato", system-ui, sans-serif;
      font-weight: 600;
      font-size: 15px;
      letter-spacing: 0.5px;
      text-transform: none;
      color: var(--color-text-muted);
      margin-bottom: 1em;
    }

    .container {
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 16px;
    }

    /* Header / Navigation */

    header {
      background-color: var(--color-bg-white);
      border-bottom: 1px solid var(--color-border);
      position: sticky;
      top: 0;
      z-index: 50;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
    }

    .logo {
      font-family: "Playfair Display", serif;
      font-weight: 700;
      font-size: 24px;
      color: var(--color-primary-dark);
    }

    nav ul {
      list-style: none;
      display: flex;
      gap: 20px;
      margin: 0;
      padding: 0;
    }

    nav a {
      font-family: "Lato", sans-serif;
      font-size: 15px;
      font-weight: 500;
      letter-spacing: 0.5px;
      color: var(--color-text);
      text-transform: none;
    }

    nav a:hover {
      color: var(--color-primary-dark);
    }

    /* Hero */

    .section {
      padding: 60px 0;
    }

    .section-alt {
      background-color: var(--color-bg-white);
    }

    .hero {
      padding: 80px 0 70px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
      gap: 40px;
      align-items: center;
    }

    .hero-text p {
      max-width: 580px;
    }

    .hero-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 24px;
    }

    .btn {
      display: inline-block;
      padding: 12px 28px;
      font-family: "Lato", sans-serif;
      font-weight: 600;
      font-size: 15px;
      border-radius: 30px;
      border: 2px solid transparent;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .btn-primary {
      background-color: var(--color-primary);
      color: #FFFFFF;
    }

    .btn-primary:hover {
      background-color: var(--color-primary-dark);
      color: #FFFFFF;
    }

    .btn-secondary {
      background-color: transparent;
      color: var(--color-primary-dark);
      border-color: var(--color-primary);
    }

    .btn-secondary:hover {
      background-color: var(--color-primary);
      color: #FFFFFF;
    }

    .hero-image {
      width: 100%;
      border-radius: 16px;
      background-color: var(--color-bg-white);
      border: 1px solid var(--color-border);
      padding: 16px;
      text-align: center;
      font-size: 14px;
      color: var(--color-text-muted);
    }

    .hero-image-placeholder {
      width: 100%;
      aspect-ratio: 4/3;
      border-radius: 12px;
      background: radial-gradient(circle at 30% 20%, #FFF7DA, #F4C96A);
    }

    /* Two-column sections */

    .two-col {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
      gap: 40px;
      align-items: flex-start;
    }

    .two-col .image-box {
      width: 100%;
      border-radius: 16px;
      background-color: var(--color-bg);
      border: 1px solid var(--color-border);
      padding: 16px;
      min-height: 220px;
    }

    .section-header {
      text-align: left;
      margin-bottom: 24px;
    }

    .section-header.center {
      text-align: center;
    }

    .section-header p {
      max-width: 620px;
      margin-left: auto;
      margin-right: auto;
    }

    /* Produkte */

    .products-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px;
    }

    .product-card {
      background-color: var(--color-bg);
      border-radius: 16px;
      padding: 20px;
      border: 1px solid var(--color-border);
    }

    .product-card h3 {
      margin-bottom: 0.4em;
    }

    .product-badge {
      display: inline-block;
      padding: 2px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #FFFFFF;
      background-color: var(--color-green);
      margin-bottom: 8px;
    }

    /* Icons / Nutzen-Boxen */

    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 24px;
    }

    .benefit-card {
      background-color: var(--color-bg);
      border-radius: 16px;
      padding: 20px;
      border: 1px solid var(--color-border);
    }

    .benefit-title {
      font-family: "Lato", sans-serif;
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 6px;
    }

    /* Infobox Tipps */

    .tips-box {
      border-radius: 16px;
      border: 1px solid var(--color-border);
      background-color: var(--color-bg);
      padding: 20px 20px 16px;
      margin-top: 16px;
    }

    .tips-box h3 {
      font-size: 20px;
      margin-bottom: 8px;
    }

    .tips-box ul {
      padding-left: 18px;
      margin-top: 8px;
      margin-bottom: 0;
    }

    /* Kontakt */

    .contact-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
      gap: 40px;
    }

    .contact-block {
      background-color: var(--color-bg);
      border-radius: 16px;
      padding: 20px;
      border: 1px solid var(--color-border);
    }

    .contact-block p {
      margin-bottom: 0.6em;
    }

    .contact-heading {
      font-family: "Lato", sans-serif;
      font-weight: 600;
      font-size: 16px;
      margin-top: 1em;
      margin-bottom: 0.4em;
      color: var(--color-text);
    }

    .contact-form label {
      display: block;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
      width: 100%;
      padding: 8px 10px;
      border-radius: 6px;
      border: 1px solid var(--color-border);
      font-family: inherit;
      font-size: 14px;
      margin-bottom: 12px;
      background-color: #FFFDF8;
    }

    .contact-form textarea {
      min-height: 140px;
      resize: vertical;
    }

    .contact-form .checkbox-row {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      font-size: 13px;
      margin-bottom: 14px;
    }

    .contact-form input[type="checkbox"] {
      width: auto;
      margin-top: 3px;
    }

    .contact-form .btn-primary {
      font-size: 14px;
      padding: 10px 24px;
    }

    /* Footer */

    footer {
      background-color: var(--color-bg-white);
      border-top: 1px solid var(--color-border);
      padding: 24px 0 20px;
      font-size: 14px;
      color: var(--color-text-muted);
    }

    .footer-inner {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
    }

    .footer-links {
      display: flex;
      gap: 16px;
    }

    /* Responsive */

    @media (max-width: 900px) {
      .hero-grid,
      .two-col,
      .products-grid,
      .benefits-grid,
      .contact-grid {
        grid-template-columns: 1fr;
      }

      .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      header {
        position: static;
      }

      .header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      nav ul {
        flex-wrap: wrap;
      }
    }

    @media (max-width: 600px) {
      h1 {
        font-size: 32px;
      }

      h2 {
        font-size: 26px;
      }

      h3 {
        font-size: 20px;
      }

      .products-grid,
      .benefits-grid {
        grid-template-columns: 1fr;
      }

      .hero {
        padding-top: 56px;
      }
    }
  </style>
</head>
<body>

  <!-- HEADER -->
  <header>
    <div class="container header-inner">
      <div class="logo">Imkerei Muster</div>
      <nav>
        <ul>
          <li><a href="#start">Start</a></li>
          <li><a href="#imkerei">Unsere Imkerei</a></li>
          <li><a href="#produkte">Honig &amp; Produkte</a></li>
          <li><a href="#bienen">Bienen &amp; Natur</a></li>
          <li><a href="#kontakt">Kontakt &amp; Verkauf</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- HERO / START -->
  <section id="start" class="hero">
    <div class="container hero-grid">
      <div class="hero-text">
        <h1>Imkerei Muster – Echter Honig aus [Ort]</h1>
        <div class="subheadline">Handwerklicher Honig, schonend geerntet, direkt vom Imker.</div>
        <p>
          Seit vielen Jahren widmen wir uns in der Imkerei Muster mit Herz und Hand unseren Bienenvölkern.
          Unsere Bienen sammeln ihren Nektar in den Wiesen, Wäldern und Gärten rund um [Ort].
          So entsteht ein regionaler Honig, der den Charakter unserer Heimat in jedem Glas widerspiegelt.
        </p>

        <div class="hero-buttons">
          <a href="#produkte" class="btn btn-primary">Unsere Honige entdecken</a>
          <a href="#imkerei" class="btn btn-secondary">Mehr über unsere Imkerei</a>
        </div>
      </div>

      <div class="hero-image">
        <div class="hero-image-placeholder"></div>
        <p>Bildplatzhalter: Bienenstand, Honiggläser oder Bienen auf Blüte einfügen.</p>
      </div>
    </div>
  </section>

  <!-- UNSERE IMKEREI -->
  <section id="imkerei" class="section section-alt">
    <div class="container two-col">
      <div>
        <h2>Unsere Imkerei</h2>
        <p>
          Die Imkerei Muster ist eine kleine, familiengeführte Imkerei in [Ort].
          Aus einer privaten Leidenschaft für Bienen und Natur ist im Laufe der Zeit
          ein verantwortungsvoll geführter Imkereibetrieb entstanden. Im Mittelpunkt
          steht für uns stets das Wohl unserer Bienenvölker.
        </p>
        <p>
          Unsere Bienen stehen auf sorgfältig ausgewählten Standorten mit einer großen
          Vielfalt an Blühpflanzen. Dadurch entstehen Honige mit ganz unterschiedlichen
          Geschmacksnuancen – von mild und blumig bis würzig und kräftig.
        </p>
        <p>Unsere Arbeitsweise ist geprägt von:</p>
        <ul>
          <li>naturnaher und respektvoller Bienenhaltung</li>
          <li>schonender Ernte und Verarbeitung des Honigs</li>
          <li>transparenter Herkunft – vom Bienenstock bis zum Glas</li>
          <li>großer Sorgfalt bei Abfüllung und Lagerung</li>
        </ul>
        <p>
          Gerne geben wir bei Interesse Einblicke in unsere Arbeit. Nach vorheriger
          Terminabsprache sind Besuche an unseren Bienenständen oder in unserer
          kleinen Honigküche möglich.
        </p>
      </div>
      <div class="image-box">
        <p><strong>Bildplatzhalter:</strong> Foto vom Imker / von der Imkerfamilie oder vom Bienenstand.</p>
      </div>
    </div>
  </section>

  <!-- PRODUKTE -->
  <section id="produkte" class="section">
    <div class="container">
      <div class="section-header center">
        <h2>Unsere Honige &amp; Bienenprodukte</h2>
        <p>
          Je nach Jahreszeit, Wetter und Blütenangebot entstehen jede Saison besondere Honige
          mit eigenem Charakter. Hier findest du einen Überblick über unsere typischen Sorten
          und Produkte. Das Angebot kann je nach Ernte variieren.
        </p>
      </div>

      <div class="products-grid">
        <!-- Produkt 1 -->
        <div class="product-card">
          <div class="product-badge">Klassiker</div>
          <h3>Blütenhonig</h3>
          <p>
            Unser Blütenhonig entsteht aus dem Nektar verschiedenster Frühjahrs- und Sommerblüten
            in und um [Ort]. Er ist mild-aromatisch im Geschmack und eignet sich ideal als
            Brotaufstrich, zum Süßen von Tee oder zum Verfeinern von Desserts.
          </p>
        </div>

        <!-- Produkt 2 -->
        <div class="product-card">
          <div class="product-badge">Sommerernte</div>
          <h3>Sommertrachthonig</h3>
          <p>
            Der Sommertrachthonig ist etwas kräftiger im Aroma und vereint den Nektar sommerlicher
            Wiesen- und Feldblumen. Er ist die richtige Wahl für alle, die einen volleren,
            würzigeren Honiggeschmack bevorzugen.
          </p>
        </div>

        <!-- Produkt 3 -->
        <div class="product-card">
          <div class="product-badge">Für Kenner</div>
          <h3>Waldhonig</h3>
          <p>
            Unser Waldhonig stammt überwiegend aus Honigtau von Nadel- und Laubbäumen.
            Er ist dunkel in der Farbe, intensiv im Geschmack und besonders beliebt bei Honigkennern.
          </p>
        </div>

        <!-- Produkt 4 -->
        <div class="product-card">
          <div class="product-badge">Bienenwachs</div>
          <h3>Bienenwachs &amp; Kerzen</h3>
          <p>
            Aus dem reinen Bienenwachs unserer Völker fertigen wir in Handarbeit Kerzen
            und kleinere Wachswaren. Der natürliche Duft des Bienenwachses sorgt für eine
            warme, angenehme Atmosphäre – ganz ohne Zusätze.
          </p>
        </div>
      </div>

      <p style="margin-top: 24px; color: var(--color-text-muted);">
        Unser aktuelles Sortiment und verfügbare Mengen erfährst du gerne direkt bei uns.
        Kontaktiere uns einfach telefonisch oder per E-Mail.
      </p>
    </div>
  </section>

  <!-- WARUM REGIONALER HONIG -->
  <section class="section section-alt">
    <div class="container">
      <div class="section-header center">
        <h2>Warum regionaler Honig vom Imker vor Ort?</h2>
        <p>
          Mit jedem Glas Honig aus deiner Region unterstützt du nicht nur einen handwerklich arbeitenden Betrieb,
          sondern leistest auch einen Beitrag zur Bestäubung und zum Erhalt der Kulturlandschaft.
        </p>
      </div>

      <div class="benefits-grid">
        <div class="benefit-card">
          <div class="benefit-title">Kurze Wege</div>
          <p>
            Regionaler Honig legt nur kurze Wege zurück – von unseren Bienenstöcken in [Ort]
            bis zu deinem Frühstückstisch. Das schont Ressourcen und ermöglicht dir eine
            transparente Herkunft.
          </p>
        </div>
        <div class="benefit-card">
          <div class="benefit-title">Transparenz &amp; Vertrauen</div>
          <p>
            Du weißt, woher dein Honig kommt und wer dahintersteht. Gerne beantworten wir Fragen
            zu unserer Arbeitsweise und den Standorten unserer Völker.
          </p>
        </div>
        <div class="benefit-card">
          <div class="benefit-title">Qualität statt Masse</div>
          <p>
            Wir arbeiten in kleinen Chargen und mit viel Handarbeit. So bleibt der Honig
            weitgehend naturbelassen und behält seine wertvollen Inhaltsstoffe.
          </p>
        </div>
        <div class="benefit-card">
          <div class="benefit-title">Beitrag für die Bienen</div>
          <p>
            Mit dem Kauf von regionalem Honig unterstützt du die Pflege und Betreuung unserer Völker –
            und damit auch den Erhalt wichtiger Bestäuber in deiner Umgebung.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- BIENEN & NATUR -->
  <section id="bienen" class="section">
    <div class="container two-col">
      <div>
        <h2>Bienen schützen – Natur bewahren</h2>
        <p>
          Bienen sind für unser Ökosystem unersetzlich. Sie bestäuben einen großen Teil unserer
          Obst- und Gemüsepflanzen und tragen wesentlich zur Artenvielfalt in der Landschaft bei.
          Ohne sie wären viele heimische Früchte und Wildpflanzen in ihrer Existenz bedroht.
        </p>
        <p>
          Als Imkerei tragen wir Verantwortung – nicht nur für unsere eigenen Völker, sondern auch
          für das Zusammenspiel von Bienen, Natur und Landwirtschaft. Dazu gehören unter anderem:
        </p>
        <ul>
          <li>die Auswahl bienenfreundlicher Standorte</li>
          <li>eine möglichst naturnahe Führung der Bienenvölker</li>
          <li>eine angepasste und schonende Varroa-Bekämpfung</li>
          <li>der Dialog mit Landwirten und Gartenbesitzern</li>
        </ul>

        <div class="tips-box">
          <h3>Tipps für einen bienenfreundlichen Garten oder Balkon</h3>
          <ul>
            <li>Setze auf ungefüllte Blumen und Kräuter, die reichlich Nektar und Pollen bieten.</li>
            <li>Lass Teile des Gartens bewusst „wild“ – mit Wildblumen und heimischen Sträuchern.</li>
            <li>Verzichte nach Möglichkeit auf chemische Pflanzenschutzmittel.</li>
            <li>Biete Wasserstellen an, z.&nbsp;B. eine flache Schale mit Steinen als Landehilfe.</li>
          </ul>
        </div>
      </div>
      <div class="image-box">
        <p><strong>Bildplatzhalter:</strong> Biene auf Blüte, Blühwiese oder Naturaufnahme.</p>
      </div>
    </div>
  </section>

  <!-- KONTAKT & VERKAUF -->
  <section id="kontakt" class="section section-alt">
    <div class="container">
      <div class="section-header">
        <h2>Kontakt &amp; Verkauf</h2>
        <p>
          Du möchtest Honig bestellen, dich über unsere Imkerei informieren oder einen Besuchstermin
          vereinbaren? Wir freuen uns auf deine Nachricht.
        </p>
      </div>

      <div class="contact-grid">
        <!-- Kontaktdaten -->
        <div class="contact-block">
          <p class="contact-heading">Imkerei Muster</p>
          <p>
            [Name des Imkers / der Imkerfamilie]<br>
            [Straße Hausnummer]<br>
            [PLZ Ort]
          </p>

          <p>
            <span class="contact-heading">Telefon</span><br>
            [Telefonnummer]
          </p>

          <p>
            <span class="contact-heading">E-Mail</span><br>
            <a href="mailto:[E-Mail-Adresse]">[E-Mail-Adresse]</a>
          </p>

          <p class="contact-heading">Ab Hof Verkauf / Abholung</p>
          <p>
            Ab Hof Verkauf nach Vereinbarung.<br>
            Ruf uns gerne an oder schreibe uns eine Nachricht, um einen Termin zur Abholung zu vereinbaren.
          </p>

          <!-- Beispiel mit festen Zeiten (optional) 
          <p>
            Regelmäßige Abholzeiten:<br>
            Dienstag &amp; Donnerstag: 17:00 – 19:00 Uhr<br>
            Samstag: 10:00 – 13:00 Uhr
          </p>
          -->
        </div>

        <!-- Formular (Beispiel-HTML, in Elementor durch Formular-Widget ersetzen) -->
        <div class="contact-block">
          <form class="contact-form" action="#" method="post">
            <p class="contact-heading">Schreib uns eine Nachricht</p>

            <label for="name">Name *</label>
            <input id="name" name="name" type="text" required>

            <label for="email">E-Mail *</label>
            <input id="email" name="email" type="email" required>

            <label for="betreff">Betreff</label>
            <select id="betreff" name="betreff">
              <option value="Honigbestellung">Honigbestellung</option>
              <option value="Frage zur Imkerei">Frage zur Imkerei</option>
              <option value="Terminwunsch">Terminwunsch</option>
              <option value="Sonstiges">Sonstiges</option>
            </select>

            <label for="nachricht">Nachricht *</label>
            <textarea id="nachricht" name="nachricht" required></textarea>

            <div class="checkbox-row">
              <input id="ds" name="ds" type="checkbox" required>
              <label for="ds">
                Ich habe die <a href="[LINK-DATENSCHUTZ]" target="_blank" rel="noopener">Datenschutzerklärung</a>
                gelesen und akzeptiere sie.
              </label>
            </div>

            <button type="submit" class="btn btn-primary">Nachricht senden</button>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- FOOTER -->
  <footer>
    <div class="container footer-inner">
      <div>
        Imkerei Muster – Echter Honig aus [Ort]<br>
        [Straße Hausnummer] · [PLZ Ort] · Telefon: [Telefonnummer] ·
        <a href="mailto:[E-Mail-Adresse]">[E-Mail-Adresse]</a>
      </div>
      <div class="footer-links">
        <a href="[LINK-IMPRESSUM]">Impressum</a>
        <a href="[LINK-DATENSCHUTZ]">Datenschutzerklärung</a>
      </div>
    </div>
    <div class="container" style="margin-top: 8px; font-size: 13px;">
      Ehrliche Imkerei in Familienhand – seit [Jahr].
    </div>
  </footer>

</body>
</html>
