Korn&Krume
Artisan bakery · Senden · since 1987

Bread that tastes like bread.

Since 1987 we have baked by hand every night – with sourdough, time and flour from the region.

Leave your order by voice See our range
Sourdough Time Regional flour
freshly sliced sourdough bread, warm morning light, flour dust
BAKED BY HAND EVERY NIGHT · SINCE 1987 · K&K
01 — Our range

Our range

Baked tonight, on the shelf in the morning. When it’s gone, it’s gone.

Rye loaf, dark crust 01
Rye loaf1 kg
€4.80
Spelt crust loaf, floured 02
Spelt crust loaf750 g
€4.20
Butter croissant, golden brown, flaky 03
Butter croissanteach
€1.60
Apple turnover with icing 04
Apple turnovereach
€2.10
02 — Opening hours

When the oven is warm

Monday – Friday 6 am – 6 pm
Saturday 6 am – 1 pm
Sunday 8 am – 11 am
03 — Contact

Tell us what you’d like.

An order for Sunday, a question about allergens or simply a compliment – just say it. No phone call, no form.

Mühlenweg 3 · 48308 Senden, Germany
Speeeak · Inline widget · data-art="text"
Voice message
no account needed
Example page by Speeeak The widget is live – give it a try. Tutorial Download (ZIP) Legal noticePrivacy
korn-und-krume.html – the whole page, 220 lines (images in img/, fonts in fonts/)
<!doctype html>
<html lang="en">
<head>
  <!--
    Example website by Speeeak: bakery “Korn & Krume” with two Speeeak widgets (inline and floating).
    Design: Oliver Wermeling. Everything here is ordinary HTML/CSS – the only Speeeak-specific parts are the two <script> lines
    labelled “Speeeak:”. Replace YOUR-KEY (2×) with the key of your widget
    (Speeeak account → Widgets). Images are in img/, fonts in fonts/ (self-hosted, SIL Open Font License).
  -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Korn &amp; Krume – Bakery (example site by Speeeak)</title>
  <link rel="stylesheet" href="fonts/fonts.css">  <!-- Fonts self-hosted (Instrument Serif, Albert Sans – SIL Open Font License), no Google servers -->
  <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">Our range</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">Opening hours</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">Contact</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>Artisan bakery · Senden · since 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">Bread that tastes like <em style="font-style:italic;color:#5b3a1e">bread</em>.</h1>
        <p style="margin:0;max-width:480px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:#5c4a3a">Since 1987 we have baked by hand every night – with sourdough, time and flour from the 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>
            Leave your order by voice
          </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)">See our range</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>Sourdough</span>
          <span style="display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:#c9962e"></span>Time</span>
          <span style="display:flex;align-items:center;gap:8px"><span style="width:6px;height:6px;border-radius:50%;background:#c9962e"></span>Regional flour</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="freshly sliced sourdough bread, warm morning light, flour dust" 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">BAKED BY HAND EVERY NIGHT · SINCE 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>

  <!-- Our range -->
  <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 — Our range</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">Our range</h2>
        </div>
        <p style="margin:0;max-width:360px;font-size:15px;line-height:1.55;color:#7a6652">Baked tonight, on the shelf in the morning. When it’s gone, it’s gone.</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="Rye loaf, dark crust" 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">Rye loaf</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="Spelt crust loaf, floured" 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">Spelt crust loaf</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="Butter croissant, golden brown, flaky" 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">Butter croissant</span><span style="font-size:13px;color:#7a6652">each</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="Apple turnover with icing" 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">Apple turnover</span><span style="font-size:13px;color:#7a6652">each</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>

  <!-- Opening hours -->
  <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 — Opening hours</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">When the oven is <em style="font-style:italic;color:#c9962e">warm</em></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)">Monday – Friday</span>
          <span style="font-family:'Instrument Serif',Georgia,serif;font-size:clamp(34px,3.6vw,48px);line-height:1">6 am – 6 pm</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)">Saturday</span>
          <span style="font-family:'Instrument Serif',Georgia,serif;font-size:clamp(34px,3.6vw,48px);line-height:1">6 am – 1 pm</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)">Sunday</span>
          <span style="font-family:'Instrument Serif',Georgia,serif;font-size:clamp(34px,3.6vw,48px);line-height:1">8 am – 11 am</span>
        </div>
      </div>
    </div>
  </section>

  <!-- Contact + inline widget -->
  <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 — Contact</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">Tell us what you’d <em style="font-style:italic;color:#5b3a1e">like</em>.</h2>
        <p style="margin:0;max-width:460px;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:#5c4a3a">An order for Sunday, a question about allergens or simply a compliment – just say it. No phone call, no form.</p>
        <div style="display:flex;flex-direction:column;gap:6px;font-size:15px;color:#7a6652;margin-top:8px">
          <span>Mühlenweg 3 · 48308 Senden, Germany</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 · Inline widget · 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>Voice message
            </div>
            <span style="font-size:12px;color:#a69684">no account needed</span>
          </div>

          <!-- Speeeak: INLINE widget. One line – the recorder appears here, the height adjusts itself.
               data-farbe takes the bakery's brand colour, data-datenschutz links to your own privacy policy,
               data-rahmen="ohne" leaves out the widget's own frame, because the white card here already is one. -->
          <script src="https://speeeak.de/js/widget.js" data-widget="YOUR-KEY" data-art="text" data-rahmen="ohne" data-farbe="#5b3a1e" data-datenschutz="https://speeeak.io/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, Germany · Example site</span>
    </div>
  </footer>

  

<!-- Speeeak: FLOATING widget – pill button bottom right on every page, click opens a window.
     data-art="popup" (alternatives: knopf, lasche, rund) · data-text label · data-position rechts|links
     data-farbe pill button and widget · data-textfarbe text colour of the pill button · data-datenschutz link to YOUR privacy policy -->
<script src="https://speeeak.de/js/widget.js" data-widget="YOUR-KEY" data-art="popup" data-text="Leave a voice message" data-position="rechts" data-farbe="#5b3a1e" data-textfarbe="#fbf6ee" data-datenschutz="https://speeeak.io/datenschutz" async></script>

</body>
</html>