/* =========================================================================== Beispiel-Shops – gemeinsames Designsystem --------------------------------------------------------------------------- Der Aufbau ist bei ALLEN Shops identisch (Icons, Kategorie-Bänder, Umschalter, Gerichte-Zeilen). Unterschiedlich ist nur: 1. das Emblem/Logo im Hero 2. die Marken-Farbe -> --marke Alles Weitere (Hintergrund-Stich, aktive Zustände, Bänder, Linien, Buttons) wird aus --marke abgeleitet. Ein Shop braucht also genau EINE Farbangabe: =========================================================================== */ :root { --ink: #241d17; --nebel: #6d6353; --weiss: #fffdf9; --sans: "Bricolage", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Bon", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Serif fürs Restaurant-Schild – gibt jedem Shop den Gasthaus-Charakter. */ --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --wrap: 720px; } /* --- Aus der Marken-Farbe abgeleitete Palette ---------------------------- Pflicht je Shop: --marke (Akzent: „+"-Knöpfe, Fokus, CTA) Optional je Shop: --aktiv (aktive Chips/Umschalter – z. B. Schwarz statt der Markenfarbe, wenn das Logo dunkel ist) --preis (Preisfarbe, sonst normale Textfarbe) --bg (Seitengrund, sonst aus --marke abgeleitet) --band-ar (Seitenverhältnis der Kategoriebänder) */ .shop { --marke-d: color-mix(in srgb, var(--marke) 78%, #000); --marke-hell: color-mix(in srgb, var(--marke) 14%, #fff); /* Hintergrund bekommt einen Stich der Logofarbe, damit alles zusammenpasst */ --bg: color-mix(in srgb, var(--marke) 6%, #faf6ee); --band: color-mix(in srgb, var(--marke) 13%, #f2eadd); --linie: color-mix(in srgb, var(--marke) 16%, #e6dccb); --karte: color-mix(in srgb, var(--marke) 3%, var(--weiss)); --aktiv: var(--marke); --preis: var(--ink); --band-ar: 1440 / 272; } * { box-sizing: border-box; } body.shop { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-weight: 600; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; } :focus-visible { outline: 3px solid var(--marke); outline-offset: 3px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: clamp(.9rem, 3.5vw, 1.4rem); } /* --- Beispiel-Hinweis: muss auffallen, niemand soll hier bestellen wollen -- Scrollt bewusst weg – darunter übernimmt die klebende Shop-Leiste. */ .hinweis { background: var(--ink); color: #f6f1e7; padding: .7rem clamp(.9rem, 3.5vw, 1.4rem); font-size: .82rem; font-weight: 600; text-align: center; } .hinweis strong { color: #fff; } .hinweis a { color: #ffc9a6; margin-left: .35rem; white-space: nowrap; } /* --- Klebende Shop-Leiste: Logo + Kategorie-Chips -------------------------- Bleibt beim Scrollen oben stehen, damit man jederzeit die Kategorie wechseln kann. Das Logo schrumpft nach dem ersten Scroll (wie der Header der Startseite). Das Logo ist eine fertige Wortmarke (Bild), Titel steht als alt. */ .shopbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); transition: box-shadow .2s ease; } .shopbar.is-scrolled { box-shadow: 0 6px 18px -14px rgba(23, 19, 15, .7); } .shopbar__inner { max-width: var(--wrap); margin: 0 auto; padding: .5rem clamp(.9rem, 3.5vw, 1.4rem) .5rem; } .hero__titel { margin: 0; text-align: center; } .hero__logo { display: block; margin: .3rem auto .55rem; height: clamp(52px, 12vw, 74px); width: auto; max-width: 82%; transition: height .2s ease, margin .2s ease; } .shopbar.is-scrolled .hero__logo { height: clamp(34px, 8vw, 42px); margin: .15rem auto .5rem; } /* --- Statusleiste -------------------------------------------------------- */ /* Intro (Status, Abholung/Lieferung, Zeit) – scrollt unter der Leiste weg. */ .intro { padding-top: 1.1rem; } .status { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: 0; } .pill { display: inline-flex; align-items: center; gap: .38rem; font-size: .78rem; font-weight: 700; padding: .34rem .72rem; border-radius: 999px; background: var(--karte); border: 1px solid var(--linie); color: var(--ink); white-space: nowrap; } .pill svg { width: 15px; height: 15px; color: var(--marke); } .pill--auf { color: #2f6b47; } .pill__punkt { width: 8px; height: 8px; border-radius: 50%; background: #2f9e57; box-shadow: 0 0 0 3px color-mix(in srgb, #2f9e57 22%, transparent); } /* --- Kategorie-Chips (in der klebenden Leiste) --------------------------- */ .chips { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding: 0; margin: 0; } .chips::-webkit-scrollbar { display: none; } .chip { flex: none; display: inline-flex; align-items: center; gap: .42rem; text-decoration: none; font-size: .88rem; font-weight: 700; padding: .52rem .95rem; border-radius: 999px; background: var(--karte); border: 1.5px solid var(--linie); color: var(--ink); transition: background .15s, color .15s, border-color .15s; } .chip svg { width: 18px; height: 18px; } .chip:hover { border-color: var(--marke); } .chip.is-aktiv { background: var(--aktiv); border-color: var(--aktiv); color: #fff; } /* --- Abholung / Lieferung ------------------------------------------------ */ .modus { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin: .9rem auto 0; max-width: var(--wrap); padding: .3rem; border-radius: 999px; background: var(--karte); border: 1.5px solid var(--aktiv); } .modus__btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font: inherit; font-size: .95rem; font-weight: 700; color: var(--ink); background: transparent; border: 0; border-radius: 999px; padding: .62rem 1rem; cursor: not-allowed; } .modus__btn svg { width: 19px; height: 19px; } .modus__btn.is-aktiv { background: var(--aktiv); color: #fff; } /* --- Zeitfenster --------------------------------------------------------- */ .zeit { display: flex; align-items: center; gap: .6rem; margin: .6rem auto 0; max-width: var(--wrap); padding: .75rem 1rem; border-radius: 14px; background: var(--karte); border: 1.5px solid var(--linie); font-size: .95rem; font-weight: 600; color: var(--ink); } .zeit svg:first-child { width: 18px; height: 18px; color: var(--marke); flex: none; } .zeit__pfeil { margin-left: auto; width: 18px; height: 18px; color: var(--nebel); flex: none; } /* --- Kategorie-Band ------------------------------------------------------- Das Band ist EIN fertiges Bild (Symbol + Name + Foto sind darin komponiert, Seitenverhältnis 3:1). Die Überschrift steht zusätzlich als Text im Markup – unsichtbar, aber für Screenreader und Suchmaschinen lesbar. */ /* Abstand, damit die klebende Leiste beim Anspringen den Titel nicht verdeckt. Etwas kleiner als die Spy-Linie (130px, shop.js), damit ein angetippter Chip sicher als aktiv erkannt wird. */ .kat { scroll-margin-top: 118px; margin-top: 1.7rem; } .kat__band { display: block; width: 100%; height: auto; aspect-ratio: var(--band-ar); object-fit: cover; border-radius: 14px; background: var(--band); } /* Für Screenreader sichtbar, optisch ausgeblendet (Titel steht im Bild). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Gerichte ------------------------------------------------------------ */ .gerichte { list-style: none; margin: .55rem 0 0; padding: 0; } .gericht { display: grid; grid-template-columns: 1fr auto auto; align-items: start; gap: .5rem .9rem; padding: .95rem .2rem; border-bottom: 1px solid var(--linie); } .gericht:last-child { border-bottom: 0; } .gericht__name { font-size: 1.02rem; font-weight: 700; margin: 0; letter-spacing: -.01em; } .gericht__desc { margin: .16rem 0 0; color: var(--nebel); font-size: .9rem; font-weight: 600; } .gericht__opts { margin: .4rem 0 0; font-size: .8rem; color: var(--ink); } .gericht__opts .opt { display: block; } .gericht__opts .opt__name { font-weight: 700; } .gericht__opts .opt__meta { color: var(--nebel); font-weight: 600; } .gericht__preis { font-weight: 800; font-size: 1rem; white-space: nowrap; color: var(--preis); font-variant-numeric: tabular-nums; align-self: center; } .gericht__plus { align-self: center; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--marke); color: #fff; display: grid; place-items: center; cursor: not-allowed; } .gericht__plus svg { width: 18px; height: 18px; } /* --- Warenkorb-Hinweis + CTA -------------------------------------------- */ .korb { margin: 2.2rem auto 0; max-width: var(--wrap); background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; padding: 1.2rem 1.2rem 1.4rem; } .korb__kopf { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; } .korb__kopf svg { width: 20px; height: 20px; color: var(--marke); } .korb__kopf h2 { font-size: 1.05rem; margin: 0; font-weight: 800; } .korb__text { margin: 0 0 1rem; color: var(--nebel); font-size: .93rem; } .korb__cta { display: inline-block; background: var(--marke); color: #fff; font-weight: 800; text-decoration: none; padding: .8rem 1.4rem; border-radius: 999px; font-size: .95rem; } .korb__cta:hover { background: var(--marke-d); } /* --- Fuß ----------------------------------------------------------------- */ .fuss { max-width: var(--wrap); margin: 2rem auto 0; padding: 1.4rem clamp(.9rem, 3.5vw, 1.4rem) 3rem; border-top: 1px solid var(--linie); font-size: .87rem; color: var(--nebel); } .fuss a { color: var(--marke-d); } .fuss__andere a { margin-right: .7rem; display: inline-block; } .fuss__recht { font-size: .82rem; } .zurueck { display: inline-block; margin: .9rem 0 0; font-size: .88rem; color: var(--nebel); text-decoration: none; } .zurueck:hover { color: var(--marke); } /* ========================================================================== INTERAKTIVE DEMO — per shop.js aktiviert (body.js-on). Ohne JS bleibt alles statisch, die +-Knöpfe deaktiviert. Es wird nichts wirklich bestellt; der „Bestellen"-Knopf zeigt nur einen Beispiel-Hinweis. ========================================================================== */ /* --- Suchfeld ------------------------------------------------------------- */ .suche { position: relative; margin: 0 0 .3rem; } .suche input { width: 100%; font: inherit; font-weight: 600; font-size: .95rem; padding: .7rem 1rem .7rem 2.6rem; border-radius: 14px; border: 1.5px solid var(--linie); background: var(--karte); color: var(--ink); } .suche input::placeholder { color: var(--nebel); font-weight: 600; } .suche > svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--nebel); pointer-events: none; } .gericht[hidden], .kat[hidden] { display: none; } .such-leer { text-align: center; color: var(--nebel); padding: 2.5rem 0; font-weight: 600; } /* --- Aktive +-Knöpfe & anklickbare Gerichte ------------------------------ */ .js-on .gericht__plus { cursor: pointer; transition: transform .12s ease, background .15s ease; } .js-on .gericht__plus:hover { background: var(--marke-d); } .js-on .gericht__plus:active { transform: scale(.88); } .js-on .gericht--opt { cursor: pointer; } .gericht__badge { display: inline-block; margin-left: .5rem; font-family: var(--mono); font-size: .68rem; font-weight: 700; color: #fff; background: var(--marke); border-radius: 999px; padding: .05rem .42rem; vertical-align: middle; } /* --- Warenkorb-Leiste unten ---------------------------------------------- */ .cart { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; transform: translateY(130%); transition: transform .25s ease; padding: .7rem clamp(.9rem, 3.5vw, 1.4rem); padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--marke) 90%, #000); box-shadow: 0 -10px 30px -18px rgba(0,0,0,.7); } .cart.is-visible { transform: none; } .cart__inner { max-width: var(--wrap); margin: 0 auto; display: flex; align-items: center; gap: 1rem; } .cart__info { color: #fff; line-height: 1.25; min-width: 0; } .cart__count { font-weight: 800; font-size: 1rem; } .cart__hint { display: block; font-family: var(--mono); font-size: .68rem; opacity: .9; margin-top: .1rem; } .cart__btn { margin-left: auto; flex: none; font: inherit; font-weight: 800; font-size: .95rem; background: #fff; color: var(--marke-d); border: 0; border-radius: 999px; padding: .72rem 1.35rem; cursor: pointer; transition: opacity .15s ease; } .cart__btn:disabled { opacity: .5; cursor: not-allowed; } body.has-cart { padding-bottom: 88px; } /* --- Modal (Optionen + Bon) ---------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 60; display: none; } .modal.is-open { display: block; } .modal__overlay { position: absolute; inset: 0; background: rgba(23,19,15,.55); } .modal__box { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; /* verhindert, dass ein Scroll im Fenster auf die Seite dahinter überspringt */ overscroll-behavior: contain; background: var(--bg); border-radius: 18px 18px 0 0; padding: 1.3rem 1.2rem 1.4rem; animation: modal-up .25s ease; } /* Seite hinter dem offenen Fenster festhalten (kein „Wegziehen"). */ body.modal-open { overflow: hidden; } @media (min-width: 560px) { .modal__box { bottom: auto; top: 50%; transform: translate(-50%, -50%); border-radius: 18px; } } @keyframes modal-up { from { transform: translate(-50%, 34px); opacity: 0; } } .modal__close { position: absolute; top: .8rem; right: .8rem; width: 34px; height: 34px; line-height: 1; border: 0; border-radius: 50%; background: var(--karte); color: var(--ink); font-size: 1.25rem; cursor: pointer; } .modal__title { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; margin: 0 .06em .1rem; color: var(--ink); } .modal__sub { margin: 0 0 1.1rem; color: var(--nebel); font-size: .92rem; } .optgruppe { margin-bottom: 1.1rem; } .optgruppe__titel { font-weight: 800; font-size: .95rem; margin: 0 0 .45rem; } .optgruppe__meta { font-weight: 600; color: var(--nebel); font-size: .8rem; } .optionwahl { display: flex; align-items: center; gap: .6rem; padding: .55rem .1rem; border-bottom: 1px solid var(--linie); cursor: pointer; font-size: .95rem; } .optionwahl:last-child { border-bottom: 0; } .optionwahl input { accent-color: var(--marke); width: 18px; height: 18px; flex: none; } .optfehler { color: #c0392b; font-size: .85rem; font-weight: 700; margin: 0 0 .7rem; } .modal__add { width: 100%; font: inherit; font-weight: 800; font-size: 1rem; color: #fff; background: var(--marke); border: 0; border-radius: 999px; padding: .85rem 1.3rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .modal__add:hover { background: var(--marke-d); } /* --- Bon im Checkout-Modal ----------------------------------------------- */ .bon2 { font-family: var(--mono); background: #fffdf8; color: #17130f; border-radius: 10px; padding: 1rem 1.1rem; border: 1px dashed #cbbfa4; font-size: .82rem; line-height: 1.75; } .bon2__kopf { text-align: center; font-weight: 700; letter-spacing: .08em; } .bon2__zeile { display: flex; justify-content: space-between; gap: 1rem; opacity: 1; } .bon2.is-printing .bon2__zeile { opacity: 0; animation: bonline .28s ease forwards; } @keyframes bonline { to { opacity: 1; } } .bon2__rule { border-top: 1px dashed #b9ad93; margin: .45rem 0; } .bon2__sum { font-weight: 700; } .bon2__prov { color: #2f6b47; font-weight: 700; } .checkout-hinweis { text-align: center; color: var(--nebel); font-size: .92rem; margin: 1.1rem 0 0; } /* Sanftes Scrollen beim Tippen auf einen Chip. */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } html { scroll-behavior: auto; } .modal__box { animation: none; } .bon2.is-printing .bon2__zeile { animation: none; opacity: 1; } }