Seit 1987 backen wir jede Nacht von Hand – mit Sauerteig, Zeit und Mehl aus der Region.
Heute Nacht gebacken, morgens im Regal. Was weg ist, ist weg.
Bestellung für den Sonntag, eine Frage zu Allergenen oder einfach ein Lob – sprich es uns ein. Kein Anruf, kein Formular.
<!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 & 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">&</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&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">&</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>