Korn&Krume
Handwerksbäckerei · Senden · seit 1987

Brot, das nach Brot schmeckt.

Seit 1987 backen wir jede Nacht von Hand – mit Sauerteig, Zeit und Mehl aus der Region.

Bestellung einsprechen Unser Angebot ansehen
Sauerteig Zeit Mehl aus der Region
frisch aufgeschnittenes Sauerteigbrot, warmes Morgenlicht, Mehlstaub
JEDE NACHT VON HAND GEBACKEN · SEIT 1987 · K&K
01 — Angebot

Unser Angebot

Heute Nacht gebacken, morgens im Regal. Was weg ist, ist weg.

Roggenlaib, dunkle Kruste 01
Roggenlaib1 kg
4,80 €
Dinkelkruste, bemehlt 02
Dinkelkruste750 g
4,20 €
Buttercroissant, goldbraun, blättrig 03
ButtercroissantStück
1,60 €
Apfeltasche mit Zuckerguss 04
ApfeltascheStück
2,10 €
02 — Öffnungszeiten

Wann der Ofen warm ist

Montag – Freitag 6–18 Uhr
Samstag 6–13 Uhr
Sonntag 8–11 Uhr
03 — Kontakt

Sag uns, was du dir wünschst.

Bestellung für den Sonntag, eine Frage zu Allergenen oder einfach ein Lob – sprich es uns ein. Kein Anruf, kein Formular.

