@import url("../fonts/fonts.css"); /* ============================================================ Restaurant Pizzeria Sternen — Nürensdorf Breite Editorial / Fine Dining ============================================================ */ :root { --paper: #f7f4ed; --paper-2: #efe9dc; --white: #fffdf9; --ink: #14120e; --ink-2: #46423a; --ink-3: #756f64; --rule: #ddd5c4; --gold: #96762c; --gold-lt: #d9b566; --display: "Marcellus", "Times New Roman", Georgia, serif; --sans: "Inter", "Segoe UI", Helvetica, Arial, sans-serif; /* --body wurde an 13 Stellen benutzt, war aber nie definiert. Der Wert kam bisher nur zufaellig ueber die Vererbung zustande — hier steht er fest. */ --body: var(--sans); /* Linien und Schatten des Shops: sieben Beigetoene wirkten nebeneinander unruhig, schwarze Schatten wirken auf Beige schmutzig. */ --linie: #ece7db; --linie-zart: #f1ece1; --linie-stark: #ddd5c2; --schatten-1: 0 1px 2px rgba(60,45,20,.06), 0 0 0 1px rgba(60,45,20,.04); --schatten-2: 0 6px 18px -6px rgba(60,45,20,.18); --schatten-3: 0 24px 60px -20px rgba(60,45,20,.35); /* Eckenradien in drei Stufen statt neun Zufallswerten */ --r-feld: 10px; --r-karte: 14px; --r-blatt: 18px; --wrap: 1280px; --pad: clamp(22px, 5.5vw, 76px); --ease: cubic-bezier(.22, 1, .36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } /* Der Platz des Scrollbalkens bleibt reserviert. Sonst wurde die Seite beim Oeffnen von Blatt oder Schublade (overflow:hidden) 9 px breiter und alles sprang nach rechts. Aeltere Browser ignorieren die Zeile folgenlos. */ html { overflow-x: hidden; scrollbar-gutter: stable; } body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 1.75; -webkit-font-smoothing: antialiased; } /* Scrollsperre gehoert auf html — auf dem Body wuerde sie einen eigenen Scrollbehaelter erzeugen und alle sticky-Leisten verschieben. */ html:has(body.no-scroll), html:has(body.dlg-auf) { overflow: hidden; } /* Die Schublade gibt es nur bis 1150 px. Wurde das Fenster breiter (iPad drehen), blieb die Seite sonst gesperrt, obwohl der Warenkorb wieder Spalte ist — und liess sich nicht mehr scrollen. */ @media (max-width: 1150px) { html:has(body.korb-auf) { overflow: hidden; } } /* Fallback ohne :has (Safari < 15.4, aeltere Android-WebViews): das JS setzt dieselbe Sperre als Klasse auf . */ html.gesperrt { overflow: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--ink); color: var(--paper); } ::-webkit-scrollbar { width: 9px; } ::-webkit-scrollbar-track { background: var(--paper-2); } ::-webkit-scrollbar-thumb { background: #c9bfa9; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* ---------- Typografie ---------- */ h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; letter-spacing: -.005em; color: var(--ink); } .label { display: inline-block; font-size: 11.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); } .h-xl { font-size: clamp(2.3rem, 5.4vw, 4.4rem); } .h-lg { font-size: clamp(1.9rem, 3.6vw, 3rem); } .h-md { font-size: clamp(1.4rem, 2.2vw, 1.9rem); } .lead { font-size: clamp(1.02rem, 1.3vw, 1.14rem); line-height: 1.8; color: var(--ink-2); max-width: 54ch; } p { color: var(--ink-2); } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); } .wrap-wide { width: 100%; padding-inline: var(--pad); } section { position: relative; } .pad { padding: clamp(76px, 10vw, 150px) 0; } .pad-t0 { padding-top: 0; } /* Sektionskopf mit Nummer */ .sec-head { display: flex; align-items: baseline; gap: clamp(16px, 3vw, 40px); margin-bottom: clamp(34px, 5vw, 64px); } .sec-head .num { font-family: var(--display); font-size: 13px; letter-spacing: .16em; color: var(--gold); padding-top: 8px; white-space: nowrap; } .sec-head .num::after { content: ""; display: inline-block; width: clamp(20px, 4vw, 56px); height: 1px; background: var(--rule); margin-left: 14px; vertical-align: middle; } .sec-head.center { flex-direction: column; align-items: center; text-align: center; gap: 14px; } .sec-head.center .num::after { display: none; } .sec-head .lead { margin-top: 14px; } .sec-head.center .lead { margin-inline: auto; } hr.rule { border: 0; border-top: 1px solid var(--rule); } .center { text-align: center; } .center .lead, .center .marks { margin-inline: auto; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 30px; border: 1px solid var(--ink); background-color: transparent; background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 0%; color: var(--ink); font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: color .45s var(--ease), border-color .45s var(--ease), background-size .45s var(--ease); } /* :not(:disabled), weil sich sonst auch gesperrte Knoepfe schwarz fuellen — der Text „Bitte auswaehlen" wurde dabei unlesbar. */ .btn:not(:disabled):hover { background-size: 100% 100%; color: var(--paper); } .btn svg { width: 15px; height: 15px; flex: none; } .btn-solid { background-color: var(--ink); background-image: linear-gradient(var(--gold-lt), var(--gold-lt)); color: var(--paper); } .btn-solid:hover { color: var(--ink); border-color: var(--gold-lt); } .btn-gold { background-color: var(--gold-lt); background-image: linear-gradient(var(--ink), var(--ink)); border-color: var(--gold-lt); color: var(--ink); } .btn-gold:not(:disabled):hover { color: var(--paper); border-color: var(--ink); } .btn-light { border-color: rgba(255,255,255,.55); background-image: linear-gradient(#fff, #fff); color: #fff; } .btn-light:hover { color: var(--ink); border-color: #fff; } .btn-sm { padding: 12px 22px; font-size: 10.5px; } /* Textlink mit Unterstrich */ .tlink { display: inline-flex; align-items: center; gap: 9px; font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; padding-bottom: 5px; border-bottom: 1px solid var(--rule); transition: border-color .35s var(--ease), color .35s; } .tlink:hover { border-bottom-color: var(--ink); } /* ---------- Preloader ---------- */ #preload { position: fixed; inset: 0; z-index: 999; background: var(--ink); display: grid; place-items: center; transition: opacity .8s var(--ease), visibility .8s; } #preload.gone { opacity: 0; visibility: hidden; } #preload img { width: 200px; opacity: .96; } #preload .pl-bar { width: 120px; height: 1px; margin: 26px auto 0; background: rgba(255,255,255,.22); overflow: hidden; } #preload .pl-bar i { display: block; height: 100%; width: 0; background: var(--gold-lt); transition: width .3s linear; } /* ---------- Navigation ---------- */ header.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 120; transition: background .5s var(--ease), border-color .5s, padding .5s var(--ease); border-bottom: 1px solid transparent; } header.nav .wrap-wide { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 92px; transition: height .5s var(--ease); } header.nav.stuck { background: rgba(247, 244, 237, .94); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: var(--rule); } header.nav.stuck .wrap-wide { height: 72px; } .brand { flex: 0 0 auto; } .brand img { height: 44px; width: auto; max-width: none; transition: height .5s var(--ease); } header.nav.stuck .brand img { height: 36px; } .brand .lg-hell { display: none; } header.nav.stuck .brand .lg-hell, header.nav.solid .brand .lg-hell { display: block; } header.nav.stuck .brand .lg-dunkel, header.nav.solid .brand .lg-dunkel { display: none; } nav.menu { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); } nav.menu a { position: relative; font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.82); padding: 6px 0; transition: color .3s; } nav.menu a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--gold-lt); transition: width .4s var(--ease); } nav.menu a:hover { color: #fff; } nav.menu a:hover::after, nav.menu a.active::after { width: 100%; } nav.menu a.active { color: #fff; } header.nav.stuck nav.menu a { color: var(--ink-2); } header.nav.stuck nav.menu a:hover, header.nav.stuck nav.menu a.active { color: var(--ink); } header.nav.stuck nav.menu a::after { background: var(--gold); } .nav-cta { display: flex; align-items: center; gap: 12px; } header.nav .nav-cta .btn { border-color: rgba(255,255,255,.5); color: #fff; background-image: linear-gradient(#fff, #fff); } header.nav .nav-cta .btn:hover { color: var(--ink); border-color: #fff; } header.nav.stuck .nav-cta .btn, header.nav.solid .nav-cta .btn { border-color: var(--ink); color: var(--ink); background-image: linear-gradient(var(--ink), var(--ink)); } header.nav.stuck .nav-cta .btn:hover, header.nav.solid .nav-cta .btn:hover { color: var(--paper); } #burger { display: none; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.45); background: transparent; cursor: pointer; position: relative; } header.nav.stuck #burger { border-color: var(--rule); } #burger i { position: absolute; left: 11px; width: 18px; height: 1px; background: #fff; transition: .35s var(--ease); } header.nav.stuck #burger i { background: var(--ink); } #burger i:nth-child(1) { top: 15px; } #burger i:nth-child(2) { top: 20px; } #burger i:nth-child(3) { top: 25px; } #burger.open i:nth-child(1) { top: 20px; transform: rotate(45deg); } #burger.open i:nth-child(2) { opacity: 0; } #burger.open i:nth-child(3) { top: 20px; transform: rotate(-45deg); } #drawer { position: fixed; inset: 0; z-index: 115; background: var(--ink); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; } #drawer.open { opacity: 1; visibility: visible; } #drawer ul { list-style: none; text-align: center; } #drawer a { display: block; font-family: var(--display); font-size: clamp(1.7rem, 6.4vw, 2.5rem); color: var(--paper); padding: 9px 0; } #drawer a:hover { color: var(--gold-lt); } #drawer .dr-foot { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; align-items: center; } #drawer .dr-foot a { font-family: var(--sans); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lt); } @media (max-width: 1500px) { nav.menu { gap: 16px; } nav.menu a { font-size: 11px; letter-spacing: .1em; } header.nav .wrap-wide { gap: 16px; } } @media (max-width: 1340px) { /* Beide Knöpfe bleiben sichtbar, sie werden nur schmaler */ .nav-cta .btn-sm { padding: 8px 12px; font-size: 10px; letter-spacing: .06em; } nav.menu { gap: 13px; } nav.menu a { letter-spacing: .07em; } } @media (max-width: 1180px) { .nav-cta .btn-sm { padding: 7px 10px; font-size: 9.5px; letter-spacing: .04em; } } @media (max-width: 1150px) { nav.menu { gap: 11px; } nav.menu a { font-size: 10.5px; letter-spacing: .05em; } } @media (max-width: 1080px) { nav.menu { display: none; } #burger { display: block; } .nav-cta .hide-sm { display: inline-flex; } /* Reservieren + Bestellen immer sichtbar */ } /* ---------- Hero: Vollbild-Video ---------- */ #hero { position: relative; height: 100svh; min-height: 620px; display: flex; align-items: center; overflow: hidden; } #hero .hero-media { position: absolute; inset: 0; z-index: 0; } #hero video, #hero .hero-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } #hero .hero-fallback { background: url("../img/echt-gaststube.jpg") center/cover; } #hero .veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(14,12,9,.72) 0%, rgba(14,12,9,.28) 34%, rgba(14,12,9,.30) 58%, rgba(14,12,9,.82) 100%), linear-gradient(90deg, rgba(14,12,9,.62), rgba(14,12,9,.12) 62%); } @media (max-width: 640px) { #hero .veil { background: linear-gradient(180deg, rgba(14,12,9,.55) 0%, rgba(14,12,9,.12) 32%, rgba(14,12,9,.14) 60%, rgba(14,12,9,.72) 100%); } #hero h1, #hero h1 .hero-ort { text-shadow: 0 2px 20px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.45); } } #hero .wrap { position: relative; z-index: 3; color: #fff; } .hero-inner { max-width: 940px; } .hero-inner .label { color: var(--gold-lt); opacity: 0; animation: rise 1s var(--ease) .35s forwards; } #hero h1 { font-size: clamp(2.6rem, 7.2vw, 6rem); line-height: 1.06; color: #fff; margin: 22px 0 0; text-wrap: balance; } #hero h1 .ln { display: block; overflow: hidden; } #hero h1 .ln > span { display: block; transform: translateY(105%); animation: slide 1.2s var(--ease) forwards; } #hero h1 .ln:nth-child(1) > span { animation-delay: .48s; } #hero h1 .ln:nth-child(2) > span { animation-delay: .62s; } #hero h1 em { font-style: italic; color: var(--gold-lt); } #hero h1 .hero-ort { font-size: clamp(1.15rem, 2.2vw, 1.9rem); letter-spacing: .14em; color: rgba(255,255,255,.92); margin-top: 14px; font-family: 'Inter', sans-serif; font-weight: 300; text-transform: uppercase; } #hero .hero-sub { margin-top: 26px; font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.75; color: rgba(255,255,255,.9); max-width: 48ch; opacity: 0; animation: rise 1s var(--ease) .95s forwards; } #hero .hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; opacity: 0; animation: rise 1s var(--ease) 1.12s forwards; } @keyframes slide { to { transform: translateY(0); } } @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } /* Fusszeile im Hero */ .hero-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; border-top: 1px solid rgba(255,255,255,.16); opacity: 0; animation: rise 1s var(--ease) 1.35s forwards; } .hero-foot .wrap-wide { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 20px; color: rgba(255,255,255,.82); font-size: 12.5px; letter-spacing: .04em; } .hero-foot .hf { display: flex; align-items: center; gap: 10px; } .hero-foot .hf b { font-weight: 500; color: #fff; } .hero-foot .sep { width: 1px; height: 15px; background: rgba(255,255,255,.24); } .hero-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: #6cc98e; display: inline-block; } .hero-foot .dot.closed { background: #d97b73; } .hero-foot a:hover { color: var(--gold-lt); } @media (max-width: 900px) { .hero-foot .hide-md { display: none; } } .scroll-cue { position: absolute; z-index: 4; left: 50%; bottom: 88px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.62); } .scroll-cue i { display: block; width: 1px; height: 48px; background: linear-gradient(180deg, var(--gold-lt), transparent); animation: cue 2.4s var(--ease) infinite; } @keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } } @media (max-width: 1100px) { .scroll-cue { display: none; } } .vid-btn { position: absolute; z-index: 5; right: var(--pad); bottom: 88px; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.4); background: rgba(20,18,14,.28); backdrop-filter: blur(6px); color: #fff; cursor: pointer; display: grid; place-items: center; transition: .35s var(--ease); } .vid-btn:hover { background: #fff; color: var(--ink); border-color: #fff; } @media (max-width: 900px) { .vid-btn { display: none; } } /* ---------- Intro / Über ---------- */ .split { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(38px, 6vw, 96px); align-items: center; } .split.rev { grid-template-columns: 1.08fr 1fr; } @media (max-width: 900px) { .split, .split.rev { grid-template-columns: 1fr; } .split .art { order: -1; } } .art { position: relative; } .art img { width: 100%; height: 100%; object-fit: cover; } .art .main { aspect-ratio: 4/4.7; overflow: hidden; } .art .main img { transition: transform 1.6s var(--ease); } .art:hover .main img { transform: scale(1.045); } .art .inset { position: absolute; right: -7%; bottom: -8%; width: 46%; aspect-ratio: 1/1.16; overflow: hidden; border: 10px solid var(--paper); } @media (max-width: 900px) { .art .inset { width: 38%; right: 4%; bottom: -6%; } } .stamp { position: absolute; left: -5%; top: 8%; width: 116px; height: 116px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; text-align: center; line-height: 1.25; } .stamp b { display: block; font-family: var(--display); font-size: 1.5rem; } .stamp small { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lt); } .marks svg { width: 15px; height: 15px; color: var(--gold); flex: none; } /* ---------- Diashow ---------- */ #show { background: var(--paper-2); } .stage { position: relative; height: clamp(420px, 74vh, 760px); overflow: hidden; background: var(--ink); } .slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.3s var(--ease), visibility 1.3s; } .slide.on { opacity: 1; visibility: visible; z-index: 2; } .slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); } .slide.on img { animation: kb 10s linear forwards; } @keyframes kb { from { transform: scale(1.02); } to { transform: scale(1.13); } } .slide .sv { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,12,9,.25) 0%, transparent 38%, rgba(14,12,9,.78) 100%); } .slide .cap { position: absolute; left: 0; bottom: 0; padding: clamp(28px, 4vw, 56px); color: #fff; } .slide .cap .cn { font-size: 10.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-lt); } .slide .cap h3 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); color: #fff; margin-top: 10px; } .slide.on .cap > * { opacity: 0; animation: rise .9s var(--ease) forwards; } .slide.on .cap > *:nth-child(1) { animation-delay: .4s; } .slide.on .cap > *:nth-child(2) { animation-delay: .52s; } .s-bar { position: absolute; z-index: 6; right: clamp(24px, 4vw, 56px); bottom: clamp(28px, 4vw, 56px); display: flex; align-items: center; gap: 18px; color: #fff; } .s-count { font-family: var(--display); font-size: 1rem; letter-spacing: .1em; } .s-count b { font-size: 1.7rem; color: var(--gold-lt); } .s-nav { width: 50px; height: 50px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; transition: .35s var(--ease); } .s-nav:hover { background: #fff; color: var(--ink); border-color: #fff; } .s-line { position: absolute; z-index: 6; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,.18); } .s-line i { display: block; height: 100%; background: var(--gold-lt); transform-origin: left; transform: scaleX(0); } .s-line i.run { animation: bar 10s linear forwards; } @keyframes bar { to { transform: scaleX(1); } } .filmstrip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; } .filmstrip button { border: 0; padding: 0; background: none; aspect-ratio: 16/10; overflow: hidden; cursor: pointer; position: relative; } .filmstrip img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.72); transition: .5s var(--ease); } .filmstrip button:hover img { filter: grayscale(0) brightness(.92); } .filmstrip button.on img { filter: none; } @media (max-width: 760px) { .filmstrip { grid-template-columns: repeat(4, 1fr); } } /* ---------- Speisekarte ---------- */ .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 14px; } .tab { border: 0; background: none; cursor: pointer; padding: 16px clamp(12px, 2vw, 24px); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); position: relative; transition: color .3s; } .tab::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: -1px; height: 2px; background: var(--gold); transition: left .4s var(--ease), right .4s var(--ease); } .tab:hover { color: var(--ink); } .tab.on { color: var(--ink); } .tab.on::after { left: 0; right: 0; } .tab-note { text-align: center; color: var(--ink-3); font-size: 12.5px; letter-spacing: .04em; margin-bottom: clamp(34px, 4vw, 54px); } .menu-panel { display: none; } .menu-panel.on { display: block; animation: fadeUp .6s var(--ease); } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .course { text-align: center; margin: clamp(34px, 4vw, 54px) 0 22px; } .course:first-child { margin-top: 0; } .course h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); } .course p { font-size: .92rem; color: var(--ink-3); margin-top: 4px; } .dishes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 0 clamp(34px, 5vw, 76px); } .dish { padding: 16px 0; border-bottom: 1px solid var(--rule); } .dish .row { display: flex; align-items: baseline; gap: 10px; } /* Lange Gerichtnamen brechen um statt abgeschnitten zu werden — der Punktraster und der Preis richten sich an der ersten Zeile aus. */ .dish .nm { font-size: 1.04rem; font-weight: 500; color: var(--ink); min-width: 0; overflow-wrap: break-word; } .dish .dots { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-4px); min-width: 18px; } .dish .pr { font-family: var(--display); font-size: 1.16rem; color: var(--ink); white-space: nowrap; } .dish .pr .sz { font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; } .dish .pr .alt { display: block; text-align: right; margin-top: 1px; } .dish .ds { font-size: .92rem; line-height: 1.6; color: var(--ink-3); margin-top: 4px; max-width: 52ch; } .menu-foot { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } /* ---------- Lieferung ---------- */ #liefern { background: var(--paper-2); } .steps { list-style: none; margin-top: 30px; counter-reset: st; } .steps li { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 20px 0; border-top: 1px solid var(--rule); } .steps li:last-child { border-bottom: 1px solid var(--rule); } .steps .n { font-family: var(--display); font-size: 1.1rem; color: var(--gold); padding-top: 2px; } .steps b { display: block; font-weight: 500; font-size: 1.06rem; color: var(--ink); } .steps small { display: block; font-size: .94rem; line-height: 1.65; color: var(--ink-2); margin-top: 3px; } /* ---------- Reservation ---------- */ #reservation { background: var(--ink); color: var(--paper); overflow: hidden; } #reservation::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,18,14,.86), rgba(20,18,14,.94)), url("../img/gedeckt.jpg") center/cover; } #reservation .wrap { position: relative; z-index: 2; } #reservation h2, #reservation .h-lg { color: #fff; } #reservation .lead { color: rgba(255,255,255,.76); } #reservation .label { color: var(--gold-lt); } #reservation .sec-head .num { color: var(--gold-lt); } #reservation .sec-head .num::after { background: rgba(255,255,255,.28); } .res-form { max-width: 900px; margin-inline: auto; background: var(--paper); padding: clamp(26px, 4vw, 48px); border: 1px solid var(--rule); box-shadow: 0 18px 50px rgba(10, 8, 5, .3); } .field textarea { width: 100%; background: #fff; border: 1px solid #cfc6b2; padding: 12px 14px; font: inherit; font-size: 15.5px; color: var(--ink); resize: vertical; min-height: 120px; transition: border-color .3s; } .field textarea::placeholder { color: #9a927e; } .field textarea:focus { outline: 0; border-color: var(--gold); } .res-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.4vw, 30px); } .res-more { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 30px); margin-top: 26px; } .field { position: relative; } .field label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; } .field input, .field select { width: 100%; background: #fff; border: 1px solid #cfc6b2; border-radius: 0; padding: 12px 14px; font-size: 15.5px; color: var(--ink); transition: border-color .35s; } .field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2396762c' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 26px; cursor: pointer; } .field select option { background: #fff; color: var(--ink); } .field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .65; cursor: pointer; } .field input[type="date"] { cursor: pointer; } .field input::placeholder { color: #9a927e; } .field input:focus, .field select:focus { outline: none; border-color: var(--gold); } .field.bad input, .field.bad select { border-color: #c26a5a; } .field .err { display: none; font-size: 11px; color: #a4432f; margin-top: 6px; } .field.bad .err { display: block; } .res-foot { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: space-between; margin-top: 40px; } .res-foot small { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; } .res-foot .btn { border-color: var(--gold-lt); background-color: var(--gold-lt); color: var(--ink); background-image: linear-gradient(var(--ink), var(--ink)); } .res-foot .btn:hover { color: var(--paper); border-color: var(--ink); } .res-ok { display: none; text-align: center; } .res-ok.show { display: block; animation: fadeUp .6s var(--ease); } .res-ok .ok-i { width: 64px; height: 64px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); display: grid; place-items: center; margin: 0 auto 24px; } .res-ok h3 { color: var(--ink); font-size: clamp(1.7rem, 3vw, 2.3rem); } .res-ok > p { color: var(--ink-2); margin-top: 8px; } .recap { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 34px auto 30px; max-width: 620px; border-top: 1px solid var(--rule); } .recap div { flex: 1 1 140px; padding: 18px 12px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); } .recap div:last-child { border-right: 0; } .recap span { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); } .recap b { display: block; font-family: var(--display); font-size: 1.14rem; font-weight: 400; color: var(--ink); margin-top: 6px; } @media (max-width: 820px) { .res-row { grid-template-columns: 1fr 1fr; } .res-more { grid-template-columns: 1fr; } } @media (max-width: 480px) { .res-row { grid-template-columns: 1fr; } } /* ---------- Räume (editorial: Text unter dem Bild) ---------- */ .rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: clamp(24px, 3.4vw, 46px); } .room .ph { aspect-ratio: 4/4.9; overflow: hidden; margin-bottom: 22px; cursor: pointer; } .room img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); } .room:hover img { transform: scale(1.05); } .room .label { font-size: 10.5px; letter-spacing: .2em; } .room h3 { font-size: 1.6rem; margin: 8px 0 8px; } .room p { font-size: .95rem; line-height: 1.65; } /* ---------- Stimmen ---------- */ .quotes { display: grid; grid-template-columns: repeat(3, 1fr); } .quote { padding: clamp(24px, 3vw, 44px) clamp(18px, 2.4vw, 38px); border-left: 1px solid var(--rule); text-align: center; } .quote:first-child { border-left: 0; } .quote .stars { color: var(--gold-lt); letter-spacing: .2em; font-size: .9rem; } .quote p { font-family: var(--display); font-size: clamp(1.16rem, 1.6vw, 1.34rem); line-height: 1.55; color: var(--ink); margin: 16px 0 18px; } .quote .who { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } @media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } .quote { border-left: 0; border-top: 1px solid var(--rule); } .quote:first-child { border-top: 0; } } .stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); margin-top: clamp(40px, 5vw, 70px); } .stat { padding: clamp(28px, 3.4vw, 44px) 14px; text-align: center; border-right: 1px solid var(--rule); } .stat:last-child { border-right: 0; } .stat b { display: block; font-family: var(--display); font-size: clamp(2rem, 3.6vw, 3rem); color: var(--ink); line-height: 1; } .stat small { display: block; margin-top: 12px; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); } @media (max-width: 720px) { .stats { grid-template-columns: 1fr 1fr; } .stat:nth-child(2n) { border-right: 0; } .stat:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } } /* ---------- Kontakt ---------- */ .ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 80px); } @media (max-width: 860px) { .ct-grid { grid-template-columns: 1fr; } } .ct-title { font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; } .hours { list-style: none; border-top: 1px solid var(--rule); } .hours li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; color: var(--ink-2); } .hours li.now { color: var(--ink); } .hours li.now span:first-child { font-weight: 500; } .hours li.now .t { color: var(--gold); } .hours .t { font-family: var(--display); font-size: 1.02rem; text-align: right; } .hours li { align-items: flex-start; } .hours .t em { display: block; font-style: normal; font-family: var(--body); font-size: .8rem; letter-spacing: .01em; color: var(--ink-3); margin-top: 4px; } .hours li.now .t em { color: var(--ink-2); } .ct-lines { list-style: none; border-top: 1px solid var(--rule); } .ct-lines li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: start; } .ct-lines svg { width: 17px; height: 17px; color: var(--gold); margin-top: 5px; } .ct-lines b { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); } .ct-lines span { display: block; font-size: 1.02rem; color: var(--ink); margin-top: 3px; } .ct-lines em { font-style: normal; font-size: .9rem; color: var(--ink-3); } .ct-lines a:hover { color: var(--gold); } .map-wrap { margin-top: clamp(34px, 4vw, 56px); aspect-ratio: 24/7; min-height: 260px; overflow: hidden; background: var(--paper-2); } .map-wrap iframe { width: 100%; height: 100%; border: 0; filter: saturate(.72) contrast(1.02); } @media (max-width: 700px) { .map-wrap { aspect-ratio: 4/3; } } /* ---------- Footer ---------- */ footer { background: var(--ink); color: rgba(255,255,255,.72); padding-top: clamp(58px, 7vw, 92px); } .f-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: clamp(30px, 4vw, 60px); padding-bottom: clamp(44px, 5vw, 66px); } footer img.f-logo { width: 190px; } footer .f-about p { font-size: .95rem; line-height: 1.8; color: rgba(255,255,255,.7); margin-top: 22px; } footer h4 { font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 20px; } footer ul { list-style: none; } footer li { padding: 6px 0; font-size: .95rem; color: rgba(255,255,255,.72); } footer a:hover { color: var(--gold-lt); } .f-bot { border-top: 1px solid rgba(255,255,255,.14); padding: 24px 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); } @media (max-width: 880px) { .f-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .f-grid { grid-template-columns: 1fr; } } .disclaimer { border-top: 1px solid rgba(255,255,255,.14); padding: 20px 0; font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.45); display: flex; gap: 12px; align-items: flex-start; } .disclaimer svg { flex: none; margin-top: 4px; } /* ---------- Lightbox / Toast / Utility ---------- */ #lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(12,11,8,.96); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: .4s var(--ease); padding: 7vh 6vw; } #lightbox.open { opacity: 1; visibility: visible; } #lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; } #lightbox .lb-cap { text-align: center; margin-top: 18px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); } #lightbox .lb-x { position: absolute; top: 26px; right: 26px; width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.35); background: none; color: #fff; cursor: pointer; display: grid; place-items: center; transition: .3s; } #lightbox .lb-x:hover { background: #fff; color: var(--ink); } #toTop { position: fixed; right: 26px; bottom: 26px; z-index: 90; width: 46px; height: 46px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: .4s var(--ease); } #toTop.show { opacity: 1; visibility: visible; transform: none; } #toTop:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } #bar-prog { position: fixed; top: 0; left: 0; z-index: 130; height: 2px; width: 0; background: var(--gold); } .toast { /* Ruhezustand: vollstaendig unter dem Bildschirmrand. Vorher blieb ein schwarzer Streifen von wenigen Pixeln am unteren Rand sichtbar. */ position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, calc(100% + 40px)); opacity: 0; visibility: hidden; z-index: 210; background: var(--ink); color: var(--paper); padding: 15px 28px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; transition: transform .5s var(--ease), opacity .32s var(--ease), visibility 0s linear .5s; display: flex; align-items: center; gap: 12px; max-width: 92vw; } .toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform .5s var(--ease), opacity .22s var(--ease), visibility 0s; } .toast svg { color: var(--gold-lt); flex: none; } .rv { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); } .rv.in { opacity: 1; transform: none; } .rv.d1 { transition-delay: .1s; } .rv.d2 { transition-delay: .2s; } .rv.d3 { transition-delay: .3s; } /* ============================================================ Mobile — grosszuegig statt gequetscht ============================================================ */ @media (max-width: 900px) { /* Statusleiste ist auf Kleingeraeten Teil des Flusses, nie Flex-Nachbar */ #hero { flex-direction: column; justify-content: flex-end; } } @media (max-width: 640px) { body { font-size: 16px; line-height: 1.7; } :root { --pad: 20px; } .pad { padding: 56px 0; } .sec-head { margin-bottom: 30px; } .h-lg { font-size: 1.75rem; } .lead { font-size: 1rem; line-height: 1.7; } /* Kopfzeile: kompakt, nichts laeuft raus */ header.nav .wrap-wide { height: 64px; gap: 8px; padding-inline: 12px; } header.nav.stuck .wrap-wide { height: 60px; } .brand img { height: 34px; } header.nav.stuck .brand img { height: 30px; } .brand img, header.nav.stuck .brand img { height: 32px; } .nav-cta { gap: 6px; } .nav-cta .btn { width: auto; padding: 10px 10px; font-size: 9.5px; letter-spacing: .08em; } #burger { width: 40px; height: 40px; flex: none; } #burger i { left: 10px; } #drawer a { font-size: 1.55rem; padding: 10px 0; } /* Hero: volle Breite, Luft, Buttons untereinander */ #hero { height: auto; min-height: 92svh; } #hero .wrap { padding-block: 120px 44px; } #hero h1 { font-size: 2.15rem; line-height: 1.12; } #hero .hero-sub { font-size: .98rem; margin-top: 18px; } #hero .hero-btns { margin-top: 28px; gap: 11px; } .hero-btns .btn { width: 100%; } .scroll-cue, .vid-btn { display: none; } /* Statusleiste: eigener Balken unter dem Hero */ .hero-foot { position: static; width: 100%; background: var(--ink); border-top: 1px solid rgba(255,255,255,.14); } .hero-foot .wrap-wide { flex-direction: column; align-items: center; gap: 6px; padding-block: 16px; text-align: center; } .hero-foot .sep { display: none; } .hero-foot .hide-md { display: flex; } /* Unterseiten-Kopf */ .page-head { padding: 108px 0 36px; } .page-head h1 { font-size: 1.9rem; } /* Bildkompositionen: ein ruhiges Bild statt Ueberlappung */ .split { gap: 30px; } .art .main { aspect-ratio: 4/3; } .art .inset, .stamp { display: none; } /* Merkmale als Linienliste */ .marks { list-style: none; margin-top: 34px; border-top: 1px solid var(--rule); } .marks li { font-size: 14.5px; padding: 12px 0; gap: 11px; } .btn { width: 100%; padding: 15px 20px; } .nav-cta .btn { width: auto; } /* Diashow */ .stage { height: 54vh; min-height: 300px; } .slide .cap { padding: 18px; max-width: 100%; } .slide .cap h3 { font-size: 1.35rem; } .s-count { display: none; } .s-nav { width: 42px; height: 42px; } .filmstrip { grid-template-columns: repeat(4, 1fr); gap: 3px; } /* Speisekarte: Tabs als wischbare Zeile, Gerichte mit Luft */ .tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); } .tabs::-webkit-scrollbar { display: none; } .tab { padding: 14px 14px; white-space: nowrap; flex: none; } .course { margin: 30px 0 14px; } .course h3 { font-size: 1.35rem; } .dishes { grid-template-columns: 1fr; } .dish { padding: 13px 0; } .dish .nm { white-space: normal; font-size: 15.5px; } .dish .pr { font-size: 1.06rem; } .dish .ds { font-size: 13.5px; } .steps li { padding: 16px 0; gap: 14px; } /* Formular: 16px-Eingaben (kein iOS-Zoom), alles untereinander */ .field input, .field select { font-size: 16px; } .res-row, .res-more { grid-template-columns: 1fr; gap: 20px; } .res-foot { flex-direction: column-reverse; align-items: stretch; gap: 12px; text-align: center; } .seats { flex-direction: column; } .seat { width: 100%; justify-content: center; padding: 13px 16px; } /* Bestaetigung */ .recap div { flex: 1 1 40%; padding: 14px 8px; } .recap b { font-size: 1rem; } .cd { gap: 10px; } .cd .u { min-width: 52px; } .cd .z { font-size: 1.65rem; } .ok-map { aspect-ratio: 4/3; } /* Stimmen & Zahlen */ .quote { padding: 24px 4px; } .quote p { font-size: 1.08rem; } .stat { padding: 22px 10px; } .stat b { font-size: 1.7rem; } .stat small { font-size: 9.5px; letter-spacing: .1em; } /* Kontakt */ .ct-grid { gap: 34px; } .hours li { font-size: 14.5px; } .map-wrap { aspect-ratio: 4/3; } /* Footer */ footer { padding-top: 44px; } .f-grid { grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; } footer img.f-logo { width: 170px; } .f-bot { flex-direction: column; align-items: center; gap: 6px; text-align: center; } #toTop { right: 14px; bottom: 14px; width: 42px; height: 42px; } } @media (max-width: 400px) { .brand img { height: 30px; } header.nav.stuck .brand img { height: 27px; } .nav-cta .btn { padding: 9px 8px; font-size: 9px; letter-spacing: .05em; } #burger { width: 36px; height: 36px; } #burger i { left: 9px; } } @media (max-width: 380px) { #hero h1 { font-size: 1.9rem; } header.nav .wrap-wide { gap: 6px; padding-inline: 10px; } .brand img { height: 26px; } header.nav.stuck .brand img { height: 24px; } .nav-cta { gap: 5px; } .nav-cta .btn { padding: 8px 7px; font-size: 8.5px; letter-spacing: .04em; } #burger { width: 34px; height: 34px; } #burger i { left: 8px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } } /* ---------- Tagesmenü (publiziert vom Tagesmenü-Editor) ---------- */ #tagesmenu { background: var(--paper-2); } .tm-card { max-width: 640px; margin: 0 auto; background: var(--paper); border: 1px solid var(--rule); padding: clamp(28px, 4.5vw, 52px) clamp(22px, 4.5vw, 56px); } .tm-vorspeise { text-align: center; font-family: var(--display); font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.55; padding-bottom: clamp(18px, 2.6vw, 28px); margin-bottom: clamp(18px, 2.6vw, 28px); border-bottom: 1px solid var(--rule); } .tm-item { padding: 13px 0; } .tm-item + .tm-item { border-top: 1px solid var(--rule); } .tm-item .row { display: flex; align-items: baseline; gap: 10px; } .tm-item .nm { font-weight: 500; color: var(--ink); } .tm-item .dots { flex: 1; border-bottom: 1px dotted var(--rule); transform: translateY(-4px); min-width: 18px; } .tm-item .pr { font-family: var(--display); font-size: 1.16rem; color: var(--ink); white-space: nowrap; } .tm-item .ds { font-size: .92rem; line-height: 1.6; color: var(--ink-3); margin-top: 4px; padding-left: 1.15em; } .tm-hit { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; } .tm-datum { text-align: center; font-size: .82rem; color: var(--ink-3); margin-top: 18px; letter-spacing: .04em; } .tm-fuss { text-align: center; font-size: .9rem; line-height: 1.6; color: var(--ink-2); border-top: 1px solid var(--rule); margin-top: clamp(16px, 2.4vw, 24px); padding-top: clamp(14px, 2vw, 20px); } /* ---------- Unterseiten ---------- */ .page-head { background: var(--ink); color: var(--paper); padding: clamp(140px, 18vh, 190px) 0 clamp(44px, 6vw, 72px); } .page-head .label { color: var(--gold-lt); } .page-head h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.6rem); margin-top: 14px; } .page-head .lead { color: rgba(255,255,255,.76); margin-top: 16px; } /* CTA-Band */ .cta-band { background: var(--ink); color: var(--paper); } .cta-band h2 { color: #fff; } .cta-band .lead { color: rgba(255,255,255,.76); margin-inline: auto; } .cta-band .btn-light { border-color: rgba(255,255,255,.5); } /* Sitzplatz-Auswahl (dunkler Grund) */ .seat-row { margin-top: 26px; } .seat-row > span { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .seats { display: flex; flex-wrap: wrap; gap: 10px; } .seat { border: 1px solid #b9af97; background: #fff; color: var(--ink-2); padding: 11px 20px; font-size: 13.5px; cursor: pointer; transition: .3s var(--ease); display: inline-flex; align-items: center; gap: 9px; } .seat svg { width: 15px; height: 15px; } .seat:hover { border-color: var(--ink); color: var(--ink); } .seat.on { background: var(--gold-lt); border-color: var(--gold-lt); color: var(--ink); } /* Bestätigung: Countdown + Anfahrt */ .countdown { margin: clamp(28px, 4vw, 40px) auto 0; text-align: center; } .countdown .cd-label { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; } .cd { display: flex; justify-content: center; gap: clamp(14px, 3vw, 30px); } .cd .u { min-width: 62px; } .cd .z { font-family: var(--display); font-size: clamp(2rem, 5vw, 3rem); color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; } .cd .b { display: block; margin-top: 8px; font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); } .ok-map { margin: clamp(28px, 4vw, 40px) auto 0; max-width: 640px; border: 1px solid var(--rule); aspect-ratio: 16/8; overflow: hidden; background: #fff; } .ok-map iframe { width: 100%; height: 100%; border: 0; } .ok-adr { margin-top: 14px; font-size: .88rem; line-height: 1.7; color: rgba(255,255,255,.62); } /* Sende-Fehlerhinweis */ .send-err { display: none; margin: 22px auto 0; max-width: 560px; border: 1px solid rgba(217,123,115,.6); padding: 14px 20px; font-size: .93rem; color: #e8b3ae; text-align: center; } .send-err.show { display: block; } .send-err a { color: #fff; text-decoration: underline; } /* Impressum */ .imp { max-width: 760px; } .imp h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: clamp(30px, 4vw, 44px) 0 12px; } .imp h2:first-child { margin-top: 0; } .imp p { font-size: .98rem; line-height: 1.8; } .imp p + p { margin-top: 10px; } .imp address { font-style: normal; font-size: .98rem; line-height: 1.8; color: var(--ink-2); } .imp hr { border: 0; border-top: 1px solid var(--rule); margin: clamp(30px, 4vw, 44px) 0; } /* ═══════════ Bestellshop ═══════════ */ .shop-seite { background: #f5f3ee; } /* Kopfleiste */ /* Kopfzeile der Seite ist fix -> Shop darunter einhaengen. Der Ersatzwert war 92 px und stammte vom alten Nav; die Bestellseiten- Kopfleiste ist 58 px hoch. Bis das JS gemessen hatte, stand der Inhalt 34 px zu tief und rutschte dann sichtbar hoch. */ body.shop-seite { padding-top: var(--kopf, 58px); } .shop-bar { position: sticky; top: var(--kopf, 72px); z-index: 40; background: #fff; border-bottom: 1px solid #e6e0d2; } .shop-bar-in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-block: 11px; } .art-wahl { display: flex; background: #efece4; border-radius: 8px; padding: 3px; flex: 0 0 auto; } .art-wahl button { padding: 9px 20px; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2); transition: .2s var(--ease); } .art-wahl button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0,0,0,.12); } .plz-box { display: flex; align-items: center; gap: 10px; flex: 1 1 240px; min-width: 0; } .plz-box input { width: 92px; background: #fff; border: 1px solid #d9d2c2; border-radius: 8px; padding: 9px 12px; font: inherit; font-size: 15px; color: var(--ink); } .plz-box input:focus { outline: 0; border-color: var(--gold); } .plz-info { font-size: .87rem; color: var(--ink-3); min-width: 0; } .plz-info .rot { color: #c0392b; } .shop-status { font-size: .87rem; font-weight: 600; color: #2e7d32; } .shop-status.zu { color: #c0392b; } /* Dreispaltiges Layout */ .shop-layout { display: grid; grid-template-columns: minmax(0, 1fr) 366px; gap: 34px; align-items: start; padding-block: 0 60px; } .shop-suchfeld { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 2px; } .shop-katzeile { /* Ersatzwerte wie die echten Leisten: --barh setzt das JS immer auf 0. */ position: sticky; top: calc(var(--kopf, 58px) + var(--barh, 0px)); z-index: 30; /* Derselbe Ton wie der Seitengrund — sonst zeichnete sich die klebende Leiste beim Scrollen als hellerer Balken ab. */ background: #f5f3ee; margin: 0 0 4px; padding: 9px 0 8px; box-shadow: 0 9px 10px -11px rgba(20,18,14,.22); } .shop-suche { position: relative; flex: 0 1 340px; min-width: 200px; } .shop-suche svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; pointer-events: none; } .shop-suche input { width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #ddd5c2; border-radius: 999px; padding: 11px 38px 11px 38px; font: inherit; font-size: .93rem; color: var(--ink); } .shop-suche input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(191,155,74,.16); } .shop-suche input::-webkit-search-cancel-button { display: none; } .shop-suche button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 50%; background: #ece8de; color: var(--ink-2); font-size: 15px; line-height: 1; cursor: pointer; } .such-zahl { font-size: .84rem; color: var(--ink-3); } .shop-kats { display: flex; gap: 8px; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; /* Kein Einrasten: das JS zentriert den aktiven Chip selbst. Mit Snap rueckte der Browser danach nochmals nach — die Leiste zuckte bei jedem Wechsel. */ scroll-snap-type: none; padding-bottom: 2px; } .shop-kats::-webkit-scrollbar { display: none; } .shop-kats .kat { flex: 0 0 auto; scroll-snap-align: start; cursor: pointer; border: 1px solid #e2dccd; background: #fff; border-radius: 999px; padding: 8px 15px; font: inherit; font-size: .87rem; color: var(--ink-2); white-space: nowrap; transition: .16s var(--ease); } .shop-kats .kat:hover { border-color: var(--gold); color: var(--ink); } .shop-kats .kat.on { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; } .shop-h1 { font-family: var(--body); font-size: 1.6rem; font-weight: 700; color: var(--ink); } .shop-sub { font-size: .95rem; color: var(--ink-3); margin: 4px 0 22px; } .shop-kat { margin-bottom: 30px; } .shop-kat h2 { font-family: var(--body); font-size: 1.28rem; font-weight: 700; margin-bottom: 12px; } /* Die Spaltenzahl waechst mit der Breite, statt bei 1500 px von zwei auf drei zu springen: bei 1499 px waren die Karten 495 px breit und wirkten leer. */ .shop-artikel { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; } .sa { display: flex; align-items: flex-start; gap: 12px; position: relative; cursor: pointer; background: #fff; border: 1px solid #ece7db; border-radius: 12px; padding: 15px 52px 15px 16px; transition: .16s var(--ease); } .sa:hover { border-color: #d8cfb8; box-shadow: 0 4px 16px rgba(20,18,14,.07); transform: translateY(-1px); } .sa:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .sa.nur-info { cursor: default; padding-right: 16px; } .sa.nur-info:hover { transform: none; box-shadow: none; border-color: #ece7db; } .sa-fuss { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 9px; } .sa-preis { font-size: .96rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .sa-plus { position: absolute; right: 13px; bottom: 13px; width: 30px; height: 30px; border-radius: 50%; background: var(--gold-lt); color: var(--ink); display: grid; place-items: center; font-size: 19px; line-height: 1; font-weight: 400; transition: .16s var(--ease); } .sa:hover .sa-plus { background: var(--gold); color: #fff; } .sa.nur-info .sa-plus { display: none; } .shop-leer { padding: 40px 4px; color: var(--ink-3); font-size: .95rem; } .sa-txt { flex: 1 1 auto; min-width: 0; } .sa-txt h3 { font-family: var(--body); font-size: 1rem; font-weight: 600; color: var(--ink); } .sa-txt p { font-size: .87rem; color: var(--ink-3); margin-top: 3px; line-height: 1.45; } .sa-txt .spar { display: inline-block; margin-top: 6px; font-size: .78rem; font-style: normal; color: #2e7d32; background: #eaf5ea; padding: 2px 8px; border-radius: 20px; } .sa-pr { flex: 0 0 auto; display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; } .gr { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; border: 1px solid #ddd5c2; background: #fff; border-radius: 8px; padding: 8px 12px; font: inherit; font-size: .88rem; color: var(--ink); transition: .18s var(--ease); } .gr:hover { border-color: var(--gold); background: #fdf9ef; } .gr span { color: var(--ink-3); font-size: .82rem; } .gr b { font-variant-numeric: tabular-nums; font-weight: 600; } .gr .plus { width: 21px; height: 21px; border-radius: 50%; background: var(--gold-lt); color: var(--ink); display: grid; place-items: center; font-size: 15px; line-height: 1; } .gr.hinweis { cursor: default; border-style: dashed; } .gr.hinweis:hover { background: #fff; border-color: #ddd5c2; } .kat-note { margin-top: 12px; font-size: .88rem; color: var(--ink-3); } /* Warenkorb — läuft rechts mit */ .shop-korb { position: sticky; top: var(--kopf, 58px); background: #fff; border: 0; border-left: 1px solid var(--linie); border-radius: 0; padding: 0 22px 20px; display: flex; flex-direction: column; height: calc(100vh - var(--kopf, 58px)); /* Die weisse Fläche reicht bis an den rechten Bildschirmrand. Ein Schlagschatten malt sie dorthin, ohne die Seite breiter zu machen. */ box-shadow: 2000px 0 0 0 #fff; transition: box-shadow .2s var(--ease); } /* Das Nicken gehoert der Spaltenansicht. Als Schublade setzt die Animation das transform: translateX(100%) ausser Kraft — der geschlossene Warenkorb lag dann eine halbe Sekunde weiss ueber der ganzen Karte. */ @media (min-width: 1151px) { .shop-korb.nick { animation: korbNick .46s var(--ease); } } @keyframes korbNick { 0%, 100% { transform: none; } 35% { transform: translateY(-3px) scale(1.006); } 70% { transform: translateY(1px); } } .shop-korb header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 0 13px; border-bottom: 1px solid #f1ece1; } .korb-titel { display: flex; align-items: center; gap: 9px; min-width: 0; } .korb-sym { width: 19px; height: 19px; flex: 0 0 auto; color: var(--ink-2); } .shop-korb header b { font-family: var(--body); font-size: 1.04rem; font-weight: 700; letter-spacing: -.01em; } .korb-zahl { font-style: normal; font-size: .74rem; font-weight: 700; line-height: 1; background: var(--ink); color: #fff; padding: 4px 7px; border-radius: 20px; font-variant-numeric: tabular-nums; } .shop-korb header button { display: none; background: transparent; border: 0; cursor: pointer; color: var(--ink-3); padding: 6px; border-radius: 8px; flex: 0 0 auto; } .shop-korb header button:hover { background: #f4f1e9; color: var(--ink); } .korb-scroll { flex: 0 0 auto; margin: 0; padding: 0; } .korb-scroll::-webkit-scrollbar { width: 6px; } .korb-scroll::-webkit-scrollbar-thumb { background: #e2dccd; border-radius: 3px; } .korb-scroll::-webkit-scrollbar-track { background: transparent; } #korbListe { list-style: none; margin: 0; padding: 0; } #korbListe li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f4f0e7; } #korbListe li:last-child { border-bottom: 0; } #korbListe .korb-leer { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 34px 10px; text-align: center; border: 0; } #korbListe .korb-leer svg { width: 34px; height: 34px; color: #d8cfb8; margin-bottom: 3px; } #korbListe .korb-leer b { font-family: var(--body); font-size: .95rem; font-weight: 600; color: var(--ink-2); } #korbListe .korb-leer span { font-size: .83rem; color: var(--ink-3); max-width: 22ch; line-height: 1.5; } .kp-mg { display: flex; align-items: center; gap: 1px; border: 1px solid #e6e0d2; border-radius: 9px; background: #fdfcf9; padding: 2px; align-self: start; } .kp-mg button { width: 27px; height: 27px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; font: inherit; font-size: 15px; line-height: 1; color: var(--ink-2); display: grid; place-items: center; transition: .14s var(--ease); } .kp-mg button:hover { background: #f0ebdf; color: var(--ink); } .kp-mg button svg { width: 15px; height: 15px; } .kp-mg .kp-weg-knopf { color: #b0724f; } .kp-mg .kp-weg-knopf:hover { background: #fdf2ee; color: #a2431f; } .kp-mg span { min-width: 17px; text-align: center; font-size: .86rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); } .kp-txt { min-width: 0; padding-top: 2px; } .kp-txt b { display: block; font-size: .92rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } .kp-txt i { display: block; font-style: normal; font-size: .8rem; color: var(--ink-2); margin-top: 1px; } .kp-txt span { display: block; font-size: .8rem; color: var(--ink-3); line-height: 1.45; margin-top: 2px; } .kp-weg { color: #a2431f !important; } .kp-notiz { font-style: italic; } .kp-pr { text-align: right; padding-top: 2px; } .kp-pr b { display: block; font-size: .93rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .kp-pr span { display: block; font-size: .76rem; color: var(--ink-3); white-space: nowrap; margin-top: 1px; } /* Der Punkt, der in den Warenkorb fliegt */ .korb-flug { position: fixed; left: 0; top: 0; z-index: 140; pointer-events: none; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #e4c579, var(--gold) 62%, #a8842f); box-shadow: 0 3px 10px rgba(120,94,32,.4); } .korb-summen { padding-top: 13px; } .korb-summen .zeile { display: flex; justify-content: space-between; padding: 4px 0; font-size: .9rem; color: var(--ink-2); } .korb-summen .total { border-top: 1px solid #e6e0d2; margin-top: 8px; padding-top: 11px; color: var(--ink); } .korb-summen .total b { font-size: 1.12rem; font-weight: 700; } #korbHinweis .hw { margin-top: 8px; padding: 8px 10px; background: #fdf6e6; border-radius: 8px; font-size: .84rem; color: #7a5f1e; line-height: 1.45; } #zurKasse { width: 100%; margin-top: 14px; border-radius: 9px; } #zurKasse:disabled { opacity: .4; cursor: not-allowed; } .korb-fuss { margin-top: 10px; font-size: .78rem; color: var(--ink-3); text-align: center; } .korb-fuss a { color: var(--gold); } /* Schwebende Leiste (Handy) */ .korb-float { display: none; position: fixed; left: 14px; right: 14px; z-index: 62; /* safe-area: als App auf dem Homebildschirm lag der Home-Indikator sonst auf der Leiste. */ bottom: calc(14px + env(safe-area-inset-bottom, 0px)); align-items: center; gap: 12px; padding: 14px 18px; cursor: pointer; background: var(--ink); color: #fff; border: 0; border-radius: var(--r-karte); font: inherit; font-size: 15px; font-weight: 600; box-shadow: 0 8px 26px rgba(20,18,14,.32); transition: transform .25s var(--ease), opacity .25s var(--ease); } .korb-float .kz { min-width: 24px; height: 24px; border-radius: 50%; background: var(--gold-lt); color: var(--ink); display: grid; place-items: center; font-size: 12.5px; } .korb-float .kt { flex: 1 1 auto; text-align: left; } .korb-float .ks { font-variant-numeric: tabular-nums; } .korb-float.leer { transform: translateY(140%); opacity: 0; pointer-events: none; } .korb-float.puls { transform: scale(1.03); } #korbSchatten { position: fixed; inset: 0; z-index: 125; background: rgba(14,12,9,.45); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); /* Die Unschaerfe gibt der Schublade Tiefe, touch-action verhindert, dass die Seite dahinter mitscrollt. Tippen zum Schliessen bleibt moeglich. */ -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); touch-action: none; } @media (max-width: 1150px) { /* Der Warenkorb wird hier zur Schublade und liegt ausserhalb des Rasters. Die Karte bekommt darum die ganze Breite — sonst stand rechts eine leere Spalte von 320 px im Bild. */ .shop-layout { grid-template-columns: minmax(0, 1fr); gap: 0; } .shop-korb { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100%); z-index: 132; border-radius: 0; max-height: none; transform: translateX(100%); transition: transform .35s var(--ease); padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: -14px 0 40px rgba(20,18,14,.22); } .shop-korb header { padding-bottom: 14px; } /* Solange die Schublade offen ist, dürfen schwebende Elemente nicht dazwischen */ body.korb-auf .korb-float, body.korb-auf #toTop { opacity: 0; pointer-events: none; } body.dlg-auf #toTop { opacity: 0; pointer-events: none; } .shop-korb header button { display: block; } body.korb-auf .shop-korb { transform: none; } body.korb-auf #korbSchatten { opacity: 1; pointer-events: auto; } .korb-float { display: flex; } } @media (max-width: 760px) { .shop-layout { grid-template-columns: 1fr; gap: 0; padding-bottom: 96px; } .shop-h1 { font-size: 1.4rem; margin-top: 18px; } .sa { flex-direction: column; align-items: stretch; gap: 12px; } .sa-pr { justify-content: stretch; } .gr { flex: 1 1 auto; justify-content: space-between; } .shop-status { width: 100%; order: 5; } } /* Auswahldialog */ /* Schatten und Blatt liegen ueber der festen Kopfleiste (z-index 120) — sonst blieb sie bei offenem Produktfenster hell und anklickbar und das Fenster war nicht wirklich modal. */ #dlgSchatten { position: fixed; inset: 0; z-index: 121; background: rgba(14,12,9,.5); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); touch-action: none; } body.dlg-auf #dlgSchatten { opacity: 1; pointer-events: auto; } #dlg { position: fixed; z-index: 122; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.97); width: min(520px, calc(100% - 28px)); /* calc(100vh - 132px): bei flachen Fenstern verschwand sonst der Titel hinter der 58 px hohen Kopfleiste. */ max-height: min(84vh, 720px, calc(100vh - 132px)); background: #fff; border-radius: var(--r-blatt); display: flex; flex-direction: column; /* overflow verhindert, dass Kopf und Fusszeile eckige weisse Ecken ueber die abgerundeten Kanten malen. */ overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease); box-shadow: var(--schatten-3); } body.dlg-auf #dlg { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } #dlg header { background: #fff; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; border-bottom: 1px solid #ece7db; } #dlg header b { font-family: var(--body); font-size: 1.12rem; font-weight: 700; } #dlg header button { background: transparent; border: 0; cursor: pointer; color: var(--ink-2); padding: 4px; flex: 0 0 auto; } /* overscroll-behavior: sonst reichte Chrome die Wischgeste am Listenende an die Seite weiter (Pull-to-Refresh — das Fenster war weg). */ #dlgBody { overflow-y: auto; overscroll-behavior: contain; padding: 6px 20px 14px; } .dlg-gruppe { padding-top: 16px; } .dg-kopf { margin-bottom: 10px; } .dg-kopf b { display: block; font-size: .98rem; font-weight: 600; } .dg-kopf span { display: block; font-size: .82rem; color: var(--ink-3); margin-top: 2px; } .dg-opt { display: flex; flex-direction: column; gap: 6px; } .opt { display: flex; align-items: center; gap: 11px; cursor: pointer; border: 1px solid #e6e0d2; border-radius: 9px; padding: 11px 13px; transition: .16s var(--ease); } .opt:hover { border-color: #cfc6b2; background: #fdfcf9; } .opt.an { border-color: var(--gold); background: #fdf8ec; } .opt input { width: 17px; height: 17px; accent-color: #96762c; flex: 0 0 auto; cursor: pointer; } .opt span { flex: 1 1 auto; font-size: .93rem; } .opt b { font-size: .86rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } #dlg footer { display: flex; align-items: center; gap: 14px; padding: 14px 20px 18px; border-top: 1px solid #ece7db; background: #fff; color: var(--ink); border-radius: 0 0 16px 16px; margin: 0; } #dlgExtra { flex: 1 1 auto; font-size: .82rem; color: var(--ink-3); } #dlgAdd { border-radius: 9px; padding: 12px 22px; } #dlgAdd:disabled { opacity: .4; cursor: not-allowed; } .sa-txt .waehlbar { display: inline-block; margin-top: 6px; margin-right: 6px; font-size: .78rem; font-style: normal; color: #7a5f1e; background: #fdf3dd; padding: 2px 9px; border-radius: 20px; } @media (max-width: 560px) { #dlg { left: 0; right: 0; bottom: 0; top: auto; width: 100%; transform: translateY(100%); border-radius: var(--r-blatt) var(--r-blatt) 0 0; /* dvh rechnet mit dem sichtbaren Fenster. Mit 88vh ragte das Blatt bei eingeblendeter Browserleiste unten heraus. vh bleibt als Ersatz. */ max-height: 88vh; max-height: 88dvh; } body.dlg-auf #dlg { transform: none; } } /* Zeitfenster im Warenkorb */ .korb-zeit { padding-top: 13px; border-top: 1px solid #ece7db; margin-top: 4px; } .korb-zeit label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; } .korb-zeit select { width: 100%; background: #fff; border: 1px solid #ddd5c2; border-radius: 8px; padding: 10px 12px; font: inherit; font-size: .93rem; color: var(--ink); cursor: pointer; } .korb-zeit select:focus { outline: 0; border-color: var(--gold); } @media (max-width: 640px) { /* Abstände kommen aus --kopf/--barh, gemessen beim Laden */ .shop-bar-in { row-gap: 8px; } .shop-status { font-size: .82rem; } } @media (max-width: 1150px) { .shop-korb { top: 0; } } /* Handy: Rasterspalte darf nicht von der Kategorienleiste aufgeblaeht werden */ @media (max-width: 760px) { .shop-layout { grid-template-columns: minmax(0, 1fr); } .shop-layout > * { min-width: 0; max-width: 100%; } .shop-kats { margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad); } } /* Handy: kein Raster — schlichter Fluss, damit nichts ueberlaeuft */ @media (max-width: 760px) { .shop-layout { display: block; } .shop-mitte { width: 100%; max-width: 100%; } .shop-kats { max-width: 100%; } } /* Handy: nichts darf seitlich herausragen */ @media (max-width: 760px) { html { overflow-x: hidden; } .shop-mitte, .shop-kat, .shop-artikel { max-width: 100%; } .sa { max-width: 100%; box-sizing: border-box; } .sa-pr { width: 100%; flex-wrap: wrap; } .gr { max-width: 100%; box-sizing: border-box; } .sa-txt p, .sa-txt h3 { overflow-wrap: anywhere; } } /* ─── Produktdialog v2 (eat.ch-Aufbau) ─── */ .dlg-kopf-txt { min-width: 0; } .dlg-kopf-txt b { display: block; font-size: 1.15rem; font-weight: 700; } .dlg-kopf-txt span { display: block; font-size: .85rem; color: var(--ink-3); margin-top: 2px; } .dg-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .dg-kopf b { font-size: .98rem; font-weight: 600; } .dg-tag { font-style: normal; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); background: #f0ece2; padding: 3px 8px; border-radius: 20px; } .dg-tag.pflicht { background: #fdf0d8; color: #7a5f1e; } .dg-kopf span { flex: 1 1 100%; font-size: .82rem; color: var(--ink-3); } #dlgNotiz { width: 100%; background: #fff; border: 1px solid #e6e0d2; border-radius: 9px; padding: 11px 13px; font: inherit; font-size: .93rem; color: var(--ink); resize: vertical; } #dlgNotiz:focus { outline: 0; border-color: var(--gold); } #dlgNotiz::placeholder { color: #b0a894; } .dlg-menge { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .dlg-menge button { width: 34px; height: 34px; border: 1px solid #ddd5c2; background: #fff; border-radius: 8px; cursor: pointer; font: inherit; font-size: 17px; line-height: 1; color: var(--ink-2); } .dlg-menge button:hover:not(:disabled) { border-color: var(--gold); color: var(--ink); } .dlg-menge button:disabled { opacity: .35; cursor: not-allowed; } .dlg-menge span { min-width: 20px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; } #dlgAdd { flex: 1 1 auto; } /* ─── Empfehlungen im Warenkorb ─── */ .korb-tipps { padding-top: 12px; border-top: 1px solid #ece7db; margin-top: 4px; } .tipp-kopf { font-size: .8rem; font-weight: 600; color: var(--ink-3); margin-bottom: 8px; } .tipp-liste { display: flex; flex-direction: column; gap: 5px; } .tipp { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; border: 1px solid #e6e0d2; background: #fff; border-radius: 9px; padding: 7px 10px; font: inherit; font-size: .88rem; color: var(--ink); text-align: left; transition: .16s var(--ease); } .tipp:hover { border-color: var(--gold); background: #fdf9ef; } .tipp .t-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tipp .t-p { font-variant-numeric: tabular-nums; color: var(--ink-2); } .tipp .t-plus { width: 20px; height: 20px; border-radius: 50%; background: var(--gold-lt); color: var(--ink); display: grid; place-items: center; font-size: 14px; line-height: 1; flex: 0 0 auto; } .kp-notiz { display: block; font-size: .78rem; color: var(--ink-3); font-style: italic; margin-top: 2px; } /* Speisekarte: Raster und Suchzeile auf kleinen Schirmen */ /* Eine Spalte erst dort, wo zwei Karten wirklich zu schmal wuerden. Tablets nutzen die volle Breite und zeigen zwei Karten nebeneinander. */ @media (max-width: 719px) { .shop-artikel { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .shop-suchfeld { margin: 12px 0 2px; } .shop-katzeile { margin: 0 calc(var(--pad) * -1) 4px; padding: 9px var(--pad) 8px; } .shop-suche { flex: 1 1 100%; } .shop-kats { margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 2px; } .sa { padding: 14px 48px 14px 14px; } .sa-plus { right: 11px; bottom: 11px; } } /* Faktenband unter der Überschrift (Lieferzeit, Gebühr, Mindestwert) */ .shop-fakten { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; } .fakt { display: inline-flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #ece7db; border-radius: 999px; padding: 7px 14px 7px 11px; font-size: .84rem; color: var(--ink-2); } .fakt .sym { width: 16px; height: 16px; flex: 0 0 auto; color: var(--gold-dk, #96762c); } /* Zutaten weglassen und Extras */ .dg-weg { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 7px; } .dg-weg .opt.an { border-color: #c8562f; background: #fdf2ee; } .dg-weg .opt.an span { color: #a2431f; } .dg-weg .opt input { accent-color: #c8562f; } .kp-weg { display: block; font-size: .78rem; color: #a2431f; margin-top: 2px; } /* Lange Optionslisten (Extras, Pizzazutaten) zweispaltig */ .dg-eng { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 7px; } .dg-eng .opt { padding: 9px 11px; } .dg-eng .opt span { font-size: .89rem; } /* Standortknopf */ .orten { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: #fff; border: 1px solid #ddd5c2; border-radius: 999px; padding: 8px 13px 8px 11px; font: inherit; font-size: .84rem; color: var(--ink-2); transition: .16s var(--ease); flex: 0 0 auto; } .orten:hover { border-color: var(--gold); color: var(--ink); } .orten svg { width: 15px; height: 15px; flex: 0 0 auto; } .orten.laedt { opacity: .55; pointer-events: none; } .orten.laedt svg { animation: pulsieren 1.1s ease-in-out infinite; } @keyframes pulsieren { 0%, 100% { opacity: .35 } 50% { opacity: 1 } } .orten-breit { width: 100%; justify-content: center; padding-block: 11px; margin-top: 2px; } .plz-info.plz-meldung { display: block; font-size: .84rem; color: var(--ink-2); } @media (max-width: 760px) { .orten span { display: none; } .orten { padding: 8px 10px; } .orten-breit span { display: inline; } } /* ═══════════════ Kasse ═══════════════ */ .kasse { padding-block: 26px 64px; } .kasse-zurueck { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: .88rem; color: var(--ink-2); text-decoration: none; } .kasse-zurueck:hover { color: var(--ink); } .kasse-zurueck svg { width: 15px; height: 15px; } .kasse h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); margin-bottom: 20px; } .kasse-leer { background: #fff; border: 1px solid #ece7db; border-radius: 14px; padding: 40px 24px; text-align: center; } .kasse-leer p { color: var(--ink-3); margin-bottom: 16px; } .kasse-grid { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 26px; align-items: start; } .kasse-spalte { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .kf { background: #fff; border: 1px solid #ece7db; border-radius: 14px; padding: 20px; } .kf h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; font-family: var(--body); font-size: 1.02rem; font-weight: 700; color: var(--ink); } .kf-nr { flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 600; } .kf-art { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .ka { /* 110 px Basis: bei 320 px Breite stapelten sich die beiden Felder sonst zu zwei Listenpunkten statt eines Umschalters. */ flex: 1 1 110px; white-space: nowrap; cursor: pointer; border: 1px solid var(--linie-stark); background: #fdfcf9; border-radius: var(--r-feld); padding: 12px 10px; font: inherit; font-size: .92rem; color: var(--ink-2); transition: .16s var(--ease); } .ka:hover { border-color: var(--gold); } .ka.on { border-color: var(--gold); background: #fdf8ec; color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--gold); } .kf-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .feld { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .feld-breit, .kf-felder > .kf-hinweis { grid-column: 1 / -1; } .feld-plz { max-width: 120px; } .feld > span { font-size: .82rem; font-weight: 600; color: var(--ink-2); } .feld input, .feld select, .feld textarea { width: 100%; box-sizing: border-box; background: #fdfcf9; border: 1px solid #ddd5c2; border-radius: var(--r-feld); padding: 11px 13px; font: inherit; color: var(--ink); /* Unter 16 px zoomt iOS Safari beim Antippen in die Seite hinein und stellt sie nicht zurueck — danach haengt die ganze Kasse vergroessert fest. */ font-size: max(16px, .95rem); } .feld input:focus, .feld select:focus, .feld textarea:focus { outline: 0; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 3px rgba(191,155,74,.15); } /* Rot erst, wenn der Gast das Feld wirklich falsch ausgefuellt hat */ .feld input:user-invalid, .feld select:user-invalid, .feld textarea:user-invalid { border-color: #c8562f; background: #fdf7f4; } .feld textarea { resize: vertical; min-height: 74px; } .kf-hinweis { margin-top: 4px; font-size: .84rem; color: var(--ink-3); line-height: 1.5; } .kf-hinweis.warn { color: #a2431f; } .kf-abholung p { font-size: .93rem; line-height: 1.6; } .kf-abholung p + p { margin-top: 8px; } .zahlarten { display: flex; flex-direction: column; gap: 9px; } .zahl { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; border: 1px solid #e2dccd; background: #fdfcf9; border-radius: 10px; padding: 13px 14px; transition: .16s var(--ease); } .zahl:hover { border-color: #cfc6b2; } .zahl.on { border-color: var(--gold); background: #fdf8ec; box-shadow: inset 0 0 0 1px var(--gold); } .zahl input { width: 17px; height: 17px; margin-top: 2px; accent-color: #96762c; flex: 0 0 auto; } .z-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .z-txt b { font-size: .95rem; font-weight: 600; } .z-txt i { font-style: normal; font-size: .83rem; color: var(--ink-3); } /* Kein opacity auf der ganzen Karte: bei 62 % war ausgerechnet die Erklaerung, warum es nicht geht, kaum noch lesbar. Gestrichelter Rand zeigt „aus". */ .zahl.gesperrt { cursor: not-allowed; background: #f7f5f0; border-style: dashed; } .zahl.gesperrt .z-txt b { color: var(--ink-2); } .zahl.gesperrt .z-txt i { color: var(--ink-3); } .zahl.gesperrt input { opacity: .5; } .z-bald { flex: 0 0 auto; align-self: center; font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #7a5f1e; background: #fdf0d8; padding: 3px 8px; border-radius: 20px; white-space: nowrap; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .kasse-korb { position: sticky; top: calc(var(--kopf, 72px) + 14px); } .kk-innen { background: #fff; border: 1px solid #ece7db; border-radius: 14px; padding: 19px; } .kk-innen h2 { font-family: var(--body); font-size: 1.02rem; font-weight: 700; margin-bottom: 13px; } #kkListe { list-style: none; display: flex; flex-direction: column; gap: 11px; max-height: 42vh; overflow-y: auto; margin: 0 -3px; padding: 0 3px; } #kkListe li { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; } .kk-mg { flex: 0 0 auto; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; } .kk-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .kk-txt b { font-weight: 600; overflow-wrap: anywhere; } .kk-txt i { font-style: normal; font-size: .8rem; color: var(--ink-3); } .kk-txt > span { font-size: .8rem; color: var(--ink-3); overflow-wrap: anywhere; } .kk-weg { color: #a2431f !important; } .kk-notiz { font-style: italic; } .kk-pr { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; } #kkSummen { border-top: 1px solid #ece7db; margin-top: 15px; padding-top: 13px; display: flex; flex-direction: column; gap: 6px; } .kk-z { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--ink-2); } .kk-z span:last-child { font-variant-numeric: tabular-nums; } .kk-total { margin-top: 5px; padding-top: 9px; border-top: 1px solid #ece7db; font-size: 1.04rem; font-weight: 700; color: var(--ink); } #kasseSenden { width: 100%; margin-top: 15px; border-radius: 10px; padding: 14px 18px; } #kasseSenden:disabled { opacity: .45; cursor: not-allowed; } .kasse-fehler { margin-top: 12px; font-size: .87rem; color: #a2431f; background: #fdf2ee; border: 1px solid #f0d9d0; border-radius: 9px; padding: 10px 12px; } .kk-klein { margin-top: 11px; font-size: .78rem; color: var(--ink-3); line-height: 1.5; } .kasse-fertig { background: #fff; border: 1px solid #ece7db; border-radius: 16px; padding: 40px 26px; text-align: center; max-width: 620px; margin: 0 auto; } .kfg-kreis { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: #eaf5ea; color: #2e7d32; display: grid; place-items: center; } .kfg-kreis svg { width: 27px; height: 27px; } .kasse-fertig h2 { font-size: 1.4rem; margin-bottom: 8px; } .kfg-nr { font-size: .95rem; color: var(--ink-3); margin-bottom: 22px; } .kfg-nr b { color: var(--ink); font-variant-numeric: tabular-nums; } .kfg-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; text-align: left; border-top: 1px solid #ece7db; border-bottom: 1px solid #ece7db; padding: 18px 0; margin-bottom: 18px; } .kfg-daten dt { font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; } .kfg-daten dd { font-size: .95rem; overflow-wrap: anywhere; } .kfg-note { font-size: .9rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 20px; } .kfg-knoepfe { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } @media (max-width: 980px) { .kasse-grid { grid-template-columns: minmax(0, 1fr); } .kasse-korb { position: static; } #kkListe { max-height: none; } } @media (max-width: 560px) { .kf { padding: 16px 15px; } .kf-felder { grid-template-columns: minmax(0, 1fr); } .feld-plz { max-width: none; } } /* Bedienbarkeit: Tippflächen auf Berührungsgeräten mindestens 40px */ @media (pointer: coarse) { .kp-mg button { width: 34px; height: 34px; font-size: 17px; } .dlg-menge button { width: 40px; height: 40px; } .opt { padding: 13px 13px; } .shop-kats .kat { padding: 10px 15px; } .sa-plus { width: 34px; height: 34px; font-size: 21px; } .tipp { padding: 11px 12px; } /* Die Schliess-Kreuze bekommen ihre 40 px weiter unten in einem Block, der auch die staerkeren ID-Regeln (#dlg header button) schlaegt. */ } /* Kategorienleiste: Blätterpfeile, Ausblenden am Rand, Feld mit allen Kategorien */ .shop-katzeile { display: flex; align-items: center; gap: 6px; } .shop-kats-huelle { position: relative; flex: 1 1 auto; min-width: 0; } .shop-kats-huelle::before, .shop-kats-huelle::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30px; pointer-events: none; opacity: 0; transition: opacity .18s var(--ease); z-index: 2; } .shop-kats-huelle::before { left: 0; background: linear-gradient(to left, rgba(245,243,238,0), rgba(245,243,238,.98)); } .shop-kats-huelle::after { right: 0; background: linear-gradient(to right, rgba(245,243,238,0), rgba(245,243,238,.98)); } .shop-kats-huelle.mehr-links::before, .shop-kats-huelle.mehr-rechts::after { opacity: 1; } .kat-pfeil { flex: 0 0 auto; width: 32px; height: 32px; padding: 6px; cursor: pointer; border: 1px solid #e2dccd; background: #fff; border-radius: 50%; color: var(--ink-2); display: grid; place-items: center; transition: .16s var(--ease); } .kat-pfeil svg { width: 100%; height: 100%; } .kat-pfeil:hover:not(:disabled) { border-color: var(--gold); color: var(--ink); } .kat-pfeil:disabled { opacity: .3; cursor: default; } .kat-alle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid #e2dccd; background: #fff; border-radius: 999px; padding: 8px 14px 8px 11px; font: inherit; font-size: .86rem; color: var(--ink-2); transition: .16s var(--ease); white-space: nowrap; } .kat-alle svg { width: 16px; height: 16px; flex: 0 0 auto; } .kat-alle:hover { border-color: var(--gold); color: var(--ink); } .kat-alle.auf { background: var(--ink); border-color: var(--ink); color: #fff; } .kat-alle-box { position: relative; flex: 0 0 auto; } .kat-feld { position: absolute; z-index: 45; right: 0; top: calc(100% + 8px); width: min(340px, calc(100vw - 2 * var(--pad))); background: #fff; border: 1px solid #e6e0d2; border-radius: 13px; box-shadow: 0 18px 44px -16px rgba(20,18,14,.34); overflow: hidden; display: flex; flex-direction: column; max-height: min(58vh, 430px); } .kat-feld-kopf { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid #f1ece1; } .kat-feld-kopf b { font-family: var(--body); font-size: .98rem; font-weight: 700; } .kat-feld-kopf button { background: none; border: 0; padding: 5px; cursor: pointer; color: var(--ink-3); border-radius: 8px; width: 28px; height: 28px; } .kat-feld-kopf button svg { width: 100%; height: 100%; } .kat-feld-kopf button:hover { background: #f4f1e9; color: var(--ink); } .kat-feld-liste { display: flex; flex-direction: column; gap: 1px; padding: 7px; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; } .kf-eintrag { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: none; cursor: pointer; text-align: left; padding: 10px 11px; border-radius: 9px; font: inherit; font-size: .89rem; color: var(--ink); } .kf-eintrag:hover { background: #f7f4ec; } .kf-eintrag i { font-style: normal; font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; background: #f1ece1; padding: 2px 7px; border-radius: 20px; flex: 0 0 auto; } @media (max-width: 640px) { .kat-pfeil { display: none; } .kat-alle span { display: none; } .kat-alle { padding: 8px 10px; } .kat-feld { width: min(300px, calc(100vw - 2 * var(--pad))); } } /* Dialogknopf bleibt einzeilig, auch auf schmalen Geräten */ #dlgAdd { white-space: nowrap; letter-spacing: .02em; } @media (max-width: 420px) { #dlgAdd { font-size: .82rem; padding: 13px 12px; letter-spacing: 0; } .dlg-menge { gap: 7px; } #dlg header { padding: 15px 16px; align-items: flex-start; } #dlg header button { margin-top: 2px; } #dlgBody { padding: 4px 16px 12px; } #dlg footer { padding: 12px 16px 16px; } } /* Lange Optionslisten: erst acht zeigen, Rest auf Wunsch */ .dg-opt.gekuerzt > .opt:nth-child(n+9) { display: none; } .dg-mehr { margin-top: 8px; width: 100%; cursor: pointer; font: inherit; font-size: .86rem; background: #fff; border: 1px solid #ddd5c2; border-radius: 9px; padding: 10px 12px; color: var(--ink-2); } .dg-mehr:hover { border-color: var(--gold); color: var(--ink); } /* Warenkorbzeile: Einzelpreis bei Mehrfachmenge */ /* Handy: Liefern/Abholen, PLZ und Status in eine kompakte Zeile */ @media (max-width: 760px) { .shop-bar-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding-block: 8px; } .art-wahl { padding: 2px; } .art-wahl button { padding: 8px 11px; font-size: .84rem; } .plz-box { display: flex; gap: 6px; min-width: 0; } #plzFeld { width: 66px; padding: 8px 9px; font-size: .88rem; } .orten { padding: 8px 9px; } .shop-status { grid-column: 1 / -1; font-size: .8rem; margin-top: -2px; } /* .plz-info blieb hier aus der alten Kopfleiste ausgeblendet. Heute steht darin die Antwort auf die eingegebene Postleitzahl — sie muss sichtbar sein, sonst tippt der Gast eine PLZ und sieht keine Reaktion. */ } @media (max-width: 400px) { .art-wahl button { padding: 8px 9px; font-size: .8rem; } #plzFeld { width: 58px; } } /* Kasse: Warenkorbposten, Upselling, Rabattzeile */ .kasse-posten { list-style: none; margin: 0; padding: 0; } .kasse-posten li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 13px 0; border-bottom: 1px solid #f1ece1; } .kasse-posten li:first-child { padding-top: 2px; } .kasse-posten li:last-child { border-bottom: 0; padding-bottom: 2px; } .kf-trenner { border-top: 1px solid #f1ece1; margin: 17px 0; } .tipp-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } .tipp-karte { display: flex; flex-direction: column; gap: 3px; cursor: pointer; text-align: left; border: 1px solid #e6e0d2; background: #fdfcf9; border-radius: 11px; padding: 12px 13px; font: inherit; transition: .16s var(--ease); } .tipp-karte:hover { border-color: var(--gold); background: #fff; box-shadow: 0 3px 12px rgba(20,18,14,.06); } .tk-name { font-size: .92rem; font-weight: 600; color: var(--ink); } .tk-be { font-size: .79rem; color: var(--ink-3); line-height: 1.4; } .tk-fuss { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .tk-fuss b { font-size: .9rem; font-variant-numeric: tabular-nums; } .tk-plus { width: 24px; height: 24px; border-radius: 50%; background: var(--gold-lt); color: var(--ink); display: grid; place-items: center; font-size: 16px; font-style: normal; line-height: 1; } .tipp-karte:hover .tk-plus { background: var(--gold); color: #fff; } .rabattzeile { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .rabattzeile .feld { flex: 1 1 180px; } .rabattzeile .btn { flex: 0 0 auto; padding: 11px 18px; border-radius: 9px; } .kf-hinweis.gut { color: #2e7d32; } .kk-rabatt span { color: #2e7d32 !important; } /* Tippflächen: Standortknopf und Textlinks im Warenkorb */ @media (pointer: coarse) { .orten { padding: 11px 12px; } } /* Hinweis mit Handlungsknopf */ .hw-knopf { display: inline-block; margin-left: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: inherit; font-weight: 600; color: #7a5f1e; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .hw-knopf:hover { color: var(--ink); } /* Scrollbereich im Warenkorb: unten sanft ausblenden */ .korb-scroll { mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 14px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 14px), transparent 100%); } /* Auf der Kasse braucht es keinen "nach oben"-Knopf — er lag über dem Zeitfeld */ body.kasse-seite #toTop { display: none; } /* Warenkorb auf Berührungsgeräten: die Mengenknöpfe standen hier auf 30 px Höhe und machten die Regel weiter oben (34 px) zunichte. Die gültigen 40-px-Flächen stehen jetzt gesammelt im Feinschliff am Dateiende. */ /* ═══════════ Aufbau wie bei eat.ch ═══════════ */ /* Restaurantkopf oben in der Kartenspalte */ .lokal-kopf { padding: 22px 0 2px; } .lokal-kopf h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15; letter-spacing: -.02em; margin: 0; } .lokal-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 9px 0 0; font-size: .88rem; color: var(--ink-2); } .lokal-zeile { row-gap: 2px; } /* Bewusst inline und NICHT inline-flex: Bricht eine lange Angabe wie „Alte Winterthurerstrasse 203, 8309 Nürensdorf" auf dem Handy um, waere der Trenner als zweites Flex-Element ein eigener Kasten neben dem ganzen zweizeiligen Block — er stand dann mittig rechts daneben statt am Ende des Textes. Als reines Inline-Element laeuft er im Textfluss mit. */ .lokal-zeile span { display: inline; } /* Der Trenner haengt am Ende einer Angabe, nicht am Anfang der naechsten. Sonst begann auf dem Handy jede umgebrochene Zeile mit einem Punkt. */ .lokal-zeile span:not(:last-child)::after { content: " ·"; color: var(--ink-3); } .lokal-status { margin: 6px 0 0; font-size: .88rem; font-weight: 600; color: #2e7d32; } .lokal-status.zu { color: #a2431f; } /* Liefern/Abholen im Warenkorb — zwei gleich grosse Felder mit Dauer */ .korb-art { padding-top: 14px; } .art-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #f4f1e9; border-radius: 10px; padding: 3px; } .art-wahl button { display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; padding: 8px 6px; font: inherit; color: var(--ink-2); transition: .16s var(--ease); min-width: 0; } .art-wahl button svg { width: 17px; height: 17px; flex: 0 0 auto; } .art-wahl button b { font-size: .86rem; font-weight: 600; white-space: nowrap; } .art-wahl button i { font-style: normal; font-size: .73rem; color: var(--ink-3); white-space: nowrap; } .art-wahl button i::before { content: "·"; margin-right: 5px; } .art-wahl button:hover { color: var(--ink); } .art-wahl button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(20,18,14,.08), 0 0 0 1px rgba(20,18,14,.06); } .art-wahl button.on i { color: var(--ink-2); } .art-wahl button:disabled { opacity: .4; cursor: not-allowed; } .korb-plz { padding-top: 9px; } .korb-plz label { position: absolute; left: -9999px; } .korb-plz-zeile { display: flex; gap: 7px; } .korb-plz-zeile #plzFeld { width: 84px; flex: 0 0 auto; padding-block: 8px; background: #fdfcf9; border: 1px solid #ddd5c2; border-radius: 9px; padding: 9px 11px; font: inherit; font-size: .93rem; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; } .korb-plz-zeile #plzFeld:focus { outline: 0; border-color: var(--gold); background: #fff; } .korb-plz-zeile .orten { flex: 1 1 auto; justify-content: center; } .korb-plz .plz-info { margin: 6px 0 0; font-size: .8rem; color: var(--ink-2); line-height: 1.45; } .korb-plz .plz-info.warn { color: #a2431f; } /* Der Warenkorb füllt die rechte Spalte */ .shop-korb { padding-top: 0; } .shop-korb header { padding-top: 16px; } @media (max-width: 640px) { .lokal-kopf { padding-top: 16px; } .art-wahl button { padding: 10px 5px; } .korb-plz-zeile .orten span { display: inline; } } /* ═══════════ Bestellseite: eigener Kopf, volle Breite ═══════════ */ .shop-kopf { position: fixed; inset: 0 0 auto 0; z-index: 120; height: 58px; /* Drei Spalten statt margin:0 auto — links steht ein Link, rechts zwei. Im Flexfluss sass das Logo dadurch bis zu 75 px links der Mitte. */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 0 clamp(14px, 2.2vw, 26px); background: rgba(255,255,255,.94); -webkit-backdrop-filter: saturate(150%) blur(10px); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--linie); } .shop-kopf > * { min-width: 0; } .sk-zurueck { display: inline-flex; align-items: center; gap: 7px; justify-self: start; font-size: .87rem; font-weight: 500; color: var(--ink-2); padding: 8px 12px 8px 8px; border-radius: 999px; transition: .16s var(--ease); } .sk-zurueck svg { width: 17px; height: 17px; } .sk-zurueck:hover { background: #f4f1e9; color: var(--ink); } .sk-marke { display: flex; align-items: center; margin: 0; justify-self: center; } .sk-marke img { height: 27px; width: auto; display: block; } .sk-rechts { display: flex; align-items: center; gap: 4px; justify-self: end; min-width: 0; } .sk-konto, .sk-tel { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 500; color: var(--ink-2); padding: 8px 12px; border-radius: 999px; transition: .16s var(--ease); } .sk-konto svg, .sk-tel svg { width: 17px; height: 17px; } .sk-konto:hover, .sk-tel:hover { background: #f4f1e9; color: var(--ink); } /* Volle Seitenbreite für die Bestellseite */ .shop-breit { width: 100%; max-width: 1640px; margin: 0 auto; padding-left: clamp(14px, 2.2vw, 26px); padding-right: clamp(14px, 2.2vw, 26px); } .shop-seite .shop-katzeile { padding-left: 0; padding-right: 0; } @media (min-width: 1151px) { /* Mehr Luft: breitere Warenkorbspalte und grösserer Abstand */ .shop-layout { grid-template-columns: minmax(0, 1fr) 396px; gap: 40px; } .shop-korb { padding-left: 26px; padding-right: 26px; } } @media (min-width: 1500px) { .shop-layout { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; } /* Die feste Dreispaltigkeit ist entfallen — auto-fill (Z. oben) verteilt die Karten stufenlos und ohne Sprung bei genau 1500 px. */ } @media (max-width: 700px) { .shop-kopf { height: 52px; gap: 8px; } .sk-zurueck span { display: none; } .sk-konto span, .sk-tel span { display: none; } .sk-marke img { height: 23px; } } /* ═══════════ Kundenkonto ═══════════ */ .konto { padding-top: calc(58px + 26px); padding-bottom: 70px; } .konto-laden { padding: 60px 0; color: var(--ink-3); font-size: .95rem; } .konto h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15; letter-spacing: -.02em; margin: 0; } .konto-sub { margin: 8px 0 0; font-size: .92rem; color: var(--ink-2); line-height: 1.6; max-width: 60ch; } .konto-h2 { font-size: 1.12rem; margin: 34px 0 14px; } .konto-karte { background: #fff; border: 1px solid #ece7db; border-radius: 16px; padding: 28px; max-width: 560px; } .konto-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; } .konto-form .btn { align-self: flex-start; } .konto-info { margin: 14px 0 0; font-size: .88rem; line-height: 1.55; } .konto-info.gut { color: #2e7d32; } .konto-info.warn { color: #a2431f; } .konto-klein { margin: 20px 0 0; font-size: .82rem; color: var(--ink-3); line-height: 1.55; } .konto-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; } .konto-knoepfe { display: flex; gap: 9px; flex-wrap: wrap; } .konto-knoepfe .btn { padding: 10px 17px; font-size: .84rem; } .konto-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .konto-kachel { background: #fff; border: 1px solid #ece7db; border-radius: 13px; padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; } .konto-kachel span { font-size: .8rem; color: var(--ink-3); font-weight: 500; } .konto-kachel b { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .konto-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; } .konto-leer { background: #fff; border: 1px dashed #ddd5c2; border-radius: 14px; padding: 34px 22px; color: var(--ink-3); font-size: .92rem; text-align: center; line-height: 1.6; } .bestellkarte { background: #fff; border: 1px solid #ece7db; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; } .bestellkarte header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 15px 17px 13px; border-bottom: 1px solid #f4f0e7; } .bestellkarte header b { display: block; font-family: var(--body); font-size: .95rem; font-weight: 600; } .bestellkarte header span { display: block; font-size: .8rem; color: var(--ink-3); margin-top: 2px; } .bk-plakette { flex: 0 0 auto; font-size: .74rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: #f1ece1; color: var(--ink-2); white-space: nowrap; } .bk-plakette.an { background: #fdf3dd; color: #7a5f1e; } .bk-plakette.arbeit { background: #fdf0d8; color: #8a6a12; } .bk-plakette.weg { background: #eaf1f7; color: #2c5f8a; } .bk-plakette.fertig { background: #eaf5ea; color: #2e7d32; } .bk-plakette.ab { background: #fdf2ee; color: #a2431f; } .bk-zeilen { list-style: none; margin: 0; padding: 13px 17px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; } .bk-zeilen li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; } .bz-mg { font-size: .85rem; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; } .bz-txt b { font-size: .89rem; font-weight: 600; } .bz-txt i { font-style: normal; font-size: .82rem; color: var(--ink-3); } .bz-txt span { display: block; font-size: .78rem; color: var(--ink-3); line-height: 1.45; margin-top: 1px; } .bz-weg { color: #a2431f !important; } .bz-notiz { font-style: italic; } .bz-pr { font-size: .86rem; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); } .bestellkarte footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 17px; border-top: 1px solid #f4f0e7; background: #fdfcf9; } .bk-summe { font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; } .bestellkarte footer .btn { padding: 9px 15px; font-size: .82rem; } .konto-daten { margin-top: 30px; max-width: none; } .konto-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 18px 0 0; } .konto-dl dt { font-size: .78rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 3px; } .konto-dl dd { margin: 0; font-size: .93rem; overflow-wrap: anywhere; } @media (max-width: 600px) { .konto { padding-top: calc(52px + 20px); } .konto-karte { padding: 22px 18px; } .konto-liste { grid-template-columns: minmax(0, 1fr); } } /* Anmeldekarte mittig, mehr Luft im Warenkorb */ .konto-seite .konto-karte:first-of-type { margin: 40px auto 0; } .korb-art { padding-top: 12px; padding-bottom: 2px; } .korb-scroll { padding-top: 4px; } .korb-summen { padding-top: 13px; border-top: 1px solid #ece7db; margin-top: 2px; } .korb-summen .zeile { padding: 4px 0; } .korb-summen .total { margin-top: 8px; padding-top: 11px; } #zurKasse { margin-top: 13px; padding: 15px 18px; } .korb-fuss { margin-top: 12px; } .korb-zeit { padding-top: 16px; } /* Fehlende Postleitzahl wird am Feld markiert, nicht als Textzeile */ #plzFeld.noetig { border-color: #c8562f; background: #fdf7f4; } #plzFeld.noetig::placeholder { color: #c8562f; } /* Der Warenkorb scrollt als Ganzes — alle Artikel sind erreichbar, Summe und Knopf bleiben unten stehen. */ .shop-korb { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ddd5c2 transparent; } .shop-korb::-webkit-scrollbar { width: 7px; } .shop-korb::-webkit-scrollbar-thumb { background: #e2dccd; border-radius: 4px; } .shop-korb::-webkit-scrollbar-track { background: transparent; } .korb-unten { position: sticky; bottom: 0; margin-top: auto; background: #fff; padding-bottom: 4px; box-shadow: 0 -10px 14px -14px rgba(20,18,14,.28); } .korb-scroll { mask-image: none; -webkit-mask-image: none; } /* Freiwillige Ergänzung im Auswahldialog */ .dlg-dazu { display: flex; flex-direction: column; gap: 7px; } .dazu { display: flex; align-items: center; gap: 11px; cursor: pointer; border: 1px solid #e6e0d2; background: #fdfcf9; border-radius: 10px; padding: 11px 13px; transition: .16s var(--ease); } .dazu:hover { border-color: #cfc6b2; background: #fff; } .dazu.an { border-color: var(--gold); background: #fdf8ec; } .dazu input { width: 17px; height: 17px; accent-color: #96762c; flex: 0 0 auto; cursor: pointer; } .dz-n { flex: 1 1 auto; min-width: 0; font-size: .92rem; } .dz-p { font-size: .86rem; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Sicherheitsnetz: "hidden" muss immer greifen, auch wenn eine Regel display setzt. Sonst lassen sich Felder nicht mehr schliessen. */ [hidden] { display: none !important; } /* ============================================================ Begrüssungsband für Stammgäste (js/gruss.js, nur Startseite) Steht direkt unter dem Hero. Der Behälter #gruss bleibt selbst ohne Rahmen und Innenabstand — leer hat er darum keine Höhe. ============================================================ */ /* Persönliche Begrüssung im Hero — eine ruhige Zeile direkt unter dem Ort. Sie erscheint nur, wenn wirklich ein Name vorliegt, und blendet sich sanft ein, damit im Hero nichts springt. */ .gruss-hero { /* Ein fliessender Absatz: Der Stern steht im Text, nicht daneben — so rutscht er auf schmalen Geräten nicht auf eine eigene Zeile. */ display: block; margin: clamp(14px, 2vw, 22px) 0 0; font-size: clamp(.95rem, 1.35vw, 1.08rem); line-height: 1.5; color: rgba(255, 255, 255, .88); opacity: 0; transform: translateY(9px); transition: opacity .55s var(--ease), transform .55s var(--ease); } .gruss-hero.da { opacity: 1; transform: none; } .gruss-hero .gruss-stern { display: inline-block; vertical-align: -2px; margin-right: 8px; color: var(--gold-lt); } .gruss-hero .gruss-satz { overflow-wrap: anywhere; } .gruss-hero b { font-weight: 700; color: #fff; } .gruss-hero .gruss-link { display: inline-block; margin-left: 14px; font-size: .85em; letter-spacing: .03em; white-space: nowrap; color: var(--gold-lt); border-bottom: 1px solid rgba(224, 197, 130, .5); padding-bottom: 2px; transition: color .18s var(--ease), border-color .18s var(--ease); } .gruss-hero .gruss-link:hover { color: #fff; border-color: #fff; } .gruss-hero .gruss-link:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; } .gruss-hero .gruss-zu { width: 24px; height: 24px; display: inline-grid; place-items: center; vertical-align: -6px; margin-left: 8px; border: 0; border-radius: 50%; cursor: pointer; padding: 0; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); opacity: .55; transition: .18s var(--ease); } .gruss-hero:hover .gruss-zu, .gruss-hero .gruss-zu:focus-visible { opacity: 1; } .gruss-hero .gruss-zu:hover { background: rgba(255, 255, 255, .2); color: #fff; } .gruss-hero .gruss-zu:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; } @media (max-width: 640px) { .gruss-hero { font-size: .95rem; } .gruss-hero .gruss-link { margin-left: 10px; } } @media (prefers-reduced-motion: reduce) { .gruss-hero { transition: none; transform: none; } } /* ═══════════ Sternenpunkte im Kundenkonto ═══════════ */ .punkte-karte { display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; background: linear-gradient(135deg, #14120e, #2a2419); color: #fff; border-radius: 16px; padding: 24px 26px; margin: 22px 0 0; } .pk-links { flex: 1 1 280px; min-width: 0; } .pk-kopf { display: flex; align-items: center; gap: 9px; } .pk-kopf svg { width: 21px; height: 21px; color: var(--gold); } .pk-kopf b { font-family: var(--body); font-size: 1rem; font-weight: 600; } .pk-stand { margin: 12px 0 0; font-size: .9rem; color: rgba(255,255,255,.68); } .pk-stand b { font-size: 2rem; font-weight: 700; color: #fff; letter-spacing: -.02em; margin-right: 7px; font-variant-numeric: tabular-nums; } .pk-balken { height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); margin: 12px 0 9px; overflow: hidden; } .pk-balken i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 3px; transition: width .5s var(--ease); } .pk-text { margin: 0; font-size: .87rem; color: rgba(255,255,255,.75); line-height: 1.55; } .pk-text.gut { color: #a8e6c0; } .pk-text.warn { color: #f0b8a4; } .pk-rechts { flex: 0 0 auto; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; } .pk-rechts .btn { padding: 13px 22px; } .pk-rechts .btn:disabled { opacity: .4; cursor: not-allowed; } .pk-klein { margin: 0; font-size: .78rem; color: rgba(255,255,255,.5); max-width: 26ch; line-height: 1.5; } .pk-codes { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; } .pk-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px dashed #ddd5c2; border-radius: 10px; padding: 12px 14px; background: #fdfcf9; } .pk-code b { font-family: var(--body); font-size: 1.02rem; letter-spacing: .06em; } .pk-code span { font-size: .82rem; color: var(--ink-3); flex: 1 1 auto; } .pk-kopieren { border: 1px solid #ddd5c2; background: #fff; border-radius: 8px; padding: 7px 13px; font: inherit; font-size: .8rem; color: var(--ink-2); cursor: pointer; } .pk-kopieren:hover { border-color: var(--gold); color: var(--ink); } @media (max-width: 620px) { .punkte-karte { padding: 20px 18px; gap: 18px; } .pk-rechts { flex: 1 1 100%; } .pk-rechts .btn { width: 100%; } .pk-klein { max-width: none; } } /* Kasse: Warenkorbzeilen wie im Shop */ .kasse-posten li { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; } .kasse-posten .kp-mg { display: flex; align-items: center; gap: 1px; border: 1px solid #e6e0d2; border-radius: 9px; background: #fdfcf9; padding: 2px; align-self: start; } .kasse-posten .kp-mg button { width: 27px; height: 27px; border: 0; background: transparent; border-radius: 7px; cursor: pointer; font: inherit; font-size: 15px; line-height: 1; color: var(--ink-2); display: grid; place-items: center; } .kasse-posten .kp-mg button:hover { background: #f0ebdf; color: var(--ink); } .kasse-posten .kp-mg button svg { width: 15px; height: 15px; } .kasse-posten .kp-mg .kp-weg-knopf { color: #b0724f; } .kasse-posten .kp-mg .kp-weg-knopf:hover { background: #fdf2ee; color: #a2431f; } .kasse-posten .kp-mg span { min-width: 17px; text-align: center; font-size: .86rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); } .kasse-posten .kp-pr { text-align: right; } .kasse-posten .kp-pr b { display: block; font-size: .93rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .kasse-posten .kp-pr span { display: block; font-size: .76rem; color: var(--ink-3); white-space: nowrap; margin-top: 1px; } /* Dank und Countdown nach der Bestellung */ .kfg-dank { margin: 8px auto 0; max-width: 44ch; font-size: .98rem; line-height: 1.65; color: var(--ink-2); } .countdown { margin: 26px auto 24px; max-width: 340px; background: #14120e; color: #fff; border-radius: 16px; padding: 20px 24px 18px; } .cd-label { display: block; font-size: .82rem; color: rgba(255,255,255,.62); } .cd-zeit { display: block; margin: 4px 0 2px; font-size: 2.2rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .cd-ziel { display: block; font-size: .84rem; color: rgba(255,255,255,.62); } .cd-balken { height: 5px; border-radius: 3px; background: rgba(255,255,255,.15); margin-top: 14px; overflow: hidden; } .cd-balken i { display: block; height: 100%; width: 0; background: var(--gold); border-radius: 3px; transition: width 1s linear; } /* Countdown: Hinweis, dass die Zeit grosszügig gerechnet ist */ .cd-hinweis { display: block; margin-top: 5px; font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.5); } /* Unsichtbare Sicherheitsprüfung — nimmt nur Platz ein, wenn sie eingerichtet ist */ /* Platz wird von Anfang an reserviert: Cloudflare setzt das Feld erst Sekunden nach dem Laden ein — vorher sprang die Karte um 65 px. „hidden" deckt den Fall „kein Schluessel hinterlegt" bereits ab. */ .turnstile { margin-top: 10px; } .turnstile:not([hidden]) { min-height: 65px; } /* ═══════════ Bestellseite auf dem Handy: saubere Ränder ═══════════ Die Bestellseite hat einen eigenen Seitenrand (--rand). Die Kategorienleiste darf als Streifen bis an den Bildschirmrand reichen, die Chips selbst müssen aber genau dort beginnen, wo auch die Produkte beginnen. Vorher zogen Leiste und Chipreihe je 20 px nach aussen — zusammen 40 px zu weit, darum war die erste Kategorie angeschnitten und die Alle-Taste ragte aus dem Bild. */ .shop-seite { --rand: clamp(14px, 2.2vw, 26px); } .shop-seite .shop-katzeile { margin-left: calc(var(--rand) * -1); margin-right: calc(var(--rand) * -1); padding-left: var(--rand); padding-right: var(--rand); } .shop-seite .shop-kats { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* ═══════════ Produktfenster: Fusszeile bricht selbst um ═══════════ Mengenwahl und Hinzufügen-Taste passten auf schmalen Geräten nicht nebeneinander — die Taste ragte aus dem Bild. Jetzt darf die Zeile umbrechen: reicht der Platz, stehen beide nebeneinander, sonst bekommt die Taste eine eigene Zeile über die volle Breite. */ #dlg footer { flex-wrap: wrap; row-gap: 10px; } .dlg-menge { flex: 0 0 auto; } #dlgAdd { flex: 1 1 190px; min-width: 0; } /* ═══════════ Abschnittskopf mit Eyebrow-Label ═══════════ Label, Titel und Vorspann gehören untereinander. Vorher standen sie als drei Spalten nebeneinander — auf dem Handy lief der Vorspann dadurch seitlich aus dem Bild und schob die ganze Seite auf. */ .sec-head.stapel { display: block; } .sec-head.stapel > .label { display: block; margin-bottom: 12px; } .sec-head.stapel > h2 { margin: 0; } /* ═══════════ Karte: nie breiter als der Bildschirm ═══════════ aspect-ratio zusammen mit min-height liess die Karte auf schmalen Geräten in die Breite wachsen (347 px auf einem 320-px-Schirm) und schob damit die ganze Seite zur Seite. */ .map-wrap { width: 100%; max-width: 100%; box-sizing: border-box; } @media (max-width: 700px) { .map-wrap { aspect-ratio: 3 / 3.4; min-height: 0; } } /* ═══════════ Warenkorb-Schublade (Handy/Tablet) ═══════════ Als Schublade wird die Höhe von oben/unten bestimmt. Die Höhenformel der Spaltenansicht (100vh minus Kopfleiste) liess unten sonst einen leeren Streifen stehen. */ @media (max-width: 1150px) { .shop-korb { height: auto; } } /* ═══════════ Liefern/Abholen auf schmalen Geräten ═══════════ Symbol, Bezeichnung und Dauer passten nicht in eine Zeile — die Dauer wurde am Rand abgeschnitten. Sie rückt jetzt darunter. */ @media (max-width: 430px) { .korb-art .art-wahl button { flex-wrap: wrap; gap: 0 6px; padding: 7px 4px; line-height: 1.3; } .korb-art .art-wahl button b { font-size: .82rem; } .korb-art .art-wahl button i { flex: 1 0 100%; text-align: center; font-size: .71rem; } .korb-art .art-wahl button i::before { content: none; } } /* Solange das Produktfenster offen ist, tritt die schwebende Warenkorbleiste zurück. */ body.dlg-auf .korb-float { opacity: 0; pointer-events: none; } /* ═══════════ Bestellseite: kein Knopf über dem Warenkorbbalken ═══════════ Der Nach-oben-Knopf sass auf der schwebenden Warenkorbleiste. Auf der Bestellseite führt ohnehin die Kategorienleiste durch die Karte — dort tritt er zurück, sobald die Leiste sichtbar ist. */ @media (max-width: 1150px) { .shop-seite #toTop { display: none; } } /* ═══════════ Reservationen im Kundenkonto ═══════════ */ .rsv-liste { display: grid; gap: 12px; margin-bottom: 8px; } .rsv-karte { background: #fff; border: 1px solid #ece7db; border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 7px; } .rsv-karte.ab { background: #fbf9f5; border-style: dashed; } .rsv-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .rsv-tag { font-size: 1.05rem; font-weight: 700; display: block; } .rsv-uhr { font-size: .9rem; color: var(--ink-2); } .rsv-marke { flex: 0 0 auto; font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; } .rsv-marke.auf { background: #eef7ef; color: #2e7d32; } .rsv-marke.ab { background: #fbeeea; color: #a2431f; } .rsv-marke.vorbei { background: #f2efe7; color: var(--ink-3); } .rsv-zeile { margin: 0; font-size: .93rem; color: var(--ink-2); } .rsv-notiz { margin: 0; font-size: .87rem; color: var(--ink-3); font-style: italic; } .rsv-knopf { align-self: flex-start; margin-top: 6px; padding: 9px 16px; font-size: .84rem; } .rsv-frueher { margin-top: 4px; } .rsv-frueher > summary { cursor: pointer; font-size: .88rem; color: var(--ink-2); padding: 10px 2px; list-style: none; display: flex; align-items: center; gap: 8px; } .rsv-frueher > summary::-webkit-details-marker { display: none; } .rsv-frueher > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .18s var(--ease); } .rsv-frueher[open] > summary::before { transform: rotate(45deg); } .rsv-frueher > summary:hover { color: var(--ink); } .rsv-frueher .rsv-karte { margin-top: 10px; } @media (max-width: 480px) { .rsv-karte { padding: 15px 16px; } .rsv-knopf { align-self: stretch; text-align: center; } } /* Hinweis unter einem Formularfeld */ .feld-hinweis { margin: 7px 0 0; font-size: .84rem; line-height: 1.5; color: #a2431f; } /* Hinweis auf den Punkteverfall */ .pk-verfall { margin: 8px 0 0; font-size: .84rem; line-height: 1.5; color: rgba(255, 255, 255, .72); } /* Automatische Aktion in der Summenliste */ .korb-summen .zeile.aktion span, .korb-summen .zeile.aktion b, .kasse-summen .zeile.aktion span, .kasse-summen .zeile.aktion b { color: #2e7d32; } /* ═══════════ Beliebte Artikel als Karussell ═══════════ Eine Scrollspur wie bei den grossen Bestellportalen: auf dem Handy wischt man, am Rechner blättern die Pfeile. */ .kar-kopf { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; } .kar-kopf h2 { margin: 0; } .kar-pfeile { display: flex; gap: 6px; flex: 0 0 auto; } .kar-pfeil { width: 32px; height: 32px; padding: 6px; cursor: pointer; border: 1px solid #e2dccd; background: #fff; border-radius: 50%; color: var(--ink-2); display: grid; place-items: center; transition: .16s var(--ease); } .kar-pfeil svg { width: 100%; height: 100%; } .kar-pfeil:hover:not(:disabled) { border-color: var(--gold); color: var(--ink); } .kar-pfeil:disabled { opacity: .3; cursor: default; } .shop-karussell { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; margin-left: calc(var(--rand, 20px) * -1); margin-right: calc(var(--rand, 20px) * -1); padding-left: var(--rand, 20px); padding-right: var(--rand, 20px); } .shop-karussell::-webkit-scrollbar { display: none; } .shop-karussell .sa { scroll-snap-align: start; min-height: 100%; } @media (min-width: 720px) { .shop-karussell { grid-auto-columns: minmax(248px, 1fr); } } @media (max-width: 719px) { .kar-pfeile { display: none; } /* Die Kartenbreite steht im Feinschliff am Dateiende: minmax(212px, 78%) lieferte bei Ueberlauf immer nur die 212 px, die 78 % zaehlten nie. */ } /* ═══════════ Sternenpunkte auf der Dankeseite ═══════════ */ .fp-karte { margin: 22px auto 0; max-width: 420px; text-align: left; background: #14120e; color: #fff; border-radius: 14px; padding: 20px 22px; } .fp-kopf { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; } .fp-kopf b { font-size: .95rem; font-weight: 650; letter-spacing: .02em; } .fp-stern { color: var(--gold-lt); flex: 0 0 auto; } .fp-dazu { margin-left: auto; font-size: 1.05rem; font-weight: 700; color: var(--gold-lt); font-variant-numeric: tabular-nums; } .fp-stand { margin: 0 0 9px; font-size: .92rem; color: rgba(255,255,255,.82); } .fp-stand b { font-size: 1.35rem; font-weight: 700; color: #fff; } .fp-balken { height: 6px; border-radius: 4px; background: rgba(255,255,255,.16); overflow: hidden; margin-bottom: 10px; } .fp-balken i { display: block; height: 100%; background: var(--gold-lt); transition: width .6s var(--ease); } .fp-text { margin: 0; font-size: .87rem; line-height: 1.55; color: rgba(255,255,255,.72); } .fp-neu { margin: 10px 0 0; font-size: .85rem; line-height: 1.55; color: rgba(255,255,255,.72); } .fp-knopf { margin-top: 15px; display: inline-block; border-color: rgba(255,255,255,.35); color: #fff; padding: 10px 18px; font-size: .82rem; } .fp-knopf:hover { border-color: var(--gold-lt); color: var(--gold-lt); } /* Aufklappbare Hilfe im Anmeldekasten */ .konto-hilfe { margin-top: 18px; border-top: 1px solid #ece7db; padding-top: 14px; } .konto-hilfe > summary { cursor: pointer; font-size: .89rem; font-weight: 600; color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: 8px; padding: 4px 0; } .konto-hilfe > summary::-webkit-details-marker { display: none; } .konto-hilfe > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(-45deg); transition: transform .18s var(--ease); flex: 0 0 auto; } .konto-hilfe[open] > summary::before { transform: rotate(45deg); } .konto-hilfe > summary:hover { color: var(--ink); } .konto-hilfe p { margin: 10px 0 0; font-size: .87rem; line-height: 1.65; color: var(--ink-3); } /* ═══════════ Rückmeldung beim Hinzufügen ═══════════ Auf dem Handy fliegt der Name in den Warenkorb, die Zahl im Balken springt kurz mit. Beides folgt prefers-reduced-motion. */ .korb-flug-schild { width: auto; height: auto; margin: 0; border-radius: 999px; transform-origin: center; max-width: min(62vw, 260px); padding: 9px 15px; background: var(--ink); color: #fff; font: 600 13px/1.25 var(--sans, system-ui, sans-serif); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 8px 22px rgba(20, 18, 14, .34); left: 0; top: 0; margin-left: 0; translate: -50% -50%; } .korb-float .kz.springt { animation: kzSprung .46s var(--ease); } @keyframes kzSprung { 0% { transform: scale(1); } 35% { transform: scale(1.42); } 60% { transform: scale(.92); } 100% { transform: scale(1); } } /* Der Balken kommt federnd herein, statt einfach aufzutauchen */ .korb-float { transition: transform .34s cubic-bezier(.2,.9,.3,1.2), opacity .25s var(--ease); } @media (prefers-reduced-motion: reduce) { .korb-float .kz.springt { animation: none; } .korb-float { transition: opacity .2s linear; } } /* ═══════════ Lieferung verfolgen ═══════════ */ /* Der Kopf wird schon von body.shop-seite ausgeglichen — hier nur noch der eigene Abstand, sonst klafft oben eine leere Flaeche. */ .verfolgen { padding-top: 30px; padding-bottom: 70px; max-width: 660px; } .verfolgen h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15; letter-spacing: -.02em; margin: 0; } .vf-karte { background: #fff; border: 1px solid #ece7db; border-radius: 18px; padding: 26px 24px 22px; margin: 24px 0 20px; } .vf-stufen { display: flex; gap: 4px; margin-bottom: 26px; } .vf-stufe { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; font-size: .7rem; color: var(--ink-3); text-align: center; } .vf-stufe::before { content: ""; position: absolute; top: 6px; left: -50%; width: 100%; height: 2px; background: #ece7db; } .vf-stufe:first-child::before { display: none; } .vf-stufe.fertig::before, .vf-stufe.jetzt::before { background: var(--gold); } .vf-stufe i { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #ddd5c2; position: relative; z-index: 1; } .vf-stufe.fertig i { background: var(--gold); border-color: var(--gold); } .vf-stufe.jetzt i { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(191,155,74,.2); } .vf-stufe.fertig, .vf-stufe.jetzt { color: var(--ink); } .vf-stufe.jetzt b { font-weight: 700; } .vf-stufe b { font-weight: 500; } .vf-mitte { text-align: center; padding: 10px 0 18px; } .vf-zahl { display: block; font-size: clamp(2.4rem, 9vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; } .vf-text { display: block; font-size: .92rem; color: var(--ink-3); margin-top: 4px; } .vf-balken { height: 6px; border-radius: 20px; background: #f1ece1; overflow: hidden; } .vf-balken i { display: block; height: 100%; background: var(--gold); width: 8%; transition: width .6s var(--ease); } .vf-notiz { margin: 14px 0 0; font-size: .86rem; color: var(--ink-3); line-height: 1.6; text-align: center; } .vf-daten { max-width: none; } .konto-dl { display: grid; gap: 2px; margin: 0; } .konto-dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid #f4f0e6; } .konto-dl > div:last-child { border-bottom: 0; } .konto-dl dt { color: var(--ink-3); font-size: .88rem; margin: 0; } .konto-dl dd { margin: 0; font-weight: 500; text-align: right; } /* Karte mit der Fahrstrecke. Bewusst nicht bildschirmfuellend: Der Stand und das Zeitfenster darunter sind das, was der Gast wirklich braucht. */ .vf-map { margin: 22px 0 0; border-radius: 18px; overflow: hidden; border: 1px solid #ece7db; background: #eee9dd; position: relative; } .vf-map { height: 300px; } .vf-map > div { height: 100%; } .vf-map .leaflet-container { height: 100%; font: inherit; background: #eee9dd; } @media (max-width: 480px) { .vf-map { height: 240px; } } .vf-pin-ziel { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 5px solid var(--gold); box-shadow: 0 2px 7px rgba(0,0,0,.3); } .vf-pin-kurier { width: 38px; height: 38px; border-radius: 50%; background: #14120e; color: #fff; display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 3px 12px rgba(0,0,0,.4); } .vf-pin-kurier svg { width: 21px; height: 21px; } /* Meldungen einschalten — bewusst ein grosses, ruhiges Feld statt eines Schalters: Der Gast soll auf einen Blick sehen, ob es an ist. */ .vf-push { margin: 0 0 20px; } .vf-push-knopf { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; background: #fff; border: 1px solid #ece7db; border-radius: 16px; padding: 16px 18px; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s var(--ease), background .2s var(--ease); -webkit-tap-highlight-color: transparent; } .vf-push-knopf:hover { border-color: #ddd5c2; } .vf-push-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .vf-push-knopf > svg { width: 24px; height: 24px; flex: 0 0 24px; color: var(--ink-3); } .vf-push-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; } .vf-push-text b { font-size: .95rem; font-weight: 600; line-height: 1.3; } .vf-push-text i { font-style: normal; font-size: .82rem; color: var(--ink-3); line-height: 1.4; } .vf-push-haken { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #e4ddcd; display: grid; place-items: center; color: transparent; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } .vf-push-haken svg { width: 14px; height: 14px; } .vf-push-knopf.an { border-color: var(--gold); background: #fdfaf3; } .vf-push-knopf.an > svg { color: var(--gold); } .vf-push-knopf.an .vf-push-haken { background: var(--gold); border-color: var(--gold); color: #fff; } .vf-push-hilfe { margin: 10px 2px 0; font-size: .84rem; color: var(--ink-3); line-height: 1.6; } @media (max-width: 480px) { .vf-push-knopf { padding: 14px 15px; gap: 12px; } .vf-push-text b { font-size: .9rem; } } @media (prefers-reduced-motion: reduce) { .vf-push-knopf, .vf-push-haken { transition: none; } } body.blind .vf-karte { opacity: .55; } body.blind .vf-notiz::after { content: " Verbindung unterbrochen."; color: #a2431f; } @media (max-width: 480px) { .vf-karte { padding: 20px 16px 18px; } .vf-stufe { font-size: .62rem; } } @media (prefers-reduced-motion: reduce) { .vf-balken i { transition: none; } } /* ═══════════ Laufende Lieferung im Kundenkonto ═══════════ */ .live-band { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: #14120e; color: #fff; border-radius: 16px; padding: 18px 22px; margin: 0 0 22px; } .lb-links { display: flex; align-items: center; gap: 14px; min-width: 0; } .lb-links b { display: block; font-size: 1.02rem; } .lb-links span { display: block; font-size: .88rem; color: rgba(255,255,255,.72); line-height: 1.5; } .lb-punkt { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.4); flex: 0 0 auto; } .lb-punkt.an { background: var(--gold-lt); animation: lbPuls 1.8s ease-in-out infinite; } @keyframes lbPuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(224,197,130,.55); } 50% { box-shadow: 0 0 0 8px rgba(224,197,130,0); } } .lb-rechts { display: flex; align-items: center; gap: 16px; margin-left: auto; } .lb-zahl { font-size: 1.12rem; font-weight: 700; white-space: nowrap; } .lb-mehr { font-size: .82rem; letter-spacing: .04em; color: var(--gold-lt); border: 1px solid rgba(224,197,130,.45); border-radius: 999px; padding: 9px 16px; text-decoration: none; white-space: nowrap; transition: .16s var(--ease); } .lb-mehr:hover { background: rgba(224,197,130,.15); color: #fff; } @media (max-width: 560px) { .live-band { padding: 16px 18px; } .lb-rechts { margin-left: 0; width: 100%; justify-content: space-between; } } @media (prefers-reduced-motion: reduce) { .lb-punkt.an { animation: none; } } /* ═══════════ App aufs Handy ═══════════ Ein ruhiger Kasten statt eines aufdringlichen Banners, und fuer das iPhone ein Blatt von unten, das den Weg zeigt statt ihn zu erklaeren. Alle Farben stehen hier fest, damit der Block in jede Stilvorlage passt, ohne deren Variablen zu kennen. */ /* Ohne diese Zeile bleibt der Kasten sichtbar, auch wenn er versteckt werden soll: 'display: grid' oben ist eine eigene Regel und schlaegt das eingebaute Verhalten des hidden-Attributs. Genau daran scheiterte sowohl das X als auch das automatische Ausblenden in der App. */ .app-install[hidden] { display: none !important; } .app-install { position: relative; background: #fff; border: 1px solid #e6e1d5; border-radius: 16px; padding: 20px 18px 18px; margin: 0 0 16px; display: grid; grid-template-columns: 46px 1fr; gap: 14px 13px; align-items: start; } .ai-bild { grid-row: 1; width: 46px; height: 46px; border-radius: 11px; display: block; } .ai-text { grid-row: 1; display: flex; flex-direction: column; gap: 4px; padding-right: 26px; } .ai-text b { font-size: .96rem; font-weight: 700; line-height: 1.3; color: #1a1814; } .ai-text span { font-size: .84rem; line-height: 1.55; color: #6d675b; } .ai-knopf { grid-column: 1 / -1; } .ai-knopf svg { width: 19px; height: 19px; } .ai-zu { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #8b8478; cursor: pointer; padding: 0; } .ai-zu:hover { background: #f2efe7; } .ai-zu svg { width: 15px; height: 15px; } /* ── Das Blatt fuer das iPhone ── */ .app-blatt { position: fixed; inset: 0; z-index: 9000; } .ab-schatten { position: absolute; inset: 0; background: rgba(12, 10, 8, .55); opacity: 0; transition: opacity .22s ease; } .app-blatt.da .ab-schatten { opacity: 1; } .ab-blatt { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; color: #1a1814; border-radius: 20px 20px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); max-height: 88vh; overflow: auto; transform: translateY(101%); transition: transform .28s cubic-bezier(.22,.9,.3,1); box-shadow: 0 -10px 40px rgba(0,0,0,.28); } .app-blatt.da .ab-blatt { transform: translateY(0); } @media (min-width: 620px) { .ab-blatt { left: 50%; right: auto; width: 460px; transform: translate(-50%, 101%); } .app-blatt.da .ab-blatt { transform: translate(-50%, 0); } } .ab-zu { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f2efe7; color: #4d483f; cursor: pointer; padding: 0; } .ab-zu svg { width: 16px; height: 16px; } .ab-kopf { display: flex; align-items: center; gap: 14px; padding-right: 42px; margin-bottom: 20px; } .ab-symbol { width: 54px; height: 54px; border-radius: 13px; flex: 0 0 54px; display: block; } .ab-kopf b { display: block; font-size: 1.06rem; font-weight: 700; line-height: 1.3; } .ab-kopf span { display: block; font-size: .85rem; color: #6d675b; line-height: 1.5; margin-top: 3px; } .ab-hinweis { margin: 0 0 16px; padding: 12px 14px; border-radius: 11px; background: #fdf4e6; color: #8a6d1f; font-size: .86rem; line-height: 1.55; } .ab-schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; } .ab-schritte li { display: flex; align-items: flex-start; gap: 12px; } .ab-zahl { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #14120e; color: #fff; display: grid; place-items: center; font-size: .8rem; font-weight: 700; margin-top: 1px; } .ab-text { font-size: .93rem; line-height: 1.6; color: #2c2822; } .ab-text b { font-weight: 700; } /* Das Teilen-Zeichen so, wie es in Safari aussieht — blau auf hellem Feld. */ .ab-zeichen { display: inline-grid; place-items: center; vertical-align: -7px; width: 30px; height: 30px; margin-left: 3px; border-radius: 8px; background: #eaf2fd; color: #1a7ae6; } .ab-zeichen svg { width: 19px; height: 19px; } /* Der Menueintrag, den man sucht — als kleine Nachbildung der Liste. */ .ab-eintrag { display: inline-flex; align-items: center; gap: 10px; margin-top: 7px; padding: 9px 12px; border-radius: 10px; background: #f4f2ec; font-size: .9rem; font-weight: 600; color: #1a1814; } .ab-eintrag svg { width: 21px; height: 21px; color: #4d483f; } .ab-pfeil { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 20px 0 2px; color: #96762c; font-size: .8rem; font-weight: 600; } .ab-pfeil svg { width: 26px; height: 26px; animation: abWink 1.5s ease-in-out infinite; } .ab-pfeil.hoch { flex-direction: column-reverse; } @keyframes abWink { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(5px); opacity: 1; } } .ab-pfeil.hoch svg { animation-name: abWinkHoch; } @keyframes abWinkHoch { 0%, 100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(-5px); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ab-blatt, .ab-schatten { transition: none; } .ab-pfeil svg { animation: none; } } /* Hinweis des Betriebs oben im Shop — z. B. „Heute nur Abholung". */ .shop-meldung { margin: 12px 0 0; padding: 12px 16px; border-radius: 12px; background: #fdf4e6; color: #8a6d1f; border: 1px solid #f0e0bd; font-size: .92rem; line-height: 1.55; font-weight: 500; } .korb-warnung { margin: 0 0 12px; padding: 12px 14px; border-radius: 11px; background: #fbeae4; color: #a2431f; font-size: .9rem; line-height: 1.55; } .korb-warnung a { color: #a2431f; font-weight: 700; } .art-wahl button.aus { opacity: .42; cursor: not-allowed; } /* ═══════════ Live-Track auf der Bestätigungsseite ═══════════ Bei einer Lieferung ist das die erste Frage nach dem Bestellen. Der Kasten steht deshalb ganz oben — heller als die Punktekarte, damit klar ist, dass hier etwas zu tun ist, und nicht nur etwas zu lesen. */ .kfg-track { margin: 22px auto 0; max-width: 420px; text-align: left; background: #fff; border: 1px solid var(--linie, #e5dfd1); border-radius: 14px; padding: 20px 22px; box-shadow: 0 2px 14px rgba(20, 18, 14, .05); } .kt-kopf { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .kt-kopf svg { width: 21px; height: 21px; color: var(--gold, #bf9b4a); flex: 0 0 auto; } .kt-kopf b { font-size: .98rem; font-weight: 650; letter-spacing: .01em; } .kt-text { margin: 0 0 16px; font-size: .92rem; line-height: 1.6; color: #4d483f; } .kt-knopf { display: block; width: 100%; text-align: center; } /* Der Link im Klartext. Er darf umbrechen — eine Zeile, die seitlich hinausläuft, kann man weder lesen noch markieren. */ .kt-url { margin: 14px 0 10px; font-size: .82rem; line-height: 1.6; color: #837c6e; } .kt-url a { display: inline-block; margin-top: 3px; color: #4d483f; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .78rem; word-break: break-all; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 2px; } .kt-kopie { display: block; width: 100%; text-align: center; font-size: .86rem; } .kt-hinweis { margin: 12px 0 0; font-size: .8rem; line-height: 1.6; color: #837c6e; } /* ════════════════════════════════════════════════════════════════════ FEINSCHLIFF BESTELLSEITE UND KASSE Dieser Abschnitt steht bewusst am Dateiende: in style.css gibt es mehrere Bloecke mit denselben Selektoren (760 px kommt viermal vor). Die spaetere Regel gewinnt — das ist hier das Ordnungsprinzip, statt die Spezifitaet immer weiter hochzuschrauben. ════════════════════════════════════════════════════════════════════ */ /* ───────── Typografie: klare Stufen statt sechs fast gleicher Groessen ───────── fonts.css laedt Inter nur in 300/400/500/600. Jedes font-weight:700 im Shop wurde also ohnehin als 600 gezeichnet — 600 und 700 sahen identisch aus und die Hierarchie fiel zusammen. Die Kategorientitel tragen jetzt wie auf der gedruckten Speisekarte die Serife, die Zwischentitel bleiben Inter 600. */ .shop-kat h2 { font-family: var(--display); font-weight: 400; font-size: 1.45rem; letter-spacing: -.01em; margin-bottom: 14px; } .shop-kat .kar-kopf h2 { margin-bottom: 0; } .sa-txt h3 { font-size: 1.0625rem; line-height: 1.3; font-weight: 600; } .shop-korb header b, #dlg header b, .dlg-kopf-txt b, .kf h2, .kk-innen h2, .kat-feld-kopf b, .fp-kopf b, .kt-kopf b { font-weight: 600; } .dlg-kopf-txt b { font-size: 1.2rem; } .korb-summen .total b, .kk-total { font-weight: 600; font-size: 1.2rem; } .cd-zeit { font-weight: 600; } .shop-h1 { font-weight: 600; } /* Preise und Zeiten immer mit gleich breiten Ziffern — sonst wandern die Betraege beim Aendern der Menge seitlich hin und her. */ .sa-preis, .kp-pr b, .kp-pr span, .kk-pr, .kk-total, .korb-float .ks, .korb-summen .zeile, .tk-fuss b, .dz-p { font-variant-numeric: tabular-nums; } /* Nichts wird abgeschnitten, nichts sprengt seine Spalte. */ .sa-txt h3, .sa-txt p, .kp-txt b, .kk-txt b, .z-txt b, .tk-name { overflow-wrap: anywhere; } /* ───────── Beruehrung: kein klebender Hover, dafuer eine echte Antwort ───────── Auf Touchgeraeten bleibt :hover nach dem Tippen haengen: die angetippte Karte stand danach dauerhaft „angehoben", zwei Kategorien wirkten markiert. Hier wird der Hover fuer Geraete ohne Zeiger auf den Ruhezustand zurueckgesetzt — die Regeln oben bleiben unveraendert stehen. */ @media (hover: none) { .sa:hover { border-color: var(--linie); box-shadow: none; transform: none; } .sa:hover .sa-plus { background: var(--gold-lt); color: var(--ink); } .shop-kats .kat:not(.on):hover { border-color: #e2dccd; color: var(--ink-2); } .gr:hover { border-color: var(--linie-stark); background: #fff; } .opt:not(.an):hover { border-color: #e6e0d2; background: transparent; } .dazu:not(.an):hover { border-color: #e6e0d2; background: #fdfcf9; } .zahl:not(.on):hover { border-color: #e2dccd; } .ka:not(.on):hover { border-color: var(--linie-stark); } .tipp:hover { border-color: #e6e0d2; background: #fff; } .tipp-karte:hover { border-color: #e6e0d2; background: #fdfcf9; box-shadow: none; } .tipp-karte:hover .tk-plus { background: var(--gold-lt); color: var(--ink); } .kat-pfeil:hover:not(:disabled), .kar-pfeil:hover:not(:disabled) { border-color: #e2dccd; color: var(--ink-2); } .kat-alle:not(.auf):hover { border-color: #e2dccd; color: var(--ink-2); } .orten:hover, .dg-mehr:hover { border-color: var(--linie-stark); color: var(--ink-2); } .kp-mg button:hover, .kasse-posten .kp-mg button:hover { background: transparent; color: var(--ink-2); } .kp-mg .kp-weg-knopf:hover, .kasse-posten .kp-mg .kp-weg-knopf:hover { background: transparent; color: #b0724f; } .kf-eintrag:hover { background: none; } .shop-korb header button:hover, .kat-feld-kopf button:hover { background: transparent; color: var(--ink-3); } .dlg-menge button:hover:not(:disabled) { border-color: var(--linie-stark); color: var(--ink-2); } .sk-zurueck:hover, .sk-konto:hover, .sk-tel:hover { background: transparent; color: var(--ink-2); } .shop-seite .btn-gold:not(:disabled):hover { color: var(--ink); border-color: var(--gold-lt); background-size: 100% 0%; } } /* Kein Doppeltipp-Zoom auf Bedienelementen (zweimal schnell „+" tippen zoomte die Seite, statt zweimal zu zaehlen) und kein grauer Tipp-Blitz auf Android — die Antwort geben stattdessen die :active-Zustaende darunter. */ .shop-seite button, .shop-seite [role="button"], .shop-seite a.btn, .shop-seite .sa, .shop-seite .opt, .shop-seite .dazu, .shop-seite .zahl, .shop-seite .ka, .shop-seite .kat, .shop-seite .gr, .shop-seite .tipp-karte, .sk-zurueck, .sk-konto, .sk-tel { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Jede Beruehrung antwortet sofort: unter 100 ms, nur transform und Flaechenwechsel — damit nichts umbricht und nichts nachrechnet. */ .sa:active { transform: scale(.985); transition-duration: .08s; } .sa-plus:active, .tk-plus:active, .gr .plus:active { transform: scale(.9); } .shop-kats .kat:active, .kat-alle:active, .orten:active, .ka:active, .tipp:active, .tipp-karte:active, .dg-mehr:active, .kar-pfeil:active, .kat-pfeil:active, .kf-eintrag:active, .gr:active { transform: scale(.96); transition-duration: .08s; } .opt:active, .dazu:active, .zahl:not(.gesperrt):active { background: #f7f2e6; transition-duration: .08s; } .shop-seite .btn:not(:disabled):active, .kp-mg button:active, .kasse-posten .kp-mg button:active, .dlg-menge button:not(:disabled):active, .shop-korb header button:active, .kat-feld-kopf button:active, .shop-suche button:active { transform: translateY(1px) scale(.985); transition-duration: .08s; } /* Die schwebende Leiste sitzt tiefer als der Rest — sie darf nur sinken, nicht schrumpfen, sonst kaempft der Effekt mit .puls beim Hinzufuegen. */ .korb-float:active { transform: translateY(1px); transition-duration: .08s; } .korb-float.leer:active { transform: translateY(140%); } @media (prefers-reduced-motion: reduce) { .sa:active, .sa-plus:active, .tk-plus:active, .shop-kats .kat:active, .kat-alle:active, .orten:active, .ka:active, .tipp-karte:active, .korb-float:active, .shop-seite .btn:not(:disabled):active { transform: none; } } /* ───────── Ein einheitlicher Fokusring fuer die Tastatur ───────── Die Felder hatten nur einen 1-px-Rand plus 16 % Gold als Schein — auf Weiss praktisch unsichtbar. :focus-visible greift nur bei Tastaturbedienung. */ .shop-seite :is(button, [role="button"], a.btn, .kat, .ka, .hw-knopf, .kf-eintrag, .sa):focus-visible, .shop-seite :is(input, select, textarea):focus-visible, .sk-zurueck:focus-visible, .sk-konto:focus-visible, .sk-tel:focus-visible, .korb-plz-zeile #plzFeld:focus-visible, #dlgNotiz:focus-visible, .shop-suche input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; box-shadow: none; } /* In der Chipleiste liegt der Ring innen — aussen wuerde ihn der eigene Scrollbehaelter abschneiden. */ .shop-kats .kat:focus-visible { outline-offset: -2px; } /* ───────── Eingabefelder: iOS Safari darf nicht hineinzoomen ───────── Unter 16 px Schriftgroesse vergroessert iOS beim Fokus die ganze Seite und stellt sie danach nicht zurueck — Kopf und Kategorienleiste haengen dann am Rand fest. Die Werte werden nur auf dem Handy angehoben, damit die Felder am Rechner ihre feine Groesse behalten. */ @media (max-width: 760px) { .shop-suche input, .korb-plz-zeile #plzFeld, #dlgNotiz, .korb-zeit select, .feld input, .feld select, .feld textarea { font-size: 16px; } } /* iOS zeichnet fuer type=search sonst ein eigenes, flaches Feld. */ .shop-suche input { -webkit-appearance: none; appearance: none; padding-right: 46px; } .shop-suche input::-webkit-search-decoration { -webkit-appearance: none; } /* Suchzeile: Suchfeld, Postleitzahl und Standortknopf standen 5 px versetzt und waren unterschiedlich hoch — .korb-plz trug noch den oberen Abstand aus seiner alten Position im Warenkorb. */ .shop-suchfeld .korb-plz { padding-top: 0; } .shop-suche input, .shop-suchfeld .korb-plz-zeile #plzFeld, .shop-suchfeld .korb-plz-zeile .orten { min-height: 46px; padding-block: 0; } /* Die Postleitzahl wird zur Pille wie der Standortknopf daneben. */ .korb-plz-zeile #plzFeld { border-radius: 999px; } /* Leeren-Kreuz im Suchfeld: 24 px waren zu klein, ein Fehltipp traf die Karte. */ .shop-suche button { width: 36px; height: 36px; right: 5px; font-size: 17px; } /* Die Antwort auf die eingegebene Postleitzahl steht unter der Suchzeile — auf voller Breite, damit sie nicht zwischen die Felder geklemmt wird. */ .shop-suchfeld .plz-info, .shop-suchfeld .plz-info.plz-meldung { flex: 1 1 100%; margin: 0; font-size: .84rem; line-height: 1.45; color: var(--ink-2); } .shop-suchfeld .plz-info:empty { display: none; } .shop-suchfeld .plz-info .rot, .shop-suchfeld .plz-info.warn { color: #a2431f; } /* ───────── Gesperrte Hauptknoepfe bleiben lesbar ───────── „Bitte auswaehlen" und „Weiter zur Bestellung" lagen mit opacity .4 als Gold auf Weiss bei etwa 2:1 — ausgerechnet der Satz, der erklaert, warum es nicht weitergeht, war kaum zu entziffern. Jetzt: ruhige beige Flaeche, dunkler Text, klar als „aus" erkennbar. */ #zurKasse:disabled, #dlgAdd:disabled, #kasseSenden:disabled, #zurKasse:disabled:hover, #dlgAdd:disabled:hover, #kasseSenden:disabled:hover { opacity: 1; cursor: not-allowed; background-color: var(--paper-2); background-image: none; border-color: var(--linie-stark); color: var(--ink-2); } /* ───────── Kontrast an den kleinen Stellen ───────── */ /* Gold auf Weiss ergibt bei 12.5 px nur 4.3:1 — als Unterstrich bleibt der Link erkennbar, ohne die Lesbarkeit zu opfern. */ .korb-fuss a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; } .dg-tag { color: var(--ink-2); } .dg-tag.pflicht { color: #7a5f1e; } #dlgNotiz::placeholder { color: var(--ink-3); } /* ───────── Was unsichtbar ist, ist auch wirklich weg ───────── Blatt, leere Warenkorbleiste und geschlossene Schublade waren bisher nur durchsichtig: ihre Knoepfe standen weiter im Tab-Weg und im Vorlesetext, und die ausgelagerte Schublade malte ihren Schlagschatten als grauen Streifen ueber den rechten Bildschirmrand. visibility schaltet erst nach der Bewegung um, damit das Ausblenden sichtbar bleibt. */ #dlg { visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s; } body.dlg-auf #dlg { visibility: visible; transition-delay: 0s; } .korb-float { visibility: visible; } .korb-float.leer { visibility: hidden; transition: transform .34s cubic-bezier(.2,.9,.3,1.2), opacity .25s var(--ease), visibility 0s linear .34s; } @media (max-width: 1150px) { .shop-korb { visibility: hidden; box-shadow: none; transition: transform .38s cubic-bezier(.32,.72,0,1), visibility 0s linear .38s; } body.korb-auf .shop-korb { transform: none; visibility: visible; box-shadow: -14px 0 40px rgba(20,18,14,.22); transition-delay: 0s; } /* Der Kopf mit dem Schliess-Kreuz bleibt stehen. Vorher scrollte er ab etwa sechs Posten weg — schliessen ging dann nur nach Zurueckscrollen. */ .shop-korb header { position: sticky; top: 0; z-index: 2; background: #fff; } } /* ───────── Produktfenster als Blatt: Griff, Tiefe, weichere Kurve ───────── */ #dlg footer { border-radius: 0; box-shadow: 0 -12px 20px -16px rgba(60,45,20,.35); } @media (max-width: 560px) { /* Ein Blatt kommt anders herein als ein Fenster: laenger und weicher, schneller wieder hinaus. */ #dlg { transition: transform .32s cubic-bezier(.32,.72,0,1), opacity .2s var(--ease), visibility 0s linear .32s; } body:not(.dlg-auf) #dlg { transition-duration: .22s, .15s, 0s; } /* Griffleiste wie bei nativen Blaettern */ #dlg header { position: relative; padding-top: 26px; } #dlg header::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #ddd5c2; } /* Die Beschreibung stand dem Gast schon auf der Karte — im Blatt darf sie nicht ein Viertel der Hoehe fuellen und die Pflichtwahl wegdruecken. */ .dlg-kopf-txt span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #dlg footer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } } /* ───────── Schwebende Warenkorbleiste: Handy, Tablet, Fusszeile ───────── */ @media (min-width: 600px) and (max-width: 1150px) { /* Auf Tablets war die Leiste ein 760 bis 990 px breiter schwarzer Balken mit drei kleinen Elementen darin — kompakt und zentriert wirkt sie ruhiger und der Daumen erreicht beides. */ .korb-float { left: 0; right: 0; width: min(520px, calc(100% - 28px)); margin-inline: auto; } } @media (max-width: 360px) { /* Bei 320 px brach die Leiste in zwei Zeilen um und wurde 79 px hoch. */ .korb-float { padding: 12px 14px; gap: 10px; font-size: 14px; } .korb-float .kt, .korb-float .ks { white-space: nowrap; } } @media (max-width: 1150px) { /* Platz fuer die schwebende Leiste, sonst liegt sie auf den Fusszeilen- Links „Impressum & Datenschutz". */ body.shop-seite footer { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } /* Kopf und Schublade halten Abstand zur Kamerainsel, sobald die Seite als App laeuft (wirkt erst mit viewport-fit=cover im HTML). */ .shop-kopf { padding-top: env(safe-area-inset-top, 0px); height: calc(58px + env(safe-area-inset-top, 0px)); } .shop-korb { padding-top: env(safe-area-inset-top, 0px); } /* Meldungen duerfen nicht auf dem Bestellbalken liegen. */ body.shop-seite .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 700px) { .shop-kopf { height: calc(52px + env(safe-area-inset-top, 0px)); } } /* Bei offenem Blatt oder offener Schublade tritt der Balken zurueck — dann darf die Meldung wieder tief stehen. */ body.shop-seite.dlg-auf .toast, body.shop-seite.korb-auf .toast { bottom: 30px; } /* Auf der Bestellseite fuehrt die klebende Kategorienleiste durch die Karte; der Nach-oben-Knopf lag dafuer am Rechner auf der unteren rechten Ecke des Warenkorbs — genau auf „Weiter zur Bestellung" und der Telefonzeile. */ body.shop-seite #toTop { display: none; } /* ───────── Warenkorb: Spalte am Rechner, Liste auf schmalen Geraeten ───────── */ @media (min-width: 1151px) { /* margin-top:auto riss zwischen Posten und Summe 130 bis 430 px Weiss auf. Der Scrollbereich fuellt die Spalte jetzt selbst; bei langen Listen haelt sticky den Bestellknopf weiterhin unten fest. */ .korb-unten { margin-top: 0; } .korb-scroll { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } #korbListe { flex: 1 1 auto; } /* Der leere Warenkorb ist der Normalzustand beim Einstieg — er gehoert in die Mitte der Spalte, nicht als kleines Symbol an ihren oberen Rand. */ #korbListe .korb-leer { height: 100%; justify-content: center; padding-block: 24px; } #korbListe .korb-leer svg { width: 44px; height: 44px; } } @media (max-width: 430px) { /* Zwei Reihen: Name und Preis oben, Mengenfeld darunter. In der 375-px- Schublade blieben fuer den Namen sonst 194 px — lange Pizzanamen brachen vierzeilig um. */ #korbListe li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "txt pr" "mg mg"; row-gap: 8px; } #korbListe .kp-txt { grid-area: txt; } #korbListe .kp-pr { grid-area: pr; } #korbListe .kp-mg { grid-area: mg; justify-self: start; } } /* ───────── Beliebt-Karussell: Karten mit Boden ───────── Die Karten wurden auf die hoechste gestreckt, der Text blieb oben und unter dem Preis standen bis zu 110 px Leerraum. Jetzt sinkt die Preiszeile auf die Hoehe des Plus-Knopfs. */ .shop-karussell .sa { align-items: stretch; } .shop-karussell .sa-txt { display: flex; flex-direction: column; height: 100%; } .shop-karussell .sa-fuss { margin-top: auto; padding-top: 8px; } .shop-karussell .sa-txt p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Fokusrahmen und Hover-Schatten wurden vom eigenen Scrollbehaelter oben und unten abgeschnitten — Polster und negativer Rand heben sich auf, die gemessene Hoehe der Leisten bleibt gleich. */ .shop-karussell { padding-top: 6px; margin-top: -6px; padding-bottom: 22px; margin-bottom: -12px; scroll-padding-left: var(--rand, 20px); scroll-padding-right: var(--rand, 20px); } .shop-kats { padding-block: 4px; margin-block: -4px; } @media (max-width: 719px) { /* 212 px war die Mindestbreite und damit die einzige, die je zaehlte. */ .shop-karussell { grid-auto-columns: min(78%, 260px); } } @media (min-width: 1151px) { .shop-karussell { grid-auto-columns: minmax(300px, 1fr); } } /* ───────── Tippflaechen auf Beruehrungsgeraeten ───────── Drei Regeln widersprachen sich: die Mengenknoepfe landeten bei 27 bis 30 px, der Papierkorb direkt neben dem Minus — ein Fehltipp loeschte die Position. Hier stehen sie gesammelt und gewinnen als spaetester Block. */ @media (pointer: coarse) { .kp-mg { gap: 2px; } .kp-mg button, .kasse-posten .kp-mg button { width: 40px; height: 40px; font-size: 18px; } .kp-mg button svg, .kasse-posten .kp-mg button svg { width: 17px; height: 17px; } .dlg-menge button { width: 40px; height: 40px; } #dlg header button, .kat-feld-kopf button { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; margin: -8px -8px -8px 0; border-radius: var(--r-feld); } #dlg header button svg, .kat-feld-kopf button svg { width: 18px; height: 18px; } .kat-alle { min-height: 44px; } .kat-pfeil, .kar-pfeil { width: 40px; height: 40px; padding: 9px; } .kar-pfeile { gap: 10px; } .sk-zurueck, .sk-konto, .sk-tel { min-height: 44px; } /* Das Plus ist die Hauptaktion jeder Artikelkarte. Bei 34 Punkten trifft der Daumen daneben und oeffnet statt dessen das Auswahlblatt — die aeltere Regel weiter oben bleibt sonst stehen, weil sie dieselbe Spezifitaet hat und nur die Reihenfolge entscheidet. */ .sa-plus { width: 44px; height: 44px; font-size: 24px; right: 10px; bottom: 10px; } /* Das breitere Plus reicht bis 54 Punkte an den rechten Rand — der Text braucht denselben Abstand, sonst laeuft er darunter. */ .sa { padding-right: 62px; } .shop-suche button { width: 44px; height: 44px; right: 3px; } } /* Das Schliess-Kreuz der Schublade gibt es nur bis 1150 px — die Groesse darf es nicht wieder einblenden, wo der Warenkorb Spalte ist. */ @media (pointer: coarse) and (max-width: 1150px) { .shop-korb header button { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; margin: -8px -8px -8px 0; border-radius: var(--r-feld); } .shop-korb header button svg { width: 18px; height: 18px; } } /* Wischbare Leisten brauchen keine Blaetterpfeile. */ @media (hover: none) and (pointer: coarse) { .kat-pfeil, .kar-pfeile { display: none; } } @media (max-width: 640px) { .kat-alle { padding: 8px 11px; min-width: 40px; justify-content: center; } } /* ───────── Kopfleiste auf Handy und Tablet ───────── */ @media (max-width: 900px) { /* Bei 800 px wurde die Telefonnummer rechts angeschnitten („044…"). */ .sk-konto span, .sk-tel span { display: none; } } @media (max-width: 700px) { .shop-kopf { gap: 8px; } .sk-rechts { gap: 0; } /* 33 px hohe Flaechen in einer 52-px-Leiste waren zu knapp. */ .sk-zurueck, .sk-konto, .sk-tel { min-width: 44px; min-height: 44px; padding: 10px; justify-content: center; } } /* In der Spaltenansicht steht die Kategorienleiste buendig zu den Karten — sie ragte links bis an den Bildschirmrand und endete rechts vor dem Warenkorb, also einseitig. */ @media (min-width: 1151px) { .shop-seite .shop-katzeile { margin-inline: 0; padding-inline: 0; } } /* Fusszeile: zwischen 881 und 1000 px war die Spalte „Oeffnungszeiten" so schmal, dass jede Zeile umbrach. Und die linke Kante der Fusszeile stand nicht unter der linken Kante des Shops. */ @media (max-width: 1000px) { .f-grid { grid-template-columns: 1fr 1fr; } } .shop-seite footer .wrap { max-width: 1640px; padding-inline: var(--rand, 26px); } /* ───────── Kasse ───────── */ /* Der Ersatzwert fuer die Kopfhoehe gilt fuer Bestellseite und Kasse gemeinsam (kasse.html traegt beide Klassen). Auf schmalen Geraeten ist die Leiste 52 px hoch — sonst sprang der Inhalt beim ersten Zeichnen. */ @media (max-width: 700px) { body.shop-seite { padding-top: var(--kopf, 52px); } } /* Die klebende Uebersicht darf nicht laenger sein als das Fenster, sonst steht „Kostenpflichtig bestellen" bei Tablet quer unter dem Rand. */ .kasse-korb { top: calc(var(--kopf, 58px) + 14px); max-height: calc(100vh - var(--kopf, 58px) - 28px); max-height: calc(100dvh - var(--kopf, 58px) - 28px); overflow-y: auto; overscroll-behavior: contain; } #kkListe { max-height: min(42vh, 260px); } @media (max-width: 980px) { .kasse-korb { position: static; max-height: none; overflow: visible; } #kkListe { max-height: none; } } @media (max-width: 560px) { /* Zwei Spalten statt sieben gestapelter Zeilen: Vor- und Nachname sowie Postleitzahl und Ort gehoeren nebeneinander. Telefon und E-Mail brauchen dagegen die ganze Zeile. */ .kf-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .feld-plz { max-width: none; } #kfAdresse { grid-template-columns: 104px minmax(0, 1fr); } #kfAdresse .orten-breit { grid-column: 1 / -1; } /* nth-of-type statt nth-child: Der Hinweis-Absatz „Willkommen zurueck" steht als erstes Kind im Raster und zaehlt bei nth-child mit — damit rutschte schon der Nachname faelschlich auf die volle Breite und neben dem Vornamen blieb eine leere Zelle. nth-of-type zaehlt nur die Beschriftungen und bleibt richtig, egal wo der Absatz steht. */ .kf-felder:not(#kfAdresse) .feld:nth-of-type(n+3) { grid-column: 1 / -1; } /* „Passt dazu": vier Karten in voller Breite verschenkten den halben Bildschirm — 180 px Mindestbreite passten bei 390 px nie zweimal. */ .tipp-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tipp-karte { padding: 11px; } .tk-name { font-size: .88rem; } .tk-fuss { margin-top: 4px; } /* Posten wie im Warenkorb: Name und Preis oben, Mengenfeld darunter — sonst blieben neben den 40-px-Knoepfen nur 145 px fuer den Namen. */ .kasse-posten li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "txt pr" "mg mg"; } .kasse-posten .kp-txt { grid-area: txt; } .kasse-posten .kp-pr { grid-area: pr; } .kasse-posten .kp-mg { grid-area: mg; justify-self: start; margin-top: 6px; } /* Dankeseite: doppelte Polster, einspaltige Daten, umbrechende Knoepfe. */ .kasse-fertig { padding: 28px 16px; } .kfg-track, .fp-karte { padding: 16px; } .countdown { padding: 18px 16px 16px; } .kfg-daten { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kfg-daten > div:last-child { grid-column: 1 / -1; } .kfg-knoepfe .btn { flex: 1 1 100%; } } /* Der Abschluss ist der wichtigste Moment der Bestellung — er darf sich zeigen, statt einfach da zu sein. */ .kasse-fertig:not([hidden]) { animation: fadeUp .6s var(--ease); } .kfg-kreis { animation: kreisPop .5s var(--ease) .1s both; } @keyframes kreisPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } .kfg-kreis svg path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: haken .5s var(--ease) .35s forwards; } @keyframes haken { to { stroke-dashoffset: 0; } } /* Die Hauptknoepfe des Shops sind keine Marketingknoepfe: eine halbe Sekunde Fuellung fuehlt sich beim Bestellen traege an, und 11.5 px Versalien sind fuer den wichtigsten Knopf der Seite zu klein. */ .shop-seite .btn { transition-duration: .22s; } .shop-seite .btn-gold { font-size: 12.5px; letter-spacing: .1em; font-weight: 600; } #zurKasse, #kasseSenden, #dlgAdd { padding: 15px 18px; } @media (max-width: 420px) { #dlgAdd { font-size: .8rem; padding: 13px 12px; letter-spacing: .04em; } } /* ───────── Nichts springt beim Laden ───────── Karte, Kategorien und die Faktenzeile sind bis zum ersten Zeichnen leer. Vorher wuchs die Seite von einem Bildschirm auf 22 600 px und die Kategorienleiste klappte von 0 auf 64 px auf. */ #shopKats:empty { min-height: 46px; } .lokal-zeile:empty { min-height: 1.45em; } #shopKarte:empty::before { content: ""; display: block; height: 70vh; border-radius: var(--r-karte); background: repeating-linear-gradient(180deg, #fff 0 92px, transparent 92px 104px); animation: skelPuls 1.2s ease-in-out infinite; } @keyframes skelPuls { 50% { opacity: .45; } } /* ───────── „Alle Kategorien" auf dem Handy als Blatt ───────── Als halbbreites Feld am rechten Rand lief die Liste unter die schwebende Warenkorbleiste. Ueber die volle Breite ist sie erreichbar und lesbar. */ /* Die zweite Bedingung fasst das Handy im Querformat: Dort ist der Schirm breiter als 640, aber so flach, dass die Liste sonst wieder unter der schwebenden Warenkorbleiste endet. */ @media (max-width: 640px), (max-width: 1150px) and (max-height: 560px) { .kat-feld { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: 100%; z-index: 126; max-height: 70vh; max-height: 70dvh; border-radius: var(--r-blatt) var(--r-blatt) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -18px 44px -16px rgba(20,18,14,.34); } } /* ───────── Eckenradien und Abstaende auf eine Skala ───────── Vorher standen 7/8/9/10/11/12/13/14/16 px nebeneinander und innerhalb einer Karte 11-, 13- und 15-px-Abstaende. Das Auge liest das als Unordnung. */ .gr, .opt, .kp-mg, #zurKasse, #dlgAdd, .korb-zeit select, #dlgNotiz, .dlg-menge button, .tipp, .dg-mehr, .rabattzeile .btn, #korbHinweis .hw, .pk-kopieren, .kasse-posten .kp-mg { border-radius: var(--r-feld); } .kp-mg button, .kasse-posten .kp-mg button { border-radius: 8px; } /* .kat-feld gehoert hier NICHT hinein: Auf dem Handy ist es ein Blatt an der Unterkante und braucht dort nur oben Rundungen. Diese Sammelregel steht spaeter als der 640-px-Block und hat dieselbe Spezifitaet — sie hat ihm also die unteren Ecken zurueckgegeben, durch die der Seitengrund schien. */ .sa, .tipp-karte { border-radius: var(--r-karte); } @media (min-width: 641px) { .kat-feld { border-radius: var(--r-karte); } } .kasse-fertig, .countdown { border-radius: var(--r-blatt); } .sa { padding: 16px 52px 16px 16px; } @media (max-width: 760px) { .sa { padding: 16px 48px 16px 16px; } } .sa-fuss { gap: 8px; margin-top: 8px; } .gr { gap: 8px; padding: 8px 12px; } .opt { padding: 12px; } @media (pointer: coarse) { .opt { padding: 14px 12px; } } .dg-opt { gap: 8px; } .dg-kopf { margin-bottom: 12px; } #dlg header { padding: 16px 20px; } #dlg footer { padding: 12px 20px 16px; } @media (max-width: 560px) { #dlg header { padding-top: 26px; } #dlg footer { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 420px) { #dlg header { padding-left: 16px; padding-right: 16px; } #dlg footer { padding-left: 16px; padding-right: 16px; } #dlgBody { padding: 4px 16px 12px; } } /* column-gap statt gap: Die Kurzschreibweise setzt auch den Zeilenabstand und hat damit die engeren 8 px des 430-px-Blocks weiter unten ausgehebelt. */ #korbListe li { padding: 12px 0; column-gap: 12px; } #korbListe .korb-leer { gap: 4px; } .kk-innen { padding: 20px; } .kasse-posten li { padding: 12px 0; } .tipp-liste { gap: 8px; } /* Warme Schatten statt schwarzer — Schwarz wirkt auf Beige schmutzig. Der Kartenschatten steht im hover-Zweig, sonst haenge er auf Touchgeraeten nach dem Tippen wieder fest. */ @media (hover: hover) and (pointer: fine) { .sa:hover { box-shadow: var(--schatten-2); } } .ab-blatt { box-shadow: 0 -10px 40px rgba(60,45,20,.28); } /* ───────── Kasse: fester Abschluss auf dem Handy ───────── Summe und „Kostenpflichtig bestellen" stehen erst nach fuenf Karten ganz unten — waehrend des Ausfuellens sieht der Gast nie, was er zahlt. Die Leiste bleibt versteckt, bis das JS sie einblendet (siehe Uebergabe: .kasse-leiste im Markup, body.leiste-auf beim Scrollen). */ .kasse-leiste { display: none; } @media (max-width: 980px) { .kasse-leiste:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--rand, 14px) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--linie); } .kasse-leiste .btn { padding: 13px 20px; border-radius: var(--r-feld); } .kl-summe { font-size: .9rem; color: var(--ink-2); } .kl-summe b { color: var(--ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; } body.leiste-auf .kasse { padding-bottom: 96px; } /* Beim Scrollen zum ersten Fehler darf die Leiste ihn nicht verdecken. */ .kasse-fehler { scroll-margin-bottom: 100px; } } /* Gesperrte Mengenknoepfe bleiben erkennbar, statt fast zu verschwinden. */ .dlg-menge button:disabled { opacity: .45; } /* Unter dem Kopf klebt ab wenigen hundert Pixeln dauerhaft die deckende Kategorienleiste — geweichzeichnet wird also fast immer eine einfarbige Flaeche. Auf dem Handy kostet das nur Rechenzeit bei jedem Scrollbild; bei 98 % Weiss sieht man den Unterschied nicht. */ @media (max-width: 760px) { .shop-kopf { background: rgba(255,255,255,.98); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* ═══ Nachtrag Bestellseite ═══ Einziger Zusatz der JS-Runde: was js/shop.js und bestellen.html neu setzen, braucht hier seine Regeln. Nichts weiter oben wurde angefasst — dieser Block steht am Ende und gewinnt daher bei gleichen Selektoren bewusst. */ /* Nur für Screenreader: die Ansage, was gerade im Warenkorb gelandet ist. */ .sr-only { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } /* Das Produktblatt bekommt beim Öffnen den Fokus (Fokuszaun) — der Ring gehört aber an die Bedienelemente darin, nicht ums ganze Blatt. */ #dlg:focus { outline: 0; } /* Damit die Anmerkung über der Handytastatur Luft behält. */ #dlgNotiz { scroll-margin-bottom: 16px; } /* Die Karte konnte nicht geladen werden — Kasten statt nacktem Satz. */ .shop-fehler { margin: 30px 0; padding: 22px; background: #fff; border: 1px solid var(--linie, #ece7db); border-radius: var(--r-karte, 14px); display: grid; gap: 8px; justify-items: start; box-shadow: var(--schatten-1, 0 1px 2px rgba(20,18,14,.05)); } .shop-fehler b { font-size: 1.02rem; } .shop-fehler span { color: var(--ink-2); } .shop-fehler .btn { margin-top: 6px; } /* ── Platzhalter, solange die Karte lädt ── Ruhige Flächen in der Grösse des späteren Inhalts: die Seite steht sofort, statt beige und leer zu bleiben und dann auf einmal einzuschlagen. */ .sk-chip, .sk-h2, .sk-karte { position: relative; overflow: hidden; background: #efe9dc; border-color: transparent; pointer-events: none; } .sk-chip { display: inline-block; width: 84px; height: 36px; } .sk-chip:nth-child(2) { width: 112px; } .sk-chip:nth-child(4) { width: 64px; } .sk-h2 { width: 140px; height: 20px; margin: 22px 0 14px; border-radius: 6px; } .sk-karte { height: 96px; } .sk-chip::after, .sk-h2::after, .sk-karte::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); transform: translateX(-100%); animation: schimmer 1.4s ease-in-out infinite; } @keyframes schimmer { to { transform: translateX(100%); } } /* Die beiden Zeilen unter dem Titel sind bis zum Füllen 0 px hoch — ohne Mindesthöhe rutscht beim Eintreffen die halbe Seite nach unten. */ .lokal-zeile, .lokal-status { min-height: 1.5em; } /* Ein Chip ohne Treffer würde ins Leere springen. */ .shop-kats .kat.leer { opacity: .35; pointer-events: none; } /* Der Schatten gehört nur an die Leiste, die wirklich klebt — am Seitenanfang lag er bisher immer an. Die Klasse setzt js/shop.js beim Scrollen. */ .shop-katzeile { box-shadow: 0 9px 10px -11px rgba(20,18,14,0); transition: box-shadow .2s var(--ease); } .shop-katzeile.klebt { box-shadow: 0 9px 10px -11px rgba(20,18,14,.22); } /* Die Marke „nach Wahl" steht jetzt in derselben Zeile wie der Preis. */ .sa-txt .waehlbar { margin: 0; } /* Neu gezeichnete Blöcke blenden weich ein, statt hart umzuspringen (Suche, Wechsel Liefern/Abholen). */ #shopKarte .shop-kat, #shopKarte .shop-leer { animation: shop-einblenden .28s var(--ease) both; } #shopKarte .shop-kat:nth-child(2) { animation-delay: .04s; } #shopKarte .shop-kat:nth-child(3) { animation-delay: .08s; } @keyframes shop-einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Der Fortschrittsbalken läuft jetzt über transform (Compositor) statt über width (Layout) — js/app.js setzt scaleX. */ #bar-prog { width: 100%; transform: scaleX(0); transform-origin: 0 50%; } /* Der Weg zurück zur Karte aus dem leeren Warenkorb: nur so breit wie nötig, damit er im leeren Feld nicht wie ein Balken wirkt. */ #korbListe .korb-leer .korb-leer-knopf { margin-top: 14px; align-self: center; width: auto; border-radius: var(--r-feld, 10px); } /* ═══ Nachtrag Kasse ═══ Was js/kasse.js und kasse.html in dieser Runde neu setzen, braucht hier seine Regeln. Nichts weiter oben wurde angefasst — dieser Block steht am Ende und gewinnt daher bei gleichen Selektoren bewusst. */ /* Ein bemängeltes Feld muss man sehen, nicht suchen: warmer Rotton auf hellem Grund, dazu die Beschriftung darüber. Gesetzt wird beides von meldung(). */ .feld.fehler input, .feld.fehler select, .feld.fehler textarea, #kasseForm [aria-invalid="true"] { border-color: #c8562f; background: #fdf7f4; } .feld.fehler > span { color: #a2431f; } /* Beim Hinfahren darf der klebende Kopf das Feld nicht verdecken. */ #kasseForm .feld input, #kasseForm .feld select, #kasseForm .feld textarea { scroll-margin-top: calc(var(--kopf, 58px) + 16px); } /* Der Sendezustand ist kein Sperrzustand: Farbe bleibt, davor läuft ein kleiner Kreisel. .btn ist inline-flex mit gap, das Pseudo-Element sitzt daher sauber vor dem Text. Klasse und aria-busy setzt js/kasse.js. */ /* Der gesperrte Knopf ist bewusst beige (Block „Gesperrte Hauptknoepfe") — beim Senden soll er aber Gold bleiben, sonst liest sich „beschäftigt" wie „geht nicht". */ #kasseSenden.laedt:disabled, #kasseSenden.laedt:disabled:hover { opacity: .85; cursor: progress; background-color: var(--gold-lt); background-image: none; border-color: var(--gold-lt); color: var(--ink); } #kasseSenden.laedt::before { content: ""; flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: kreisel .8s linear infinite; } @keyframes kreisel { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { #kasseSenden.laedt::before { animation: none; } } /* Der Mindestbestellwert ist kein Fehler, sondern ein Hinweis — gleiche Form wie die Fehlermeldung, aber in Gold statt Rot. */ .kasse-min { color: #7a5f1e; background: #fdf7ea; border-color: #efe0c0; } /* Die Dankesueberschrift bekommt nach dem Absenden den Fokus (kasse.js). Sichtbar soll der Ring nur werden, wenn wirklich mit der Tastatur gearbeitet wird — sonst wirkt die Seite wie „angeklickt". */ .kasse-fertig h2:focus { outline: 0; } .kasse-fertig h2:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 6px; } /* Der Willkommens-Hinweis steht jetzt als erstes Kind über den Feldern — dort braucht er weniger Abstand als zwischen zwei Feldreihen. */ .kf-felder > .kf-hinweis:first-child { margin: 0 0 2px; } /* Zwei Zeilen statt Umbruch mitten in „CHF 22.50": Auf 320 px stehen Summe und Knopf sonst uebereinander gequetscht. Wort und Betrag bleiben je in einer Zeile, der Knopf behaelt seine Tippflaeche. */ .kl-summe { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; flex: 0 0 auto; } /* Die Summe darf nie schrumpfen — der Knopf schon, seine Beschriftung ist kurz und die Tippflaeche bleibt ueber das Polster erhalten. */ .kasse-leiste .btn { flex: 0 1 auto; min-width: 0; } /* Der Knopf der Abschlussleiste folgt derselben Regel wie die anderen Hauptknoepfe: gesperrt heisst ruhige beige Flaeche mit lesbarem Text — sonst sieht er voll gueltig aus und reagiert trotzdem nicht. */ #kasseLeisteKnopf:disabled, #kasseLeisteKnopf:disabled:hover { opacity: 1; cursor: not-allowed; background-color: var(--paper-2); background-image: none; border-color: var(--linie-stark); color: var(--ink-2); } /* ───────── „App aufs Handy" auf dem Handy als schmale Zeile ───────── Auf der Bestellseite steht der Kasten neu ueber der Speisekarte, damit ihn ueberhaupt jemand sieht — an seiner alten Stelle ganz unten kam nach 22'000 Punkten Karte niemand vorbei. In voller Groesse frisst er dort aber den halben ersten Bildschirm, und der Gast kam wegen des Essens. Als Zeile sagt er dasselbe und kostet ein Fuenftel der Hoehe. */ @media (max-width: 760px) { body.shop-seite .app-install { grid-template-columns: 38px 1fr auto; align-items: center; gap: 0 12px; padding: 12px 40px 12px 14px; border-radius: var(--r-karte); } body.shop-seite .ai-bild { width: 38px; height: 38px; border-radius: 9px; } body.shop-seite .ai-text { padding-right: 0; gap: 1px; } body.shop-seite .ai-text b { font-size: .9rem; } /* Der lange Werbetext ist auf einer Zeile nicht unterzubringen — und wer „App aufs Handy" liest, weiss ohnehin, was gemeint ist. */ body.shop-seite .ai-text span { display: none; } body.shop-seite .ai-knopf { grid-column: auto; grid-row: 1; width: auto; padding: 9px 14px; font-size: .78rem; letter-spacing: .06em; border-radius: 999px; white-space: nowrap; } body.shop-seite .ai-knopf svg { display: none; } /* Nur solange der Kasten wirklich eine Zeile ist, steht das Kreuz mittig daneben. Wird der Knopf darunter gestellt (siehe Block weiter unten), gehoert es zurueck nach oben. */ body.shop-seite .ai-zu { top: 50%; right: 6px; margin-top: -16px; } /* Die Anleitung fuers iPhone braucht die ganze Breite unter der Zeile. */ body.shop-seite .ai-hilfe { grid-column: 1 / -1; margin-top: 8px; } } /* Unter rund 400 Punkten bleibt neben Symbol, Titel und Schliesskreuz kein Platz mehr fuer einen Knopf in derselben Zeile — bei 320 Punkten blieben dem Titel noch 52 Punkte und er brach vierzeilig um. Dort steht der Knopf darum wieder unter dem Text; ohne den Werbesatz bleibt der Kasten trotzdem flach. */ @media (max-width: 400px) { body.shop-seite .app-install { grid-template-columns: 38px 1fr; padding-bottom: 14px; } body.shop-seite .ai-knopf { grid-column: 1 / -1; grid-row: auto; width: 100%; margin-top: 10px; } body.shop-seite .ai-text b { font-size: .88rem; } /* Der Kasten ist hier wieder zwei Zeilen hoch — mittig sass das Kreuz dann zwischen Titel und Knopf und sah aus wie verrutscht. */ body.shop-seite .ai-zu { top: 8px; margin-top: 0; } } /* ── Liefergebiet auf der Bestellseite ── Sichtbare Liste der Ortschaften, in die wir liefern. Sie steht unter dem Shop und ueber dem Fussbereich: Wer bestellen will, scrollt nicht so weit, und wer nach seinem Ort sucht, findet ihn trotzdem auf der Seite. */ .liefergebiet { padding: 40px 0 8px; } .liefergebiet h2 { font-size: 1.35rem; margin: 0 0 10px; } .liefergebiet .lg-lead { max-width: 62ch; margin: 0 0 18px; line-height: 1.6; } .liefergebiet .lg-orte { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .liefergebiet .lg-orte li { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border: 1px solid var(--line, #e4dfd2); border-radius: 10px; } .liefergebiet .lg-orte b { font-weight: 600; } .liefergebiet .lg-orte span { margin-left: auto; font-size: .85rem; opacity: .65; font-variant-numeric: tabular-nums; } .liefergebiet .lg-fuss { max-width: 70ch; margin: 0; font-size: .9rem; line-height: 1.6; opacity: .8; } /* ── Zeile im Fussbereich ── Nennt Haus, Ort, die wichtigsten Gerichte und das Liefergebiet. Sie steht sichtbar auf jeder Seite: Suchmaschinen bewerten Text, den ein Leser auch sieht, und nicht Schlagwortlisten im Kopfbereich. */ .f-about .f-orte { margin-top: 14px; font-size: .82rem; line-height: 1.6; opacity: .7; }