Mühlenweg 3 · 48308 Senden
Speeeak · Widget im Text · data-art="text"
Sprachnachricht
kein Konto nötig
Beispielseite von Speeeak Das Widget läuft echt – probier es aus. Lehrgang Herunterladen (ZIP) ImpressumDatenschutz
korn-und-krume.html – die ganze Seite, 220 Zeilen (Bilder in img/, Schriften in fonts/)
<!doctype html>
<html lang="de">
<head>
  <!--
    Beispiel-Website von Speeeak: Bäckerei „Korn & Krume“ mit zwei Speeeak-Widgets (im Text und schwebend).
    Gestaltung: Oliver Wermeling. Alles hier ist gewöhnliches HTML/CSS – Speeeak-spezifisch sind nur die zwei <script>-Zeilen,
    die mit „Speeeak:“ beschriftet sind. Ersetze DEIN-SCHLÜSSEL (2×) durch den Schlüssel deines Widgets
    (Speeeak-Konto → Widgets). Bilder liegen in img/, Schriften in fonts/ (selbst gehostet, SIL Open Font License).
  -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Korn &amp; Krume – Bäckerei (Beispielseite von Speeeak)</title>
  <link rel="stylesheet" href="fonts/fonts.css">  <!-- Schriften selbst gehostet (Instrument Serif, Albert Sans – SIL Open Font License), keine Google-Server -->
  <style>
    html { scroll-behavior: smooth; }
    body { margin: 0; background: #fbf6ee; color: #2a211a; font-family: 'Albert Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
    body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .07; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
    a { color: #5b3a1e; text-decoration: none; }
    a:hover { color: #c9962e; }
    button { font-family: inherit; cursor: pointer; }
    @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(91,58,30,.35); } 70% { box-shadow: 0 0 0 22px rgba(91,58,30,0); } 100% { box-shadow: 0 0 0 0 rgba(91,58,30,0); } }
    @keyframes wave { 0%,100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
    @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
  </style>

</head>
<body>
<div style="position:relative;z-index:2;min-height:100vh;overflow-x:clip">

  <!-- Header -->
  <header style="position:sticky;top:0;z-index:40;background:rgba(251,246,238,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(91,58,30,.12)">
    <div style="max-width:1240px;margin:0 auto;padding:16px clamp(20px,4vw,48px);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap">
      <a href="#" style="display:flex;align-items:baseline;gap:6px;font-family:'Instrument Serif',Georgia,serif;font-size:28px;letter-spacing:-.01em;color:#2a211a">
        <span>Korn</span><span style="font-style:italic;color:#c9962e">&amp;</span><span>Krume</span>
      </a>
      <nav style="display:flex;align-items:center;gap:clamp(16px,3vw,36px);font-size:15px;font-weight:500">
        <a href="#angebot" style="background:none;border:0;padding:6px 0;color:#5b3a1e;font-size:15px;font-weight:500;border-bottom:1px solid transparent">Angebot</a>
        <a href="#zeiten" style="background:none;border:0;padding:6px 0;color:#5b3a1e;font-size:15px;font-weight:500;border-bottom:1px solid transparent">Öffnungszeiten</a>
        <a href="#kontakt" style="background:none;border:0;padding:6px 0;color:#5b3a1e;font-size:15px;font-weight:500;border-bottom:1px solid transparent">Kontakt</a>
      </nav>
    </div>
  </header>

  <!-- Hero -->
  <section style="position:relative;background:radial-gradient(900px 600px at 88% -10%, rgba(201,150,46,.22), transparent 60%)">
    <div style="max-width:1240px;margin:0 auto;padding:clamp(48px,7vw,96px) clamp(20px,4vw,48px) clamp(40px,6vw,80px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,5vw,72px);align-items:center">
      <div style="display:flex;flex-direction:column;gap:28px;animation:rise .8s cubic-bezier(.2,.7,.2,1) both">
        <div style="display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a0742a">
          <span style="width:28px;height:1px;background:#c9962e"></span>
          <span>Handwerksbäckerei · Senden · seit 1987</span>
        </div>
        <h1 style="margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(54px,8.2vw,116px);line-height:.94;letter-spacing:-.02em;color:#2a211a">Brot, das nach <em style="font-style:italic;color:#5b3a1e">Brot</em> schmeckt.</h1>
        <p style="margin:0;max-width:480px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:#5c4a3a">Seit 1987 backen wir jede Nacht von Hand – mit Sauerteig, Zeit und Mehl aus der Region.</p>
        <div style="display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:6px">
          <a href="#kontakt" style="display:inline-flex;align-items:center;gap:12px;background:#5b3a1e;color:#fbf6ee;border:0;border-radius:999px;padding:16px 26px 16px 20px;font-size:16px;font-weight:600;white-space:nowrap;box-shadow:0 18px 40px -18px rgba(91,58,30,.7);transition:transform .25s,background .25s">
            <span style="display:inline-flex;width:30px;height:30px;border-radius:50%;background:#c9962e;align-items:center;justify-content:center">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2a211a" stroke-width="2.4" stroke-linecap="round"><rect x="9" y="3" width="6" height="11" rx="3" fill="#2a211a" stroke="none"></rect><path d="M5 11a7 7 0 0 0 14 0"></path><path d="M12 18v3"></path></svg>
            </span>
            Bestellung einsprechen
          </a>
          <a href="#angebot" style="background:none;border:0;padding:14px 6px;color:#5b3a1e;font-size:16px;font-weight:500;white-space:nowrap;border-bottom:1px solid rgba(91,58,30,.35)">Unser Angebot ansehen</a>
        </div>
        <div style="display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:10px;padding-top:24px;border-top:1px solid rgba(91,58,30,.14);font-size:14px;color:#7a6652">
          <span style="display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:#c9962e"></span>Sauerteig</span>
          <span style="display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:#c9962e"></span>Zeit</span>
          <span style="display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:#c9962e"></span>Mehl aus der Region</span>
        </div>
      </div>

      <div style="position:relative;animation:rise 1s .15s cubic-bezier(.2,.7,.2,1) both">
        <div style="position:relative;aspect-ratio:4/5;max-height:720px;border-radius:28px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(43,26,16,.55)">
          <img src="img/hero-brot.jpg" alt="frisch aufgeschnittenes Sauerteigbrot, warmes Morgenlicht, Mehlstaub" style="width:100%;height:100%;object-fit:cover;display:block">
        </div>
        <div style="position:absolute;left:-22px;bottom:34px;width:150px;height:150px;border-radius:50%;background:#2b1a10;display:grid;place-items:center;box-shadow:0 24px 50px -20px rgba(43,26,16,.7)">
          <svg viewBox="0 0 160 160" style="position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite">
            <defs><path id="kk-circ" d="M80,80 m-56,0 a56,56 0 1,1 112,0 a56,56 0 1,1 -112,0"></path></defs>
            <text font-family="Albert Sans, sans-serif" font-size="12.5" font-weight="600" letter-spacing="3" fill="#fbf6ee"><textPath href="#kk-circ">JEDE NACHT VON HAND GEBACKEN · SEIT 1987 · </textPath></text>
          </svg>
          <span style="font-family:'Instrument Serif',Georgia,serif;font-size:34px;color:#c9962e;font-style:italic;line-height:1">K&amp;K</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Angebot -->
  <section id="angebot" style="padding:clamp(56px,8vw,112px) 0 clamp(48px,6vw,88px)">
    <div style="max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px)">
      <div style="display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-bottom:clamp(28px,4vw,48px)">
        <div style="display:flex;flex-direction:column;gap:14px">
          <div style="font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a0742a">01 — Angebot</div>
          <h2 style="margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:-.02em;color:#2a211a">Unser Angebot</h2>
        </div>
        <p style="margin:0;max-width:360px;font-size:15px;line-height:1.55;color:#7a6652">Heute Nacht gebacken, morgens im Regal. Was weg ist, ist weg.</p>
      </div>

      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(14px,2vw,24px)">
        <div style="background:#fff;border:1px solid #eadfcc;border-radius:22px;padding:10px 10px 18px;display:flex;flex-direction:column;gap:16px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s">
          <div style="position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#f1e7d6">
            <img src="img/roggenlaib.jpg" alt="Roggenlaib, dunkle Kruste" style="width:100%;height:100%;object-fit:cover;display:block">
            <span style="position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;letter-spacing:.14em;color:#fbf6ee;background:rgba(43,26,16,.75);padding:6px 10px;border-radius:999px;pointer-events:none">01</span>
          </div>
          <div style="display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 8px">
            <div style="display:flex;flex-direction:column;gap:3px"><span style="font-size:17px;font-weight:600;color:#2a211a">Roggenlaib</span><span style="font-size:13px;color:#7a6652">1 kg</span></div>
            <span style="font-family:'Instrument Serif',Georgia,serif;font-size:26px;color:#5b3a1e;white-space:nowrap">4,80 €</span>
          </div>
        </div>
        <div style="background:#fff;border:1px solid #eadfcc;border-radius:22px;padding:10px 10px 18px;display:flex;flex-direction:column;gap:16px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s">
          <div style="position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#f1e7d6">
            <img src="img/dinkelkruste.jpg" alt="Dinkelkruste, bemehlt" style="width:100%;height:100%;object-fit:cover;display:block">
            <span style="position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;letter-spacing:.14em;color:#fbf6ee;background:rgba(43,26,16,.75);padding:6px 10px;border-radius:999px;pointer-events:none">02</span>
          </div>
          <div style="display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 8px">
            <div style="display:flex;flex-direction:column;gap:3px"><span style="font-size:17px;font-weight:600;color:#2a211a">Dinkelkruste</span><span style="font-size:13px;color:#7a6652">750 g</span></div>
            <span style="font-family:'Instrument Serif',Georgia,serif;font-size:26px;color:#5b3a1e;white-space:nowrap">4,20 €</span>
          </div>
        </div>
        <div style="background:#fff;border:1px solid #eadfcc;border-radius:22px;padding:10px 10px 18px;display:flex;flex-direction:column;gap:16px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s">
          <div style="position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#f1e7d6">
            <img src="img/croissant.jpg" alt="Buttercroissant, goldbraun, blättrig" style="width:100%;height:100%;object-fit:cover;display:block">
            <span style="position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;letter-spacing:.14em;color:#fbf6ee;background:rgba(43,26,16,.75);padding:6px 10px;border-radius:999px;pointer-events:none">03</span>
          </div>
          <div style="display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 8px">
            <div style="display:flex;flex-direction:column;gap:3px"><span style="font-size:17px;font-weight:600;color:#2a211a">Buttercroissant</span><span style="font-size:13px;color:#7a6652">Stück</span></div>
            <span style="font-family:'Instrument Serif',Georgia,serif;font-size:26px;color:#5b3a1e;white-space:nowrap">1,60 €</span>
          </div>
        </div>
        <div style="background:#fff;border:1px solid #eadfcc;border-radius:22px;padding:10px 10px 18px;display:flex;flex-direction:column;gap:16px;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s">
          <div style="position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;background:#f1e7d6">
            <img src="img/apfeltasche.jpg" alt="Apfeltasche mit Zuckerguss" style="width:100%;height:100%;object-fit:cover;display:block">
            <span style="position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;letter-spacing:.14em;color:#fbf6ee;background:rgba(43,26,16,.75);padding:6px 10px;border-radius:999px;pointer-events:none">04</span>
          </div>
          <div style="display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 8px">
            <div style="display:flex;flex-direction:column;gap:3px"><span style="font-size:17px;font-weight:600;color:#2a211a">Apfeltasche</span><span style="font-size:13px;color:#7a6652">Stück</span></div>
            <span style="font-family:'Instrument Serif',Georgia,serif;font-size:26px;color:#5b3a1e;white-space:nowrap">2,10 €</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Öffnungszeiten -->
  <section id="zeiten" style="background:#2b1a10;color:#fbf6ee;position:relative;overflow:hidden">
    <div style="position:absolute;inset:0;background:radial-gradient(700px 400px at 10% 100%, rgba(201,150,46,.25), transparent 60%);pointer-events:none"></div>
    <div style="position:relative;max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,104px) clamp(20px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:clamp(28px,5vw,64px);align-items:end">
      <div style="display:flex;flex-direction:column;gap:14px">
        <div style="font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#c9962e">02 — Öffnungszeiten</div>
        <h2 style="margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(40px,5vw,68px);line-height:1;letter-spacing:-.02em">Wann der Ofen <em style="font-style:italic;color:#c9962e">warm</em> ist</h2>
      </div>
      <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;grid-column:span 1">
        <div style="display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid rgba(251,246,238,.22)">
          <span style="font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(251,246,238,.7)">Montag – Freitag</span>
          <span style="font-family:'Instrument Serif',Georgia,serif;font-size:clamp(34px,3.6vw,48px);line-height:1">6–18 Uhr</span>
        </div>
        <div style="display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid rgba(251,246,238,.22)">
          <span style="font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(251,246,238,.7)">Samstag</span>
          <span style="font-family:'Instrument Serif',Georgia,serif;font-size:clamp(34px,3.6vw,48px);line-height:1">6–13 Uhr</span>
        </div>
        <div style="display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid rgba(251,246,238,.22)">
          <span style="font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(251,246,238,.7)">Sonntag</span>
          <span style="font-family:'Instrument Serif',Georgia,serif;font-size:clamp(34px,3.6vw,48px);line-height:1">8–11 Uhr</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Kontakt + Widget im Text -->
  <section id="kontakt" style="padding:clamp(64px,9vw,128px) 0">
    <div style="max-width:1240px;margin:0 auto;padding:0 clamp(20px,4vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:clamp(32px,5vw,80px);align-items:center">
      <div style="display:flex;flex-direction:column;gap:22px">
        <div style="font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a0742a">03 — Kontakt</div>
        <h2 style="margin:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:clamp(42px,5.6vw,76px);line-height:.98;letter-spacing:-.02em;color:#2a211a">Sag uns, was du dir <em style="font-style:italic;color:#5b3a1e">wünschst</em>.</h2>
        <p style="margin:0;max-width:460px;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:#5c4a3a">Bestellung für den Sonntag, eine Frage zu Allergenen oder einfach ein Lob – sprich es uns ein. Kein Anruf, kein Formular.</p>
        <div style="display:flex;flex-direction:column;gap:6px;font-size:15px;color:#7a6652;margin-top:8px">
          <span>Mühlenweg 3 · 48308 Senden</span>
        </div>
      </div>

      <div style="position:relative">
          <div style="position:absolute;top:-16px;left:22px;z-index:3;display:inline-flex;align-items:center;gap:8px;background:#2b1a10;color:#fbf6ee;border-radius:999px;padding:7px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;box-shadow:0 10px 24px -12px rgba(43,26,16,.6)">
            <span style="width:7px;height:7px;border-radius:50%;background:#c9962e"></span>
            Speeeak · Widget im Text · data-art="text"
          </div>

        <div style="background:#fff;border:1px solid #eadfcc;border-radius:26px;padding:clamp(22px,3vw,34px);box-shadow:0 40px 80px -40px rgba(43,26,16,.45);display:flex;flex-direction:column;gap:22px">
          <div style="display:flex;align-items:center;justify-content:space-between;gap:12px">
            <div style="display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7a6652">
              <span style="width:8px;height:8px;border-radius:50%;background:#c9962e"></span>Sprachnachricht
            </div>
            <span style="font-size:12px;color:#a69684">kein Konto nötig</span>
          </div>

          <!-- Speeeak: Widget IM TEXT. Eine Zeile – der Recorder erscheint hier, die Höhe passt sich an.
               data-farbe übernimmt die Hausfarbe der Bäckerei, data-datenschutz verlinkt die eigene Datenschutzerklärung,
               data-rahmen="ohne" lässt den eigenen Rahmen des Widgets weg, weil die weiße Karte hier schon einer ist. -->
          <script src="https://speeeak.de/js/widget.js" data-widget="DEIN-SCHLÜSSEL" data-art="text" data-rahmen="ohne" data-farbe="#5b3a1e" data-datenschutz="https://speeeak.de/datenschutz" async></script>
        </div>
      </div>
    </div>
  </section>

  <footer style="border-top:1px solid rgba(91,58,30,.14)">
    <div style="max-width:1240px;margin:0 auto;padding:28px clamp(20px,4vw,48px) 110px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:13px;color:#7a6652">
      <span style="font-family:'Instrument Serif',Georgia,serif;font-size:18px;color:#2a211a">Korn <span style="font-style:italic;color:#c9962e">&amp;</span> Krume</span>
      <span>Mühlenweg 3 · 48308 Senden · Beispielseite</span>
    </div>
  </footer>

  

<!-- Speeeak: SCHWEBENDES Widget – Pille unten rechts auf jeder Seite, Klick öffnet ein Fenster.
     data-art="popup" (Alternativen: knopf, lasche, rund) · data-text Beschriftung · data-position rechts|links
     data-farbe Pille und Widget · data-textfarbe Schrift der Pille · data-datenschutz Link zu DEINER Datenschutzerklärung -->
<script src="https://speeeak.de/js/widget.js" data-widget="DEIN-SCHLÜSSEL" data-art="popup" data-text="Nachricht einsprechen" data-position="rechts" data-farbe="#5b3a1e" data-textfarbe="#fbf6ee" data-datenschutz="https://speeeak.de/datenschutz" async></script>

</body>
</html>