/* ============================================================ Customer-Frontend · Speisekarte Brand-Farben werden per inline-style auf überschrieben. ============================================================ */ /* hidden-Attribut muss immer wirken — ohne !important überschreibt jedes display:grid/flex/block auf .sf-product & Co. das hidden */ [hidden] { display: none !important; } :root { --brand: #c8372d; --brand-dark: #8f2319; --brand-light: #e85948; --brand-soft: #fdf0ee; --white: #ffffff; --bg: #f3f3f3; --surface: #ffffff; --cream-2: #f5f5f0; --line: #e5e5e5; --line-soft: #ececec; --ink: #0a0a0a; --ink-2: #1a1a1a; --text: #333333; --text-soft: #6b6b6b; --text-muted: #999999; --green: #0a8a4e; --green-soft: #e8faf0; --orange: #d97706; --orange-soft: #fff4e6; --radius: 14px; --radius-sm: 10px; --radius-lg: 18px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.06); --shadow-lg: 0 10px 30px rgba(0,0,0,0.12); } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } body { font-family: 'Mona Sans', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* iOS-Double-Tap-Zoom auf Buttons unterbinden (verhindert Zoom beim schnellen +/-) */ button, a, [role="button"], input[type="button"], input[type="submit"], label { touch-action: manipulation; } /* iOS-Safari zoomt beim Focus auf Inputs mit font-size < 16px — verhindern: alle Text-Inputs kriegen auf Mobile mindestens 16px. */ @media screen and (max-width: 720px) { input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input:not([type]), select, textarea { font-size: 16px !important; } } @keyframes sf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ============================================================ Layout: Header oben, links Produkte, rechts Cart-Drawer ============================================================ */ .sf-app { min-height: 100vh; display: flex; flex-direction: column; } .sf-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0,0,0,0.02); transition: box-shadow 0.2s; } .sf-header.is-scrolled { box-shadow: 0 4px 20px -8px rgba(0,0,0,0.08), 0 1px 0 rgba(0,0,0,0.04); } .sf-header-inner { max-width: 1440px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; gap: 24px; } .sf-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .sf-logo { width: 42px; height: 42px; border-radius: 12px; background: var(--brand); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; overflow: hidden; flex-shrink: 0; } /* Wenn ein Logo-Bild drin ist: Box darf breiter werden, kein Brand-Background, kein Croppen */ .sf-logo:has(img) { width: auto; max-width: 160px; background: transparent; border-radius: 6px; } .sf-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; } .sf-brand-text .loc { font-family: 'Mona Sans', ui-monospace, monospace; font-size: 10px; color: var(--text-soft); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; line-height: 1; margin-bottom: 3px; } .sf-brand-text .name { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: var(--ink); } .sf-search { flex: 0 1 480px; max-width: 480px; min-width: 180px; margin-left: auto; /* schiebt Search + alles danach (Chip, Login) nach rechts */ position: relative; } /* Wenn ein Logo-Bild vorhanden ist, braucht der Text rechts daneben nicht nochmal den Restaurant-Namen — das Logo zeigt's schon. Gilt Desktop + Mobile. */ .sf-brand:has(.sf-logo img) .sf-brand-text { display: none; } .sf-search-input-wrap { position: relative; width: 100%; } .sf-search input { width: 100%; padding: 11px 16px 11px 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); font-size: 13.5px; color: var(--ink); outline: none; transition: border-color 0.15s, box-shadow 0.15s; } .sf-search input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(200,55,45,0.12); } .sf-search input::placeholder { color: var(--text-muted); } .sf-search-input-wrap svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--brand); } /* ====== Header-Search-Btn (Mobile) — auf Desktop hidden ====== */ .sf-search-btn { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); flex-shrink: 0; cursor: pointer; padding: 0; transition: background 0.15s, color 0.15s, border-color 0.15s; } .sf-search-btn:hover, .sf-search-btn:focus-visible { background: var(--brand); border-color: var(--brand); color: #fff; } .sf-search-btn svg { width: 18px; height: 18px; } /* ====== Desktop-Dropdown ====== */ .sf-search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: min(70vh, 560px); overflow-y: auto; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); z-index: 60; } .sf-search-results { padding: 6px 0; } .sf-search-cat { padding: 4px 0 6px; } .sf-search-cat + .sf-search-cat { border-top: 1px solid var(--line-soft); } .sf-search-cat-head { padding: 10px 16px 6px; font-size: 11px; font-weight: 700; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.06em; } /* 3-Spalten-Grid: Image | Nummer | Name+Desc-Stack. border-bottom: dünne Linie zwischen Items, beim letzten weg. */ .sf-search-item { display: grid; grid-template-columns: 32px auto 1fr; width: 100%; align-items: center; gap: 14px; padding: 12px 16px; background: transparent; border: 0; border-bottom: 1px solid var(--line-soft); text-align: left; cursor: pointer; font-family: inherit; } .sf-search-item:last-child { border-bottom: 0; } .sf-search-item:hover, .sf-search-item:focus-visible { background: var(--off-white, #f6f4ef); outline: none; } .sf-search-item-img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; background: var(--off-white, #f6f4ef); } .sf-search-item-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--off-white, #f6f4ef); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; } .sf-search-item-no { font-size: 12px; font-weight: 700; color: var(--text-muted); background: var(--off-white, #f6f4ef); padding: 3px 8px; border-radius: 5px; letter-spacing: 0.02em; min-width: 24px; text-align: center; } /* Wenn keine Nummer vorhanden ist, lassen wir die Spalte trotzdem leer damit die Spalte konstant aligned bleibt (alle Names auf gleicher X-Achse). */ .sf-search-item-no-empty { visibility: hidden; } .sf-search-item-main { min-width: 0; } .sf-search-item-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-search-item-desc { font-size: 12.5px; color: var(--text-soft); line-height: 1.35; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-search-item mark { background: rgba(22, 86, 55, 0.15); color: var(--brand); padding: 0 1px; border-radius: 2px; font-weight: 700; } .sf-search-empty { padding: 28px 20px; text-align: center; color: var(--text-soft); font-size: 14px; line-height: 1.5; } .sf-search-empty-hint { display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--text-muted); } /* ====== Mobile-Bottom-Sheet-Modal ====== */ .sf-search-modal { display: none; } .sf-search-modal.open { display: flex; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: stretch; justify-content: center; padding: 0; /* überschreibt .sf-modal { padding: 24px } */ backdrop-filter: none; /* Vollbild ohne Blur (Performance + Konsistenz Mobile) */ } /* Search-Modal-Box override: muss .sf-modal-box base (border-radius: 20px, max-height: calc(100dvh - 48px)) schlagen — 2-Klassen-Specificity. */ .sf-search-modal .sf-search-modal-box { background: var(--white); width: 100%; max-width: 640px; height: 100dvh; max-height: 100dvh; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; } .sf-search-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .sf-search-modal-input-wrap { flex: 1 1 auto; position: relative; } .sf-search-modal-input-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--brand); } .sf-search-modal-input-wrap input { width: 100%; padding: 11px 14px 11px 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--off-white, #f6f4ef); font-size: 14px; color: var(--ink); outline: none; transition: border-color 0.15s, background 0.15s; } .sf-search-modal-input-wrap input:focus { border-color: var(--brand); background: var(--white); } .sf-search-modal-close { background: transparent; border: 0; color: var(--brand); font-size: 14px; font-weight: 600; padding: 6px 4px; cursor: pointer; flex-shrink: 0; } .sf-search-modal-results { flex: 1 1 auto; overflow-y: auto; padding: 6px 0 12px; } .sf-header-right { display: flex; gap: 10px; align-items: center; flex-shrink: 0; } /* Pages ohne Search-Bar/Btn (About, Login, 404, etc.) brauchen einen margin-auto-Spacer damit Header-Right rechts andockt — sonst klebt er auf Mobile direkt am Brand. Specificity hoch genug, um auch im Mobile-Media-Block den `margin-left: 0`-Reset zu schlagen. */ .sf-header-inner:not(:has(.sf-search, .sf-search-btn)) .sf-header-right { margin-left: auto; } .sf-live-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 12px; background: var(--green-soft); color: var(--green); border: 1px solid var(--green-soft); border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.12s, border-color 0.12s; } .sf-live-chip:hover { background: #d6f3e2; border-color: #d6f3e2; } .sf-live-chip .dot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; animation: sf-pulse 2s infinite; flex-shrink: 0; } .sf-live-chip.closed { color: #b53230; background: #fde9e8; border-color: #fde9e8; } .sf-live-chip.closed:hover { background: #f9d6d4; border-color: #f9d6d4; } .sf-live-chip.closed .dot { background: #b53230; animation: none; } .sf-chip-chevron { width: 10px; height: 10px; opacity: 0.6; transition: transform 0.15s; margin-left: 2px; } .sf-hours-wrap.open .sf-chip-chevron { transform: rotate(180deg); } /* Clock-Icon in der Chip — zeigt sich erst auf Mobile, wenn Text ausgeblendet wird. Auf Desktop bleibt nur der pulsierende Dot + Text. */ .sf-chip-clock { width: 14px; height: 14px; flex-shrink: 0; display: none; } /* Öffnungszeiten-Popover */ .sf-hours-wrap { position: relative; } .sf-hours-pop { position: absolute; top: calc(100% + 10px); right: 0; min-width: 280px; max-width: 340px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 48px -12px rgba(0,0,0,0.18), 0 6px 14px -4px rgba(0,0,0,0.08); padding: 14px 16px; z-index: 200; animation: sf-hours-fade 0.15s ease-out; } @keyframes sf-hours-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* Pfeil */ .sf-hours-pop::before { content: ''; position: absolute; top: -6px; right: 20px; width: 10px; height: 10px; background: var(--white); border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); } .sf-hours-pop-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); margin-bottom: 8px; gap: 10px; } .sf-hours-pop-head strong { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .sf-hours-pop-sub { font-size: 11.5px; color: var(--text-soft); font-family: 'Mona Sans', ui-monospace, monospace; } .sf-hours-type-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-soft); margin: 10px 0 4px; } .sf-hours-type-head:first-child { margin-top: 0; } .sf-hours-table { display: flex; flex-direction: column; font-size: 13px; } .sf-hours-row { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: center; padding: 4px 0; color: var(--text); } .sf-hours-row.is-today { color: var(--ink); font-weight: 700; } .sf-hours-row.is-today .sf-hours-day::before { content: '•'; color: var(--brand); margin-right: 4px; } .sf-hours-day { font-family: 'Mona Sans', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; } .sf-hours-day-long { display: none; } .sf-hours-times { font-variant-numeric: tabular-nums; text-align: right; } .sf-hours-closed { color: var(--text-muted); font-style: italic; font-size: 12px; } @media (max-width: 640px) { .sf-hours-pop { /* Mobile: Popup fest am Viewport verankern (nicht mehr am Badge), damit es nicht über den linken Rand off-screen läuft. Pseudo-Pfeil ausblenden (der passt dann nicht mehr zur Position). */ position: fixed; top: auto; left: 12px; right: 12px; min-width: 0; max-width: none; width: calc(100vw - 24px); margin-top: 10px; } .sf-hours-pop::before { display: none; } .sf-hours-row { grid-template-columns: 48px 1fr; gap: 6px; } .sf-hours-times { font-size: 12.5px; } .sf-chip-chevron { display: none; } /* Mobile: Clock-Chip wird 40×40 White-Pill — gleiche Optik + Größe wie Burger links und Login-/User-Button rechts. Open-/Closed-Status über Clock-Farbe (grün/rot). aria-label trägt vollen Text für a11y. */ .sf-chip-clock { display: block; width: 18px; height: 18px; } .sf-live-chip .dot, .sf-live-chip .sf-chip-text { display: none; } .sf-live-chip { width: 40px; height: 40px; padding: 0; justify-content: center; flex-shrink: 0; } } /* Login/Konto-Button im Header */ .sf-login-btn, .sf-user-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.12s, border-color 0.12s; } .sf-login-btn:hover, .sf-user-btn:hover { background: var(--cream-2); border-color: var(--text-muted); } .sf-login-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .sf-user-btn { padding: 4px 12px 4px 4px; } .sf-user-initial { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: white; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; flex-shrink: 0; } /* Mobile: alle Header-Icon-Buttons (Burger + Clock + Login/User) als 40×40 Circle-Buttons mit gleichem White-Pill + Line-Border-Look. Brand-Color bleibt nur auf der User-Initial-Disc, damit der Gast sich wiedererkennt. */ @media (max-width: 720px) { .sf-login-btn span, .sf-user-name { display: none; } .sf-login-btn, .sf-user-btn { width: 40px; height: 40px; padding: 0; justify-content: center; flex-shrink: 0; } .sf-login-btn svg { color: var(--ink); } .sf-user-initial { width: 30px; height: 30px; font-size: 13px; } } /* ============================================================ Body-Grid: Produkte + Cart ============================================================ */ /* Sprach-Picker (Floating Top-Right) — wird nur gerendert wenn der Tenant eine extra_language aktiv hat. Liegt im Layout-Body und schwebt über dem page-spezifischen Header damit alle Customer-Pages ihn ohne weitere Template-Änderung kriegen. */ /* ============================================================ Burger-Button + Drawer (Customer-Layout, alle Pages) Burger sitzt INLINE als erstes Kind in `.sf-header-inner` (per Header-View prepended), nutzt das Header-Flex-Layout für Positionierung — kein `position: fixed` mehr. Drawer ist Layout-global. ============================================================ */ .sf-burger { width: 40px; height: 40px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; padding: 0; color: var(--ink); transition: background-color 0.12s, border-color 0.12s; } .sf-burger:hover { background-color: var(--cream); border-color: var(--text-muted); } .sf-burger-bars { position: relative; display: block; width: 18px; height: 12px; } .sf-burger-bars::before, .sf-burger-bars::after, .sf-burger-bars { background: var(--ink); } .sf-burger-bars::before, .sf-burger-bars::after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; border-radius: 1px; } .sf-burger-bars { background: transparent; } .sf-burger-bars::before { top: 0; box-shadow: 0 5px 0 var(--ink); } .sf-burger-bars::after { bottom: 0; } /* Drawer-Wrapper: full-screen overlay, hidden via [hidden] (display:none). Beim Öffnen via JS wird hidden entfernt + .is-open-Class gesetzt. */ .sf-drawer { position: fixed; inset: 0; z-index: 200; } .sf-drawer[hidden] { display: none; } .sf-drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.2s ease-out; } .sf-drawer.is-open .sf-drawer-backdrop { opacity: 1; } .sf-drawer-panel { position: absolute; top: 0; left: 0; bottom: 0; width: 85%; max-width: 360px; background: var(--white); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.25s ease-out; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12); overflow-y: auto; -webkit-overflow-scrolling: touch; } .sf-drawer.is-open .sf-drawer-panel { transform: translateX(0); } .sf-drawer-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--white); z-index: 1; } .sf-drawer-close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 8px; cursor: pointer; color: var(--ink); flex-shrink: 0; } .sf-drawer-close:hover { background: var(--cream-2); } .sf-drawer-close svg { width: 20px; height: 20px; } .sf-drawer-brand { flex: 1 1 auto; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sf-drawer-nav { display: flex; flex-direction: column; padding: 8px 0 32px; } .sf-drawer-link { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; transition: background 0.12s; } .sf-drawer-link:hover { background: var(--cream); } .sf-drawer-link-sub { font-weight: 500; font-size: 14px; color: var(--text); } .sf-drawer-link-ico { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink); } .sf-drawer-link-sub .sf-drawer-link-ico { color: var(--text-soft); } .sf-drawer-section-label { padding: 16px 18px 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); } /* Sprach-Liste im Drawer — eigener Block damit Buttons nebeneinander (statt Stack), Active-State mit grünem Akzent. */ .sf-drawer-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 14px 4px; } .sf-drawer-lang { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 10px 12px; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; text-align: left; transition: background 0.12s, border-color 0.12s; } .sf-drawer-lang:hover { border-color: var(--brand); } .sf-drawer-lang.is-active { background: #ecf8f1; border-color: #b4ddc3; color: #155b3a; font-weight: 700; } .sf-drawer-lang-check { color: #2a8857; font-weight: 700; } /* Body-Scroll-Lock wenn Drawer offen */ body.has-drawer-open { overflow: hidden; } /* Customer-Error-Page (z.B. /bestellung/{ungültige-id}). Eigenständiger Bereich der nicht aufs sf-body-Grid (Storefront mit Cart) angewiesen ist. */ .sf-error-wrap { max-width: 640px; margin: 40px auto; padding: 24px; display: flex; align-items: center; justify-content: center; min-height: 60vh; } .sf-error-box { width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 36px 28px; text-align: center; box-shadow: var(--shadow-sm); } .sf-error-icon { font-size: 56px; line-height: 1; margin-bottom: 16px; } .sf-error-title { font-size: 22px; font-weight: 800; color: var(--ink); margin: 0 0 12px; letter-spacing: -0.02em; } .sf-error-sub { font-size: 14.5px; line-height: 1.5; color: var(--text-soft); margin: 0 0 24px; } .sf-error-sub strong { color: var(--ink); font-weight: 700; } .sf-error-actions { display: flex; flex-direction: column; gap: 10px; align-items: center; } .sf-error-cta { display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: white; padding: 13px 28px; border-radius: 12px; font-weight: 700; font-size: 14.5px; text-decoration: none; transition: background 0.12s; } .sf-error-cta:hover { background: var(--brand-dark); } .sf-error-link { color: var(--text-soft); font-size: 13.5px; text-decoration: underline; padding: 6px 0; } .sf-error-link:hover { color: var(--ink); } @media (max-width: 600px) { .sf-error-wrap { padding: 16px; min-height: 50vh; } .sf-error-box { padding: 28px 20px; } .sf-error-title { font-size: 19px; } } .sf-body { max-width: 1440px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; padding: 24px; /* WICHTIG: stretch statt start — sonst endet die rechte Grid-Zelle an der Cart-Höhe und die sticky-Logik verliert ihren Anker beim Scrollen. Mit stretch wird die rechte Spalte so hoch wie die Produktliste, die Cart sticky bleibt während des gesamten Scrollens sichtbar. */ align-items: stretch; } .sf-main { min-width: 0; display: flex; flex-direction: column; gap: 20px; } /* ---- Welcome Card ---- */ .sf-hero { background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); border-radius: var(--radius-lg); padding: 24px 28px; color: white; position: relative; overflow: hidden; box-shadow: 0 8px 24px -6px rgba(0,0,0,0.2); } .sf-hero.closed { background: linear-gradient(135deg, #040404 0%, #1e293b 100%); box-shadow: 0 8px 24px -6px rgba(0,0,0,0.2); } .sf-hero.closed .sf-hero-tag .dot { background: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.3); } .sf-hero::before, .sf-hero::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; } .sf-hero::before { right: -60px; top: -60px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); } .sf-hero::after { right: 30px; bottom: -40px; width: 120px; height: 120px; background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 65%); } .sf-hero-tag { font-family: 'Mona Sans', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.85; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; } .sf-hero-tag .dot { width: 6px; height: 6px; background: #4ade80; border-radius: 50%; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.3); animation: sf-pulse 2s infinite; } .sf-hero-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 6px; position: relative; } .sf-hero-sub { font-size: 14px; opacity: 0.92; line-height: 1.45; max-width: 80%; position: relative; } /* ---- Order-Type Toggle ---- */ .sf-order-type { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 5px; display: flex; gap: 4px; } .sf-ot-item { flex: 1; padding: 11px 14px; text-align: center; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--text-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.15s, color 0.15s; } .sf-ot-item svg { width: 15px; height: 15px; stroke-width: 2; } .sf-ot-item.active { background: var(--ink); color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.12); } /* ---- Category Pills (sticky unter Header) ---- */ .sf-categories { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 73px; background: rgba(243, 243, 243, 0.94); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); z-index: 40; margin: 0 calc(-1 * var(--sf-main-px, 16px)); padding: 10px var(--sf-main-px, 16px); border-bottom: 1px solid rgba(0,0,0,0.06); box-shadow: 0 4px 12px -8px rgba(0,0,0,0.08); } .sf-categories::-webkit-scrollbar { display: none; } .sf-cat { padding: 6px 14px 6px 6px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; transition: all 0.15s; } /* Pill ohne Tile (kein tile_image_path und kein icon): zurück zum text-only- Padding, damit der Pill nicht künstlich groß aussieht. */ .sf-cat:not(:has(.sf-cat-tile)) { padding: 10px 16px; } .sf-cat:hover { border-color: var(--ink); } .sf-cat.active { background: var(--ink); color: white; border-color: var(--ink); } /* Tile-Avatar im Pill: 28×28 1:1, runde Ecken, object-fit: cover. Image-Fallback ist die Kategorie-Icon-Variante (Emoji im selben Container). */ .sf-cat-tile { width: 28px; height: 28px; border-radius: 50%; background: var(--cream-2); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-size: 14px; line-height: 1; } .sf-cat-tile[src], img.sf-cat-tile { object-fit: cover; } .sf-cat.active .sf-cat-tile { background: rgba(255,255,255,0.15); } /* ---- Closed-Banner (Pre-Order-Hinweis) ---- */ .sf-closed-banner { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%); border: 1px solid #fbbf24; border-radius: 14px; box-shadow: 0 4px 14px -6px rgba(234,179,8,0.25); position: relative; overflow: hidden; } .sf-closed-banner::before { content: ''; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(234,179,8,0.2) 0%, transparent 65%); pointer-events: none; } .sf-closed-banner-icon { width: 44px; height: 44px; background: rgba(234,179,8,0.25); border-radius: 50%; display: grid; place-items: center; font-size: 22px; flex-shrink: 0; position: relative; } .sf-closed-banner-main { min-width: 0; position: relative; } .sf-closed-banner-title { font-weight: 800; font-size: 15px; color: #78350f; letter-spacing: -0.01em; } .sf-closed-banner-sub { font-size: 13px; color: #92400e; margin-top: 2px; line-height: 1.4; } .sf-closed-banner-sub strong { color: #78350f; font-weight: 700; } .sf-closed-banner-cta { display: inline-flex; align-items: center; gap: 5px; padding: 10px 14px; background: #78350f; color: white; border: none; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; transition: background 0.12s, transform 0.05s; position: relative; } .sf-closed-banner-cta:hover { background: #451a03; } .sf-closed-banner-cta:active { transform: scale(0.97); } .sf-closed-banner-cta svg { width: 14px; height: 14px; } @media (max-width: 560px) { .sf-closed-banner { grid-template-columns: 40px 1fr; gap: 10px; padding: 12px 14px; } .sf-closed-banner-icon { width: 40px; height: 40px; font-size: 20px; } .sf-closed-banner-title { font-size: 14px; } .sf-closed-banner-sub { font-size: 12.5px; } .sf-closed-banner-cta { grid-column: 1 / -1; justify-content: center; margin-top: 6px; } } /* ---- Category Section ---- */ .sf-cat-section { scroll-margin-top: 140px; margin-top: 8px; } .sf-cat-head { display: grid; grid-template-columns: 68px 1fr auto; gap: 16px; align-items: center; margin-bottom: 16px; padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; position: relative; overflow: hidden; } .sf-cat-head::before { /* subtiler Verlauf nach rechts für visuelles Leben */ content: ''; position: absolute; right: 0; top: 0; width: 220px; height: 100%; background: linear-gradient(270deg, var(--brand-soft) 0%, transparent 80%); pointer-events: none; opacity: 0.55; } .sf-cat-head-thumb { position: relative; width: 68px; height: 68px; border-radius: 12px; background: var(--cream-2); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; } .sf-cat-head-thumb img { width: 100%; height: 100%; object-fit: cover; } .sf-cat-head-icon { font-size: 30px; line-height: 1; } .sf-cat-head-main { min-width: 0; position: relative; } .sf-cat-head-eyebrow { font-family: 'Mona Sans', ui-monospace, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; } .sf-cat-title { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); line-height: 1.1; margin: 0; } .sf-cat-title em { font-style: normal; color: var(--brand); } .sf-cat-head-desc { font-size: 13px; color: var(--text-soft); margin-top: 5px; line-height: 1.4; } .sf-cat-head-count { position: relative; text-align: center; padding-left: 12px; flex-shrink: 0; } .sf-cat-head-count-num { font-family: 'Mona Sans', sans-serif; font-variant-numeric: tabular-nums; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--brand); line-height: 1; } .sf-cat-head-count-lbl { font-family: 'Mona Sans', ui-monospace, monospace; font-size: 10.5px; font-weight: 600; color: var(--text-soft); margin-top: 3px; letter-spacing: 0.05em; text-transform: uppercase; } /* ---- „Weiter mit ..."-Divider zwischen Kategorien ---- */ .sf-cat-next { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 20px; margin: 20px 0 4px; font-family: 'Mona Sans', ui-monospace, monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); text-decoration: none; border-top: 1px dashed var(--line); transition: color 0.15s; } .sf-cat-next strong { color: var(--ink); font-weight: 800; letter-spacing: -0.01em; text-transform: none; font-family: 'Mona Sans', sans-serif; font-size: 14px; } .sf-cat-next svg { width: 14px; height: 14px; opacity: 0.6; transition: transform 0.15s; } .sf-cat-next:hover { color: var(--brand); } .sf-cat-next:hover strong { color: var(--brand); } .sf-cat-next:hover svg { transform: translateY(2px); opacity: 1; } @media (max-width: 560px) { .sf-cat-head { grid-template-columns: 52px 1fr auto; gap: 12px; padding: 14px 16px; } .sf-cat-head-thumb { width: 52px; height: 52px; } .sf-cat-head-icon { font-size: 22px; } .sf-cat-title { font-size: 19px; } .sf-cat-head-desc { font-size: 12px; } .sf-cat-head-count-num { font-size: 24px; } .sf-cat-head-count-lbl { font-size: 9.5px; } .sf-cat-next { padding: 14px 12px; font-size: 10.5px; } .sf-cat-next strong { font-size: 13px; } } /* ---- Product Grid ---- */ .sf-products { display: grid; /* auto-fit + minmax: Grid kollabiert automatisch auf 1 Spalte wenn weniger als ~420 px verfügbar sind, sonst 2-Spalten. Verhindert dass auf Tablet- Hochkant (912 px Viewport, ~520 px Main neben Cart-Sidebar) Cards in zu enge 250-px-Spalten gequetscht werden — innerer 3-Spalten-Grid (Nr+Info+ Right) braucht mindestens ~380 px sonst überlappen Name + Preis. */ grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 12px; } .sf-product { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; /* 3-Spalten-Grid: Nummer ganz links (eigene Spalte, dezent), Info-Spalte dehnt sich, Right-Spalte (Preis + Plus gestapelt) rechts. align-items: start damit Nr + Right oben sitzen, nicht vertikal zentriert. */ display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; cursor: pointer; transition: all 0.15s; position: relative; text-align: left; width: 100%; } .sf-product:hover { border-color: var(--brand); box-shadow: var(--shadow-md); } .sf-product:active { transform: scale(0.99); } .sf-product-info { min-width: 0; display: flex; flex-direction: column; } .sf-product-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; } .sf-product-name { font-weight: 700; font-size: 15.5px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.2; } /* Linke Grid-Spalte: Container für Nr + optionalen Mini-Thumb (oder Icon-Fallback). Min-width: 50px damit Cards mit/ohne Bild gleich eingerückt sind, sonst würde das Layout zwischen den Cards wackeln. */ .sf-product-left { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 60px; padding-top: 6px; } .sf-product-no { font-family: 'Mona Sans', ui-monospace, monospace; font-size: 11px; color: var(--text-soft); font-weight: 600; text-align: center; line-height: 1; } .sf-product-no[aria-hidden="true"] { /* Card ohne Nummer — Span belegt trotzdem Layout-Höhe damit Thumb darunter auf gleicher Höhe wie bei Cards mit Nummer beginnt. */ visibility: hidden; } .sf-product-thumb { width: 60px; height: 60px; border-radius: 8px; background: var(--bg); padding: 5px; box-sizing: border-box; overflow: hidden; display: block; flex-shrink: 0; } .sf-product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 6px; /* Multipliziert das Bild mit dem creme-Background des Wrappers — weiße Bild-Hintergründe verschwinden, Produkt sitzt visuell „eingefügt" in der Card. Wrapper-Element ist Pflicht: mix-blend-mode wirkt gegen den parent- Background, nicht gegen `background:` am IMG selbst. */ mix-blend-mode: multiply; } .sf-product-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 30px; line-height: 1; opacity: 0.95; background: var(--bg); border-radius: 10px; } .sf-badge-new { background: var(--brand); color: white; padding: 2px 7px; border-radius: 999px; font-family: 'Mona Sans', ui-monospace, monospace; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .sf-product-desc { font-size: 12.5px; color: var(--text-soft); line-height: 1.45; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sf-allergens { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; } .sf-allergen-code { background: var(--cream-2); color: var(--text-soft); font-family: 'Mona Sans', ui-monospace, monospace; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 6px; min-width: 22px; text-align: center; } .sf-product-price { font-weight: 700; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; /* Steht jetzt rechts oben in `.sf-product-right` — kein margin-top: auto mehr nötig (das war nur sinnvoll als der Block in der linken Spalte unten stand). Right-aligned damit der Preis-Text bündig zur rechten Card-Kante endet. */ display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; white-space: nowrap; } .sf-product-price .from { font-size: 12px; color: var(--text-soft); font-weight: 500; margin-right: 2px; text-transform: lowercase; } /* Promotion-Anzeige auf der Produkt-Card: durchgestrichener Original-Preis neben dem reduzierten. Backend setzt `promotion_card_unit_cents` nur wenn die Promotion auf alle Varianten greift (kein variant_label gesetzt) — sonst bleibt der Card-Preis Original und das Variant-Highlighting kommt im Modal. Aktions-Akzentfarbe Orange (#f59e0b-Familie) damit's tenant-agnostisch funktioniert (Brand-Farbe ist Tenant-spezifisch). */ .sf-product-price-strike { font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; } .sf-product-price-promo { color: #b45309; font-weight: 800; } /* Wrapper-Container der den flex-Zeilen-Umbruch GARANTIERT macht — Pill innen bleibt content-basiert (kein full-width). `flex: 0 0 100%` (grow 0, shrink 0, basis 100%) ist die robusteste Form: nur `flex-basis: 100%` reicht oft nicht weil grow/shrink das überschreiben können je nach Browser-Layout-Pass. */ .sf-product-promo-row { flex: 0 0 100%; display: block; margin-top: 2px; order: 99; /* sicherheitshalber ans Ende der flex-Items */ } /* Card-Pill für aktive Promotion. Andere Farbe als sf-badge-new damit bei beidem-an die Pills sich unterscheiden. */ .sf-badge-promo { display: inline-flex; align-items: center; background: #f59e0b; color: white; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; } .sf-product-right { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; /* Bild ist 2026-05-03 raus — Spalte enthält jetzt Preis (oben) + Plus-Btn (unten direkt darunter, normal im Flow). Min-Width damit lange Preise (z.B. „ab 14,90 €") nicht umbrechen. */ min-width: 80px; gap: 12px; } .sf-product-img { width: 96px; height: 96px; border-radius: 14px; background: var(--cream-2); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--shadow-sm); position: relative; } .sf-product-img img { width: 100%; height: 100%; object-fit: cover; } .sf-product-img-placeholder { font-size: 40px; line-height: 1; opacity: 0.85; filter: saturate(0.9); } .sf-add-btn { /* 2026-05-03: aus absolute-Positionierung raus — Plus-Btn sitzt jetzt normal im Layout-Flow direkt unter dem Preis (in `.sf-product-right`- Spalte). Vorher hing der Btn am Bild-Bottom-Right via negative offsets, ohne Bild war's quirky. */ width: 36px; height: 36px; background: var(--ink); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px -2px rgba(0,0,0,0.18); transition: transform 0.1s, background 0.15s; flex-shrink: 0; } .sf-add-btn:hover { background: var(--brand); } .sf-add-btn:active { transform: scale(0.92); } .sf-add-btn svg { width: 16px; height: 16px; stroke-width: 2.5; } /* ============================================================ Cart-Drawer rechts ============================================================ */ .sf-cart { position: sticky; top: 88px; /* Kein stretch durch Grid — Cart nimmt natürliche Content-Höhe, damit leerer Cart kompakt bleibt statt auf volle Spaltenhöhe zu wachsen */ align-self: start; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); /* padding-bottom: 0 — Sticky-Foot übernimmt sein eigenes padding, sonst entsteht eine transparente Lücke unter dem Foot beim Scroll-Ende. */ padding: 20px 20px 0; max-height: calc(100vh - 110px); overflow-y: auto; box-shadow: var(--shadow-sm); } .sf-cart-head { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 16px; } .sf-cart-empty { text-align: center; padding: 40px 12px 20px; color: var(--text-soft); } .sf-cart-empty svg { width: 56px; height: 56px; color: var(--text-muted); margin-bottom: 14px; opacity: 0.6; } .sf-cart-empty-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 6px; } .sf-cart-empty-sub { font-size: 13px; line-height: 1.5; } /* Wann? Picker im Cart */ .sf-cart-when { margin-bottom: 14px; } .sf-cart-when-head { font-size: 12px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; } .sf-cart-when-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .sf-when-btn { padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); cursor: pointer; text-align: left; transition: border-color 0.12s, background 0.12s; display: block; } .sf-when-btn:hover:not(:disabled) { border-color: var(--text-soft); } .sf-when-btn.active { border-color: var(--brand); background: var(--brand-soft); } .sf-when-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sf-when-btn-title { font-weight: 700; font-size: 13.5px; line-height: 1.2; } .sf-when-btn-sub { margin-top: 2px; font-size: 11.5px; color: var(--text-soft); line-height: 1.3; } .sf-when-btn.active .sf-when-btn-sub { color: var(--brand-dark); } /* Picker-Box */ .sf-when-picker { margin-top: 10px; padding: 12px; background: var(--cream-2); border-radius: 12px; } /* Tag-Tabs (pillen-artig, horizontal scrollbar) */ .sf-when-days { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 10px; } .sf-when-days::-webkit-scrollbar { display: none; } .sf-when-day { flex: 0 0 auto; padding: 6px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; text-align: center; min-width: 64px; transition: background 0.1s, border-color 0.1s, transform 0.05s; } .sf-when-day:hover { border-color: var(--text-soft); } .sf-when-day.active { background: var(--ink); border-color: var(--ink); color: white; } .sf-when-day-top { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-soft); line-height: 1.2; } .sf-when-day.active .sf-when-day-top { color: rgba(255,255,255,0.75); } .sf-when-day-bot { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-top: 1px; } .sf-when-day.active .sf-when-day-bot { color: white; } /* Info-Zeile: Ein-Tages-Fall (z.B. nur "Morgen 21.04.") */ .sf-when-day-info { display: flex; align-items: baseline; gap: 6px; padding: 8px 12px; background: var(--brand-soft); border: 1px solid rgba(200,55,45,0.15); border-radius: 10px; font-size: 13px; color: var(--ink); width: 100%; } .sf-when-day-info strong { font-weight: 700; } .sf-when-day-info-sub { font-family: 'Mona Sans', ui-monospace, monospace; font-size: 12px; color: var(--text-soft); margin-left: auto; } /* Slot-Container (alter .sf-when-slot nur noch für Empty/Loading-State) */ .sf-when-slots { display: block; } /* Stunden- und Minuten-Labels */ .sf-when-hours-label, .sf-when-mins-label { font-family: 'Mona Sans', ui-monospace, monospace; font-size: 10.5px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin: 10px 2px 6px; } .sf-when-hours-label:first-child { margin-top: 0; } /* Stunden-Pills (horizontal scrollbar) */ .sf-when-hours { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; scroll-snap-type: x mandatory; } .sf-when-hours::-webkit-scrollbar { display: none; } .sf-when-hour { flex: 0 0 auto; padding: 7px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 9px; font-family: 'Mona Sans', ui-monospace, monospace; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; scroll-snap-align: start; transition: background 0.1s, border-color 0.1s, transform 0.05s; display: inline-flex; align-items: baseline; gap: 4px; } .sf-when-hour-suf { font-size: 10px; font-weight: 500; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .sf-when-hour:hover { border-color: var(--ink); } .sf-when-hour.active { background: var(--ink); border-color: var(--ink); color: var(--white); } .sf-when-hour.active .sf-when-hour-suf { color: var(--white); opacity: 0.6; } .sf-when-hour:active { transform: scale(0.97); } /* Minuten-Grid (4 Spalten) */ .sf-when-mins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .sf-when-min { padding: 10px 4px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; font-family: 'Mona Sans', ui-monospace, monospace; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; text-align: center; font-variant-numeric: tabular-nums; transition: background 0.1s, border-color 0.1s, transform 0.05s; } .sf-when-min:hover:not(:disabled) { border-color: var(--ink); } .sf-when-min.selected { background: var(--brand); border-color: var(--brand); color: white; } .sf-when-min.past, .sf-when-min:disabled { color: var(--text-muted); text-decoration: line-through; background: var(--cream-2); cursor: not-allowed; opacity: 0.55; } .sf-when-min:active:not(:disabled) { transform: scale(0.96); } .sf-when-empty, .sf-when-loading { grid-column: 1 / -1; padding: 18px 12px; color: var(--text-soft); font-size: 13px; text-align: center; } /* Bestätigung */ .sf-when-confirm { margin-top: 10px; padding: 9px 12px; background: var(--green-soft); color: #065f46; border-radius: 8px; font-size: 12.5px; display: flex; align-items: center; gap: 6px; } .sf-when-check { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: var(--green); color: white; border-radius: 50%; font-size: 10px; font-weight: 700; flex-shrink: 0; } /* Zugeklappter Zustand nach Zeit-Auswahl: Picker weg, nur die kompakte LIEFERZEIT-Card sichtbar (siehe `.sf-cart-picked-card`). Der Picker bleibt im DOM (JS-State etc.), ist nur versteckt. */ .sf-when-picker.is-collapsed { display: none; } /* `.sf-when-picked` ist nur noch ein JS-Marker-Hook auf der LIEFERZEIT-Card (damit der „ändern"-Klick den Picker wieder aufklappen + die Card entfernen kann). Kein eigenes Styling mehr — die Card holt sich alles aus `.sf-cart-picked-card`. */ .sf-when-warning { margin-top: 8px; padding: 10px 12px; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 8px; font-size: 12.5px; } /* Kompakte „LIEFERZEIT"/„LIEFERORT"-Cards: ersetzen die alten breiten grünen Boxen („Zeit gewählt: …" + „Lieferung nach 65185") durch eine 2-Spalten-Reihe mit Mini-Cards. Bei nur einer Card → Single-Column. */ .sf-cart-picked-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; margin-top: 8px; } .sf-cart-picked-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--white); border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); transition: border-color 0.12s, background 0.12s; min-width: 0; } .sf-cart-picked-card:hover { border-color: var(--text-soft); } .sf-cart-picked-check { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--green); color: white; border-radius: 50%; font-size: 11px; font-weight: 700; flex-shrink: 0; } .sf-cart-picked-info { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .sf-cart-picked-label { font-size: 10px; font-weight: 600; color: var(--text-soft); letter-spacing: 0.05em; text-transform: uppercase; } .sf-cart-picked-value { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-cart-picked-arrow { font-size: 18px; line-height: 1; color: var(--text-soft); flex-shrink: 0; } /* Order-Type-Toggle im Cart */ .sf-cart-ot { display: flex; gap: 4px; background: var(--cream-2); padding: 4px; border-radius: 12px; margin-bottom: 14px; } /* Auf Desktop kleben die Tabs sonst direkt am sticky-Head — auf Mobile passt's schon weil der Sheet-Top-Padding größer ist. */ @media (min-width: 721px) { .sf-cart-ot { margin-top: 12px; } } .sf-cart-ot-btn { flex: 1; padding: 8px 6px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; transition: background 0.12s, color 0.12s; } .sf-cart-ot-btn svg { width: 13px; height: 13px; stroke-width: 2; } .sf-cart-ot-btn.active { background: var(--ink); color: white; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } /* Cart-Items */ .sf-cart-items { display: flex; flex-direction: column; } .sf-cart-item { padding: 12px; border: 1px solid var(--line); border-radius: 15px; margin: 5px 0; box-shadow: 3px 3px 10px var(--line); display: flex; flex-direction: column; gap: 8px; } @keyframes sf-flash { 0% { background: transparent; } 30% { background: var(--brand-soft); } 100% { background: transparent; } } .sf-cart-item.flash { /* Nur die Background-Animation — Margin/Padding/Radius kommt jetzt aus der Card-Optik der Base-Klasse. Vorher hatte die Flash-Variante `margin: 0 -12px` damit der Flash-Hintergrund die Cart-Breite voll überzog (alte Variante hatte `padding: 12px 0` ohne horizontalen Padding). Das hat jetzt das neu hinzugefügte Item visuell schmaler als die anderen gemacht. */ animation: sf-flash 1.2s ease-out; } /* Cart-Item-Kopf ist jetzt ein Button — Klick öffnet Produkt-Modal im Edit-Modus. */ .sf-cart-item-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; padding: 0; background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; } .sf-cart-item-head:hover .sf-cart-item-name { color: var(--brand); } .sf-cart-item-head:hover .sf-cart-item-edit-pen { opacity: 1; } .sf-cart-item-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.25; display: inline-flex; align-items: center; gap: 4px; transition: color 0.12s; } .sf-cart-item-edit-pen { width: 13px; height: 13px; opacity: 0.45; color: var(--text-soft); flex-shrink: 0; transition: opacity 0.12s; } .sf-cart-item-price { font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .sf-cart-item-meta { font-size: 12px; color: var(--text-soft); line-height: 1.4; } /* Promotions V1 (Phase C): Pill am Cart-Item + durchgestrichener Original- Preis daneben dem reduzierten. Wird vom _cart.php, checkout/index.php UND order/show.php geteilt — alle drei nutzen die gleichen drei Klassen. */ .sf-cart-item-promo, .co-summary-item-promo, .ord-item-promo { margin-top: 4px; } .sf-cart-item-promo-pill { display: inline-flex; align-items: center; background: #f59e0b; color: white; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; } .sf-cart-item-price-strike { display: inline-block; font-size: 12.5px; font-weight: 500; color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; margin-right: 4px; } .sf-cart-item-price-promo { color: #b45309; font-weight: 800; } /* Voucher-Block: gesperrt durch Promotion. Plain-Sprache-Hint drüber + Form-Inputs visuell deaktiviert (50% opacity + nicht-fokussierbar). */ .sf-voucher-blocked { padding: 10px 12px; background: #fef3c7; border: 1px solid #fbbf24; border-radius: 10px; display: flex; flex-direction: column; gap: 8px; } .sf-voucher-blocked-hint { font-size: 12.5px; font-weight: 600; color: #78350f; line-height: 1.35; } .sf-voucher-form.is-disabled { opacity: 0.5; pointer-events: none; } /* Das „+" zeichnen wir im HTML per + — kein doppeltes Plus per Pseudo-Element davor (sonst steht „+ + Salami" im Warenkorb). */ /* Abgewählte Zutaten („− ohne Zwiebeln"): rot */ .sf-cart-item-removed .minus { color: var(--red, #dc2626); font-weight: 700; display: inline-block; width: 10px; } .sf-cart-item-removed { color: #8a1f1a; } /* ---- Pro-Produkt Notiz-Box (gelbe Kasten mit ✎ ✕) ---- */ .sf-cart-note-add { margin-top: 3px; padding: 3px 0; background: transparent; border: 0; color: var(--text-soft); font-size: 11.5px; font-weight: 500; cursor: pointer; text-align: left; } .sf-cart-note-add:hover { color: var(--brand); } .sf-cart-note-box { margin-top: 8px; padding: 8px 10px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; color: #78350f; } .sf-cart-note-head { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 4px; } .sf-cart-note-label { flex: 1; } .sf-cart-note-icon-btn { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #78350f; cursor: pointer; border-radius: 5px; padding: 3px; } .sf-cart-note-icon-btn:hover { background: rgba(120,53,15,0.12); } .sf-cart-note-icon-btn svg { width: 14px; height: 14px; } .sf-cart-note-text { font-size: 12.5px; line-height: 1.45; font-weight: 500; white-space: pre-wrap; word-break: break-word; } /* ---- Notiz-Modal ---- */ .sf-note-modal { position: fixed; inset: 0; z-index: 300; display: none; } .sf-note-modal[hidden] { display: none !important; } .sf-note-modal.open { display: flex; align-items: flex-end; justify-content: center; } @media (min-width: 720px) { .sf-note-modal.open { align-items: center; } } .sf-note-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); } .sf-note-modal-box { position: relative; background: var(--white); border-radius: 16px 16px 0 0; padding: 0; width: 100%; max-width: 440px; max-height: 85vh; overflow: hidden; box-shadow: 0 -8px 32px rgba(0,0,0,0.2); display: flex; flex-direction: column; animation: sfNoteIn 0.18s ease-out; } @media (min-width: 720px) { .sf-note-modal-box { border-radius: 16px; } } @keyframes sfNoteIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .sf-note-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); } .sf-note-modal-title { font-weight: 700; font-size: 16px; color: var(--ink); } .sf-note-modal-close { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--cream-2); border: 0; border-radius: 8px; color: var(--text); cursor: pointer; } .sf-note-modal-close svg { width: 16px; height: 16px; } .sf-note-modal-body { padding: 14px 18px 6px; } .sf-note-modal-prod { font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 10px; } .sf-note-modal-input { width: 100%; min-height: 80px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 15px; color: var(--ink); outline: none; resize: vertical; -webkit-appearance: none; appearance: none; } .sf-note-modal-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15); } .sf-note-modal-input::placeholder { color: var(--text-muted); opacity: 0.6; } .sf-note-modal-count { text-align: right; font-size: 11px; color: var(--text-muted); margin-top: 4px; } .sf-note-modal-actions { display: flex; gap: 10px; padding: 12px 18px 18px; padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)); } .sf-note-modal-cancel, .sf-note-modal-save { flex: 1; padding: 12px; border: 0; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; } .sf-note-modal-cancel { background: var(--cream-2); color: var(--ink); } .sf-note-modal-cancel:hover { background: var(--line); } .sf-note-modal-save { background: var(--brand); color: #fff; } .sf-note-modal-save:hover { filter: brightness(0.95); } .sf-cart-item-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .sf-cart-del { width: 28px; height: 28px; border-radius: 7px; background: var(--cream-2); color: var(--text-soft); display: flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; } .sf-cart-del:hover { background: #fdecea; color: #c8372d; } .sf-cart-del svg { width: 14px; height: 14px; stroke-width: 2; } .sf-cart-qty { display: flex; align-items: center; gap: 8px; background: var(--cream-2); padding: 3px; border-radius: 999px; } .sf-cart-qty button { width: 26px; height: 26px; border-radius: 50%; background: var(--white); color: var(--ink); display: flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; } .sf-cart-qty button:hover { background: var(--brand); color: white; } .sf-cart-qty button svg { width: 12px; height: 12px; stroke-width: 2.5; } .sf-cart-qty-val { min-width: 20px; text-align: center; font-weight: 700; font-size: 13.5px; font-variant-numeric: tabular-nums; } /* Totals + CTA */ .sf-cart-totals { /* Kein Trenn-Strich oben — `.sf-cart-rec` hat bereits einen eigenen Border-Frame, eine zweite Linie wirkt visuell überladen. Kompaktes Top-Spacing damit Totals optisch nah am vorherigen Block (Voucher bzw. Recommendations) sitzen. Galt vorher nur Mobile, jetzt vereinheitlicht für Desktop + Mobile. */ margin-top: 3px; padding-top: 14px; display: flex; flex-direction: column; gap: 6px; } .sf-cart-totals-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; } .sf-cart-totals-row.muted { color: var(--text-soft); font-size: 12.5px; } .sf-cart-totals-row.total { font-size: 16px; font-weight: 700; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line-soft); } .sf-cart-cta { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 14px; padding: 13px 18px; background: var(--brand); color: white; border-radius: 12px; font-weight: 700; font-size: 14.5px; transition: background 0.12s; font-variant-numeric: tabular-nums; } .sf-cart-cta:hover { background: var(--brand-dark); } /* Cart-Head mit Close (Close nur mobile) */ .sf-cart-head { display: flex; align-items: center; justify-content: space-between; } .sf-cart-close { display: none; width: 32px; height: 32px; border-radius: 50%; background: var(--cream-2); color: var(--ink); align-items: center; justify-content: center; } .sf-cart-close svg { width: 15px; height: 15px; stroke-width: 2.5; } /* ============================================================ Mobile-Cart-Pill (Lieferando-Style) ============================================================ */ .sf-cart-pill { display: none; position: fixed; /* iOS: respektiere Home-Indicator + Safari-URL-Bar */ bottom: calc(16px + env(safe-area-inset-bottom)); left: 16px; right: 16px; z-index: 45; background: var(--brand); color: white; padding: 12px 20px 12px 14px; border-radius: 999px; box-shadow: 0 10px 28px rgba(0,0,0,0.28); align-items: center; gap: 12px; font-weight: 700; font-size: 14.5px; transition: background 0.12s, transform 0.12s; } .sf-cart-pill:hover { background: var(--brand-dark); } .sf-cart-pill:active { transform: scale(0.98); } .sf-cart-pill-icon { position: relative; width: 34px; height: 34px; background: var(--white); color: var(--brand); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sf-cart-pill-icon svg { width: 16px; height: 16px; } .sf-cart-pill-count { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; background: #fff; color: #0a0a0a; font-size: 11px; font-weight: 700; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; border: 2px solid var(--brand); } .sf-cart-pill-label { flex: 1; text-align: center; } .sf-cart-pill-total { font-variant-numeric: tabular-nums; flex-shrink: 0; } /* ============================================================ PLZ-Zone im Cart ============================================================ */ .sf-cart-zone { border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 13px; } .sf-cart-zone-ok { background: var(--green-soft); color: #0a6a3c; } .sf-cart-zone-err { background: #fdecea; color: #9a2924; } .sf-cart-zone-row { display: flex; align-items: center; gap: 8px; line-height: 1.35; } .sf-cart-zone-row svg { width: 15px; height: 15px; flex-shrink: 0; } .sf-cart-zone-row span { flex: 1; } .sf-cart-zone-sub { margin-top: 4px; padding-left: 23px; font-size: 12px; opacity: 0.85; } .sf-cart-zone-edit { background: transparent; color: inherit; font-weight: 600; text-decoration: underline; padding: 0; font-size: inherit; } .sf-cart-zone-edit:hover { opacity: 0.75; } /* Abhol-Adress-Block im Cart (analog zu .sf-cart-zone-ok) */ .sf-cart-pickup { background: var(--green-soft); color: #0a6a3c; border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 13px; } .sf-cart-pickup-row { display: flex; align-items: center; gap: 8px; line-height: 1.35; } .sf-cart-pickup-row svg { width: 15px; height: 15px; flex-shrink: 0; } .sf-cart-pickup-addr { margin-top: 4px; padding-left: 23px; font-size: 12.5px; color: inherit; opacity: 0.9; font-weight: 500; } .sf-cart-pickup-maps { display: inline-block; margin-top: 8px; margin-left: 23px; padding: 6px 10px; background: rgba(255,255,255,0.7); border-radius: 8px; color: #0a6a3c; font-size: 12px; font-weight: 700; text-decoration: none; transition: background 0.12s; } .sf-cart-pickup-maps:hover { background: var(--white); } /* Gutschein-Block im Cart */ .sf-cart-voucher { margin-bottom: 14px; } .sf-voucher-form { display: flex; gap: 6px; } .sf-voucher-form input { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 13.5px; font-family: 'Mona Sans', ui-monospace, monospace; letter-spacing: 0.06em; outline: none; color: var(--ink); min-width: 0; } .sf-voucher-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(200,55,45,0.12); } .sf-voucher-form button { padding: 10px 14px; background: var(--ink); color: white; border-radius: 9px; font-size: 13px; font-weight: 700; flex-shrink: 0; } .sf-voucher-form button:hover { background: #000; } .sf-voucher-err-msg { margin-top: 6px; padding: 8px 10px; background: #fdecea; color: #9a2924; font-size: 12.5px; border-radius: 8px; } .sf-voucher-active { padding: 10px 12px; background: var(--green-soft); border: 1px solid #b0e5c7; border-radius: 10px; } .sf-voucher-main { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .sf-voucher-left { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .sf-voucher-badge { font-family: 'Mona Sans', ui-monospace, monospace; font-weight: 700; color: #0a6a3c; font-size: 13px; letter-spacing: 0.04em; } .sf-voucher-off { font-weight: 800; color: #0a6a3c; font-variant-numeric: tabular-nums; white-space: nowrap; } .sf-voucher-desc { font-size: 12px; color: #1d724e; margin-top: 3px; opacity: 0.85; } .sf-voucher-remove { background: transparent; color: #0a6a3c; font-size: 11px; font-weight: 600; text-decoration: underline; padding: 2px 4px; flex-shrink: 0; } .sf-voucher-remove:hover { opacity: 0.7; } .sf-voucher-error { padding: 10px 12px; background: #fef3c7; border: 1px solid #fbbf24; border-radius: 10px; position: relative; } .sf-voucher-error-row { display: flex; justify-content: space-between; align-items: center; color: #92400e; font-size: 13px; padding-right: 60px; } .sf-voucher-error-msg { margin-top: 4px; font-size: 12px; color: #92400e; } .sf-chip-free { background: var(--green-soft); color: var(--green); padding: 1px 8px; border-radius: 999px; font-weight: 600; font-size: 11.5px; } /* PLZ-Input-Form im Cart */ .sf-cart-plz { background: var(--cream-2); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; } .sf-cart-plz-label { font-size: 12.5px; font-weight: 600; color: var(--ink); display: block; margin-bottom: 8px; } .sf-cart-plz-row { display: flex; gap: 8px; } .sf-cart-plz-row input { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); font-size: 14px; font-variant-numeric: tabular-nums; outline: none; transition: border-color 0.12s; } .sf-cart-plz-row input:focus { border-color: var(--brand); } .sf-cart-plz-row button { padding: 10px 14px; background: var(--ink); color: white; border-radius: 9px; font-weight: 600; font-size: 13px; transition: background 0.12s; } .sf-cart-plz-row button:hover { background: var(--brand); } /* Noch-X-bis-Mindestbestellung-Hinweis */ .sf-cart-notice { margin-top: 12px; margin-bottom: 12px; /* Abstand zum nachfolgenden Gutschein-Block */ padding: 10px 12px; background: var(--orange-soft); color: var(--orange); border-radius: 10px; font-size: 12.5px; font-weight: 500; text-align: center; } .sf-cart-cta.disabled { background: var(--line) !important; color: var(--text-muted); cursor: not-allowed; pointer-events: none; } /* „Was fehlt"-Hint überm Bezahlen-Button. Tap-bar (Mobile) als Button rendert, Klick scrollt + fokussiert das passende Eingabefeld (PLZ/Wunschzeit). */ .sf-cart-cta-hint { display: block; width: 100%; margin: 0 0 8px; padding: 10px 14px; background: #fef3c7; color: #78350f; border: 1px solid #fbbf24; border-radius: 10px; font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.4; text-align: center; cursor: pointer; transition: background 0.12s, border-color 0.12s; } .sf-cart-cta-hint:hover { background: #fde68a; border-color: #f59e0b; } .sf-cart-cta-hint-static { cursor: default; } .sf-cart-cta-hint-static:hover { background: #fef3c7; border-color: #fbbf24; } /* ============================================================ CART — Empfehlungs-Block (Cross-Sell) + Sticky-Mobile-Layout 2026-04-26 hinzugefügt. Klassen-Prefix `sf-cart-rec-` / `sf-cart-foot`. Sticky-Bottom greift NUR auf Mobile (≤720 px). ============================================================ */ /* Replacement-Klassen für ehemals inline-styles (User-Vorgabe „nichts inline") */ .sf-cart-totals-row-discount { color: var(--brand); } .sf-cart-notice-warn { background: #fef3c7; color: #78350f; border: 1px solid #fbbf24; } /* Empfehlungs-Block — horizontale Karten-Reihe vor dem Voucher */ .sf-cart-rec { margin: 7px 0 16px; padding: 14px 16px 12px; background: var(--off-white, #fafafa); border: 1px solid var(--line-soft); border-radius: 15px; } .sf-cart-rec-title { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); display: flex; align-items: center; gap: 6px; } .sf-cart-rec-emoji { font-size: 14px; text-transform: none; } .sf-cart-rec-list { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; margin: 0 -4px; /* iOS-Smooth-Scroll + Schatten-Tease am rechten Rand für „mehr da"-Hinweis */ -webkit-overflow-scrolling: touch; } .sf-cart-rec-list::-webkit-scrollbar { height: 4px; } .sf-cart-rec-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } .sf-cart-rec-card { position: relative; flex: 0 0 140px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 10px; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s; margin: 0 4px; } .sf-cart-rec-card:hover { border-color: var(--brand); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.08); } .sf-cart-rec-card:active { transform: scale(0.98); } .sf-cart-rec-card:disabled { opacity: 0.6; cursor: progress; } .sf-cart-rec-badge { position: absolute; top: 6px; left: 6px; z-index: 2; background: var(--brand); color: var(--white); font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; } .sf-cart-rec-img { width: 100%; aspect-ratio: 1 / 1; background: var(--bg); border-radius: 8px; overflow: hidden; display: grid; place-items: center; } .sf-cart-rec-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sf-cart-rec-img-empty { font-size: 28px; opacity: 0.5; } .sf-cart-rec-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sf-cart-rec-name { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sf-cart-rec-price { font-size: 12px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; } .sf-cart-rec-add { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: var(--white); display: grid; place-items: center; z-index: 2; box-shadow: 0 2px 6px -2px rgba(200, 55, 45, 0.5); transition: background 0.12s; } .sf-cart-rec-add svg { width: 14px; height: 14px; } .sf-cart-rec-card:hover .sf-cart-rec-add { background: var(--brand-dark); } /* Mobile-Karten etwas schmaler */ @media (max-width: 720px) { .sf-cart-rec { padding: 12px 12px 10px; } .sf-cart-rec-card { flex-basis: 124px; } } /* Sticky-Wrapper für Totals + CTA — auf Desktop UND Mobile sticky. Desktop-Cart hat eigenen scroll (overflow-y: auto), Mobile-Cart ist fullscreen-overlay mit eigenem scroll. */ .sf-cart-foot { display: block; } /* Desktop (>720 px): Header sticky-top + Foot sticky-bottom innerhalb des Cart-Scroll-Containers. Cart hat `padding: 20px 20px 0` — der Foot übernimmt das Bottom-Padding selbst, sodass keine transparente Lücke unter dem Foot durchschimmert. */ @media (min-width: 721px) { .sf-cart-head { position: sticky; top: -20px; z-index: 11; background: var(--white); margin: -20px -20px 0; padding: 20px 20px 10px; border-bottom: 1px solid var(--line); } .sf-cart-foot { position: sticky; bottom: 0; z-index: 10; background: var(--white); margin: 0 -20px; padding: 10px 20px 20px; border-top: 1px solid var(--line); box-shadow: 0 -4px 14px -6px rgba(0, 0, 0, 0.08); } .sf-cart-foot .sf-cart-totals { margin-bottom: 10px; padding-top: 4px; } /* Empty-State auf Desktop braucht eigenes Bottom-Padding, weil .sf-cart keinen mehr hat */ .sf-cart-empty { padding-bottom: 24px; } } @media (max-width: 720px) { /* Sheet-Side-Padding ist 18px (siehe .sf-cart Mobile-Override) — Header und Foot brauchen darum -18px Margin links/rechts/oben bzw. unten, damit sie den transparenten Padding-Bereich des Sheets überdecken und scrollender Content nicht durchschimmert. */ .sf-cart-foot { position: sticky; bottom: 0; background: var(--white); margin: 0 -18px 0; /* padding-bottom inkl. Safe-Area-Inset, weil .sf-cart selbst keinen Bottom-Padding mehr hat. So deckt der Foot die komplette Bottom-Zone bis zum Home-Indicator weiß ab — Voucher kann nicht mehr darunter durchscheinen. */ padding: 0 18px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px -6px rgba(0, 0, 0, 0.08); z-index: 10; } .sf-cart-foot .sf-cart-totals { margin-bottom: 10px; padding-top: 10px; } /* Voucher (= letzter scrollbarer Inhalt vor Sticky-Foot) braucht genug Atemraum, sonst wird er optisch vom Sticky-Bar bedrängt */ .sf-cart .sf-cart-voucher { margin-bottom: 24px; } /* Header sticky-top — deckt den 18-px-Sheet-Top-Padding komplett ab, damit beim Scrollen kein Content durchschimmert. Background opak weiß, z-index über dem Foot (CTA-Schatten darf den Header nicht überdecken). */ .sf-cart-head { position: sticky; top: -18px; z-index: 11; background: var(--white); border-bottom: 1px solid var(--line); margin: -18px -18px 0; padding: 10px 18px 7px; } } /* ============================================================ PLZ-Modal (eigenständig, vor Produkt-Modal) ============================================================ */ .sf-plz-modal { position: fixed; inset: 0; z-index: 110; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 10, 10, 0.55); backdrop-filter: blur(4px); animation: sf-fade 0.15s ease-out; } .sf-plz-modal.open { display: flex; } .sf-plz-box { background: var(--white); border-radius: 18px; width: 100%; max-width: 420px; padding: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); animation: sf-slide-up 0.2s ease-out; position: relative; } .sf-plz-icon { width: 56px; height: 56px; background: var(--brand-soft); color: var(--brand); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .sf-plz-icon svg { width: 24px; height: 24px; } .sf-plz-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: none; background: var(--cream-2); border-radius: 50%; font-size: 24px; line-height: 1; color: var(--ink); cursor: pointer; transition: background 0.12s; display: flex; align-items: center; justify-content: center; padding: 0; } .sf-plz-close:hover { background: var(--line); } /* Geschlossen-Strip oben im PLZ-Modal */ .sf-plz-closed-strip { margin: 0 -24px 16px; padding: 10px 20px; background: #fef3c7; border-top: 1px solid #fbbf24; border-bottom: 1px solid #fbbf24; font-size: 12.5px; color: #78350f; line-height: 1.4; border-radius: 0; } .sf-plz-closed-strip strong { color: #451a03; font-weight: 700; } .sf-plz-box:has(.sf-plz-closed-strip) { padding-top: 0; } .sf-plz-box:has(.sf-plz-closed-strip) .sf-plz-close { background: rgba(255,255,255,0.7); z-index: 2; } /* Closed-Modal Multi-Step (Intro → PLZ → Zeit) — Steps liegen als Geschwister im selben .sf-plz-box und werden über [hidden] umgeschaltet. */ .sf-cm-step[hidden] { display: none !important; } .sf-cm-step { /* Sanfte Einblende-Animation beim Step-Wechsel */ animation: sf-fade 0.18s ease-out; } /* Bestellart-Toggle in Step 1 — wenn Tenant beides anbietet, kann der Gast hier zwischen Lieferung/Abholung wechseln BEVOR es weiter zur PLZ/Zeit geht. */ .sf-cm-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 14px; } .sf-cm-mode-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; background: var(--white); border: 1.5px solid var(--line); border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color 0.12s, background 0.12s; } .sf-cm-mode-btn:hover { border-color: var(--text-soft); } .sf-cm-mode-btn.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); } .sf-cm-mode-ico { font-size: 14px; } /* Back-Button oben links (in PLZ + Zeit-Step). Subtil — der primäre Weg ist nach vorne. */ .sf-cm-back { position: absolute; top: 10px; left: 12px; border: 0; background: transparent; color: var(--text-soft); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 10px; border-radius: 8px; transition: background 0.12s, color 0.12s; z-index: 2; } .sf-cm-back:hover { color: var(--ink); background: var(--off-white); } /* Slot-Picker-Container im Popup — gleicher Picker-Code wie im Cart, nur mit etwas mehr Atemraum. Höhe begrenzt + scrollbar damit auf kleinen iPhones der „Weiter"/CTA-Bereich nicht aus dem Bild läuft. */ .sf-cm-picker { margin-top: 6px; max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .sf-cm-picker .sf-when-days, .sf-cm-picker .sf-when-slots { /* Innenpadding entfällt — Container bringt's */ } /* „✓ Übernehmen"-Button im Closed-Modal-When-Step (Pendant zur Confirm-Card darüber). User muss aktiv bestätigen statt Auto-Apply beim Slot-Klick. */ .sf-cm-apply { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 14px 18px; background: var(--brand); color: #fff; border: none; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; transition: filter 0.12s, transform 0.06s; box-shadow: 0 4px 14px -6px rgba(10, 138, 78, 0.45); } .sf-cm-apply:hover { filter: brightness(1.05); } .sf-cm-apply:active { transform: translateY(1px); } .sf-cm-apply:disabled { opacity: 0.55; cursor: not-allowed; filter: none; } .sf-cm-apply[hidden] { display: none; } /* Mobile: Closed-Modal als Bottom-Sheet, damit der Picker (Tag-Tabs + Slot-Grid) auf kleinen Screens lesbar bleibt und der Daumen-Reach gut ist. */ @media (max-width: 600px) { .sf-cm-modal { align-items: flex-end; padding: 0; } .sf-cm-modal .sf-plz-box { max-width: 100%; border-radius: 20px 20px 0 0; padding: 22px 22px calc(22px + env(safe-area-inset-bottom)); max-height: 92dvh; overflow-y: auto; } .sf-cm-back { top: 14px; } } /* Closed-Modal: Action-Buttons */ .sf-closed-modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .sf-closed-modal-actions .sf-plz-submit { margin-top: 0; } #sfClosedModalBrowse { padding: 10px 12px; background: transparent; color: var(--text-soft); font-size: 13px; font-weight: 600; border-radius: 8px; text-decoration: none; } #sfClosedModalBrowse:hover { color: var(--ink); background: var(--off-white); } .sf-plz-title { font-size: 19px; font-weight: 700; text-align: center; letter-spacing: -0.02em; margin-bottom: 6px; color: var(--ink); } .sf-plz-sub { font-size: 13.5px; text-align: center; color: var(--text-soft); margin-bottom: 18px; line-height: 1.45; } .sf-plz-input { width: 100%; padding: 14px 16px; border: 2px solid var(--line); border-radius: 12px; font-size: 17px; font-weight: 600; letter-spacing: 0.05em; text-align: center; outline: none; font-variant-numeric: tabular-nums; margin-bottom: 12px; transition: border-color 0.12s; } .sf-plz-input:focus { border-color: var(--brand); } .sf-plz-submit { width: 100%; padding: 13px 18px; background: var(--brand); color: white; border-radius: 12px; font-weight: 700; font-size: 14.5px; margin-bottom: 10px; transition: background 0.12s; } .sf-plz-submit:hover { background: var(--brand-dark); } .sf-plz-submit:disabled { background: var(--line); color: var(--text-muted); cursor: not-allowed; } .sf-plz-alt { text-align: center; font-size: 13px; color: var(--text-soft); padding: 6px 0; } .sf-plz-alt button { color: var(--brand); font-weight: 600; padding: 0; } .sf-plz-alt button:hover { text-decoration: underline; } .sf-plz-err { background: #fdecea; color: #9a2924; padding: 10px 12px; border-radius: 9px; font-size: 12.5px; text-align: center; margin-bottom: 12px; display: none; } .sf-plz-err.show { display: block; } /* ============================================================ Checkout ============================================================ */ .co-wrap { max-width: 1440px; margin: 0 auto; width: 100%; padding: 28px 24px 60px; display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; gap: 32px; align-items: start; } /* h1 Checkout spannt über beide Grid-Spalten, damit die linke co-form und die rechte co-summary beide auf gleicher Höhe beginnen (unter dem h1). */ .co-wrap > .co-title { grid-column: 1 / -1; } /* Rechte Header-Gruppe (Back-Link + User-Chip nebeneinander). margin-left: auto schiebt den ganzen Block ans rechte Ende des Headers — der sf-header-inner hat sonst kein justify-content und würde alles links kleben lassen. */ .sf-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; } .co-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 8px; transition: background 0.12s, color 0.12s; } .co-back:hover { color: var(--ink); background: var(--cream-2); } .co-back svg { width: 14px; height: 14px; stroke-width: 2.2; } /* User-Chip im Header — kompakte Alternative zum großen „Angemeldet als"-Banner */ .co-user-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px; background: var(--green-soft, #dcfce7); color: #065f46; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: all 0.12s; max-width: 160px; } .co-user-chip:hover { border-color: #86efac; } .co-user-chip svg { width: 16px; height: 16px; flex-shrink: 0; } .co-user-chip-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Mini-Hinweis auf gespeicherte Adressen (nur wenn >1) */ .co-saved-addr-hint { font-size: 12.5px; color: var(--text-soft); padding: 8px 12px; background: var(--cream-2); border-radius: 8px; } .co-form { display: flex; flex-direction: column; gap: 24px; } /* ============================================================ Hero-Card: einzelne Box die Topbar + Title-Row + Meta-Cards bündelt. `overflow: hidden` damit der schwarze Topbar-Background sauber an den Card-Top-Corners abschneidet. ============================================================ */ .co-hero-card { grid-column: 1 / -1; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .co-hero-body { padding: 24px; display: flex; flex-direction: column; gap: 20px; } /* Login-Hint-Topbar (nur Gast). Sitzt als erstes Kind in der Hero-Card, übernimmt die rounded Top-Corners via Parent-overflow. */ .co-topbar { background: var(--ink); color: var(--white); width: 100%; } .co-topbar-inner { padding: 10px 24px; display: flex; align-items: center; gap: 16px; } .co-topbar-text { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; min-width: 0; } .co-topbar-text strong { font-weight: 700; } .co-topbar-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.85; } .co-topbar-cta { flex-shrink: 0; background: var(--white); color: var(--ink); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; text-decoration: none; transition: transform 0.12s, background 0.12s; } .co-topbar-cta:hover { background: var(--cream-2); transform: translateY(-1px); } /* Title-Row: h1+Subtitle links, Stepper rechts */ .co-title-row { grid-column: 1 / -1; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .co-title-block { min-width: 0; } .co-title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 4px; } /* Stepper: drei Steps mit Lines dazwischen. Done = grün ✓, Current = ink-Bg weiße Zahl, Future = grauer Outline-Kreis. */ .co-stepper { list-style: none; margin: 6px 0 0 0; padding: 0; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .co-stepper-step { display: flex; align-items: center; gap: 8px; } .co-stepper-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1.5px solid var(--line); color: var(--text-muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; } .co-stepper-dot svg { width: 14px; height: 14px; } .co-stepper-step.is-done .co-stepper-dot { background: #ecf8f1; border-color: #b4ddc3; color: #2a8857; } .co-stepper-step.is-current .co-stepper-dot { background: var(--ink); border-color: var(--ink); color: var(--white); } .co-stepper-label { font-size: 13px; color: var(--text-muted); font-weight: 500; } .co-stepper-step.is-done .co-stepper-label { color: #2a8857; font-weight: 600; } .co-stepper-step.is-current .co-stepper-label { color: var(--ink); font-weight: 700; } .co-stepper-line { width: 32px; height: 1.5px; background: var(--line); flex-shrink: 0; } .co-stepper-line.is-done { background: #b4ddc3; } /* Meta-Cards: Bestellart + Zeit (zwei Cards nebeneinander, span both grid cols) */ .co-meta-cards { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .co-meta-card { display: flex; align-items: center; gap: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; } .co-meta-card-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; } .co-meta-card-icon svg { width: 20px; height: 20px; } .co-meta-card-icon-type { background: #eef4ff; color: #2563eb; } .co-meta-card-icon-time { background: #fff7e6; color: #b45309; } .co-meta-card-icon-time.is-preorder { background: #fef3c7; color: #92400e; } .co-meta-card-text { flex: 1 1 auto; min-width: 0; } .co-meta-card-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); line-height: 1.2; margin-bottom: 2px; } .co-meta-card-value { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .co-meta-card-edit { flex-shrink: 0; font-size: 13px; color: var(--text-soft); text-decoration: underline; font-weight: 500; padding: 4px 6px; } .co-meta-card-edit:hover { color: var(--ink); } @media (max-width: 720px) { .co-meta-cards { grid-template-columns: 1fr; } .co-title-row { flex-direction: column; } .co-topbar-inner { padding: 8px 14px; } .co-topbar-text { font-size: 12px; gap: 8px; } /* Stepper auf Mobile: vertikal stack — Dot oben, Label drunter. Lines füllen den Rest der Zeile (flex: 1) damit Dots auf voller Breite verteilt sind. margin-top schiebt die Lines auf die Dot-Mitte (Dot 26px hoch ÷ 2 ≈ 13px). */ .co-stepper { margin-top: 0; align-items: flex-start; gap: 8px; width: 100%; } .co-stepper-step { flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; } .co-stepper-label { display: block; font-size: 11px; text-align: center; line-height: 1.2; } .co-stepper-line { flex: 1 1 auto; width: auto; min-width: 16px; margin-top: 12.25px; } } .co-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; /* Chips sahen wie frei schwebend aus — jetzt in einer hellen Karte wie die anderen Sections. Dadurch hat „ändern" auch klar einen Kontext. */ background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; } .co-type-chip, .co-time-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--cream-2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 600; } .co-type-chip svg, .co-time-chip svg { width: 14px; height: 14px; stroke-width: 2; } /* Vorbestellung: gelb-markant, damit klar ist dass es keine Sofortbestellung ist */ .co-time-chip.preorder { background: #fef3c7; border-color: #fbbf24; color: #78350f; } .co-time-chip.preorder svg { color: #b45309; } .co-chip-edit { font-size: 12px; color: var(--text-soft); text-decoration: underline; padding: 4px 8px; } .co-chip-edit:hover { color: var(--ink); } /* Login-Hinweis im Checkout (für Gäste) */ .co-login-hint { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 12px; text-decoration: none; color: #075985; transition: background 0.12s, border-color 0.12s; } .co-login-hint:hover { background: #e0f2fe; border-color: #7dd3fc; } .co-login-hint-icon { width: 40px; height: 40px; background: var(--white); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #0369a1; flex-shrink: 0; } .co-login-hint-icon svg { width: 20px; height: 20px; } .co-login-hint-text { flex: 1; line-height: 1.4; min-width: 0; } .co-login-hint-text strong { display: block; font-size: 14px; color: #0c4a6e; } .co-login-hint-text span { font-size: 12.5px; display: block; margin-top: 2px; } .co-login-hint-btn { padding: 8px 14px; background: #0369a1; color: white; border-radius: 8px; font-size: 13px; font-weight: 700; white-space: nowrap; flex-shrink: 0; } /* Bestätigung für eingeloggte Kunden */ .co-login-ok { padding: 10px 14px; background: var(--green-soft); color: #065f46; border-radius: 10px; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .co-login-ok-link { color: #065f46; text-decoration: underline; margin-left: auto; font-weight: 600; } .co-login-ok-note { color: #065f46; opacity: 0.8; } /* Adress-Picker im Checkout */ .co-addr-picker { margin-bottom: 16px; } .co-addr-picker-label { font-size: 12px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; } .co-addr-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; } .co-addr-card { text-align: left; padding: 12px 14px; background: var(--white); border: 2px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color 0.12s, background 0.12s; position: relative; font-family: inherit; } .co-addr-card:hover { border-color: var(--brand); background: var(--white); } .co-addr-card.active { border-color: var(--brand); background: var(--white); } .co-addr-tag { position: absolute; top: 8px; right: 10px; font-size: 10.5px; font-weight: 700; color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: 999px; } .co-addr-card-line { font-weight: 700; font-size: 13.5px; color: var(--ink); } .co-addr-card-street { font-size: 13px; color: var(--text); margin-top: 3px; } .co-addr-card-city { font-size: 12.5px; color: var(--text-soft); margin-top: 1px; } .co-addr-hint { padding: 10px 14px; background: #fef3c7; color: #78350f; border-radius: 10px; font-size: 12.5px; margin-bottom: 14px; } @media (max-width: 520px) { .co-login-hint { flex-direction: column; text-align: center; } .co-login-hint-btn { width: 100%; text-align: center; } } .co-section { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; } .co-section-title { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } /* Horizontale Trennlinie rechts neben dem Section-Titel — füllt den Rest der Zeile bis zum rechten Card-Rand. */ .co-section-title::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); align-self: center; } /* Number-Badge im Section-Header (1, 2, …). Schwarzer Kreis mit weißer Zahl, sitzt links neben dem Title-Text. */ .co-section-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; } .co-opt { color: var(--text-muted); font-weight: 400; font-size: 12px; } /* Optionaler Subtitle direkt unter co-title */ .co-subtitle { grid-column: 1 / -1; font-size: 13.5px; color: var(--text-soft); margin-top: -8px; margin-bottom: 4px; } .co-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } /* Inline-Row für 50/50 Felder (Vorname+Nachname, Straße+Nr, PLZ+ORT) */ .co-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } /* Spezial: Straße breit + Nr schmal (3:1) */ .co-row-street { grid-template-columns: 3fr 1fr; } /* ============================================================ Stacked-Inside-Label-Pattern für Form-Felder Label sitzt klein + uppercase oben drin, Wert mittig drunter. Bei `:placeholder-shown` (= leerer Input) verschwindet das Label und der Placeholder steht stattdessen mittig — pure CSS, kein JS. ============================================================ */ .co-fld { position: relative; display: block; } .co-fld input, .co-fld textarea { width: 100%; padding: 22px 14px 8px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg); font-family: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color 0.15s, background 0.15s; -webkit-appearance: none; appearance: none; } .co-fld textarea { min-height: 88px; resize: vertical; line-height: 1.4; } .co-fld input:focus, .co-fld textarea:focus { background: var(--white); border-color: var(--brand); } .co-fld input::placeholder, .co-fld textarea::placeholder { color: var(--text-muted); opacity: 0; transition: opacity 0.15s; } .co-fld input:focus::placeholder, .co-fld textarea:focus::placeholder { opacity: 0.55; } /* Read-only PLZ behält den filled-Look */ .co-fld input:read-only { cursor: default; } /* Label-Text — fix oben drin */ .co-fld-label { position: absolute; left: 14px; top: 8px; pointer-events: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); transition: color 0.15s; display: flex; align-items: center; gap: 4px; } .co-fld input:focus ~ .co-fld-label, .co-fld textarea:focus ~ .co-fld-label { color: var(--brand); } .co-fld-req { color: #c8372d; } .co-fld-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 10.5px; margin-left: 4px; } /* Filled-State — grüner Border + Check-Icon. Trigger via :not(:placeholder-shown) damit der Server-Prefill (value="...") direkt grün rendert. */ /* Grüne Border + Check-Icon NUR wenn das Feld auch wirklich valide ist — `:valid` greift bei type=email für korrektes Email-Format, bei type=tel mit pattern-Attribut für die regex, und bei required-Feldern wenn nicht leer. Sonst hatten wir den Bug dass Müll-Eingaben grün abgenommen wurden. */ .co-fld input:valid:not(:placeholder-shown):not(:focus), .co-fld textarea:valid:not(:placeholder-shown):not(:focus) { border-color: #2a8857; } .co-fld-check { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: #2a8857; color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.15s; pointer-events: none; } .co-fld-check svg { width: 12px; height: 12px; stroke-width: 3; } .co-fld input:valid:not(:placeholder-shown):not(:focus) ~ .co-fld-check, .co-fld textarea:valid:not(:placeholder-shown):not(:focus) ~ .co-fld-check { opacity: 1; } /* Bei textarea: Check oben-rechts (mittig sieht komisch aus bei mehreren Zeilen) */ .co-fld textarea ~ .co-fld-check { top: 16px; transform: none; } /* Hint-Text unter dem Field */ .co-fld-hint { margin-top: 6px; margin-left: 2px; font-size: 12px; color: var(--text-soft); line-height: 1.35; } /* Error-State (override) */ .co-fld input.is-error, .co-fld textarea.is-error { border-color: #c8372d; background: #fff5f4; } /* Aufblink-Animation für Submit-Fail. Wird auf das wrappende Element der ersten Native-Validation-Bubble gesetzt (siehe form-level `invalid`- Listener im Checkout-View). Browser zeigt seine Standard-Bubble UND das Feld pulsiert kurz rot — damit User auch ohne Bubble sieht WO's hakt (iOS Safari kürzt die Bubble abgeschnitten ab, Android nutzt weiße Bubble mit !-Icon — beide nicht stylebar). */ @keyframes co-error-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } 25% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.55); } 50% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } 75% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.55); } } .is-error-flash { animation: co-error-flash 1.2s ease-in-out; border-radius: 12px; } /* Liefergebiet-Banner: grüner Erfolgs-Hint zwischen PLZ-Row und Lieferhinweis. Nur bei delivery + erkanntem zoneName + zoneEta sichtbar. */ .co-zone-banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #ecf8f1; border: 1px solid #b4ddc3; border-radius: 12px; font-size: 13px; font-weight: 600; color: #155b3a; line-height: 1.35; } .co-zone-banner svg { width: 18px; height: 18px; flex-shrink: 0; color: #2a8857; } /* Final-Card: AGB-Consent + Marketing-Consent + Submit-Button als ein Container — analog zu den anderen co-section-Cards. Der Bestell-Button bleibt 1:1 (kostenpflichtig-bestellen ist Pflichttext). */ .co-final-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; } .co-err { color: #b53230; font-size: 12px; margin-top: 4px; font-weight: 500; } .co-alert { background: #fdecea; color: #9a2924; border: 1px solid #f4c7c3; padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.45; } .co-alert a { color: inherit; font-weight: 600; text-decoration: underline; } /* Payment */ .co-pay { display: flex; flex-direction: column; gap: 8px; } .co-pay-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .co-pay-opt:hover { border-color: var(--ink); } .co-pay-opt input { position: absolute; opacity: 0; pointer-events: none; } .co-pay-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } /* Logo-Reihe rechts in der Pay-Method-Card — visueller Hinweis welche Anbieter akzeptiert werden (Vertrauensbildung, Wolt/Lieferando-Pattern). Auf Mobile wrap erlauben damit's nicht überlauft. */ .co-pay-logos { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .co-pay-logo { display: inline-flex; align-items: center; line-height: 0; } .co-pay-logo svg { display: block; height: 14px; width: auto; } @media (max-width: 480px) { .co-pay-logo svg { height: 12px; } .co-pay-logos { gap: 4px; } } .co-pay-ctrl { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; position: relative; transition: border-color 0.12s; } .co-pay-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); } .co-pay-opt:has(input:checked) .co-pay-ctrl { border-color: var(--brand); } .co-pay-opt:has(input:checked) .co-pay-ctrl::after { content: ''; position: absolute; inset: 3px; background: var(--brand); border-radius: 50%; } .co-pay-label { font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Stack-Wrapper für Label + Sub-Hint im Pay-Picker (z.B. PayPal-only-Variante mit „Auch ohne PayPal-Konto möglich…"-Subzeile). `.has-sub` liftet die `align-items: center`-Default am .co-pay-opt damit Ctrl + Logos sauber auf der Label-Höhe ausgerichtet bleiben statt mittig zur 2-Zeilen-Höhe. */ .co-pay-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .co-pay-sub { font-size: 12px; color: var(--text-soft); line-height: 1.35; white-space: normal; } .co-pay-opt.has-sub { align-items: flex-start; } .co-pay-opt.has-sub .co-pay-ctrl, .co-pay-opt.has-sub .co-pay-logos { margin-top: 2px; } @media (max-width: 480px) { /* Mobile: bei „PayPal / Kreditkarte"-Variante die Acceptance-Marks unter den Sub-Hint stacken (statt rechts) damit der Sub-Hint volle Breite hat. */ .co-pay-opt.has-sub { flex-wrap: wrap; } .co-pay-opt.has-sub .co-pay-logos { width: 100%; padding-left: 30px; margin-top: 6px; } } /* Consent */ .co-consent { display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; } .co-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text); line-height: 1.45; cursor: pointer; } .co-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--brand); cursor: pointer; flex-shrink: 0; } .co-check a { color: var(--brand); text-decoration: underline; } .co-submit { padding: 16px 20px; background: var(--brand); color: white; border-radius: 12px; font-weight: 700; font-size: 15.5px; transition: background 0.12s, transform 0.05s; font-variant-numeric: tabular-nums; box-shadow: 0 8px 20px -6px rgba(200,55,45,0.35); /* Flex damit Text + Pfeil auf Mobile sauber zentriert + zueinander spaced stehen. Auf Desktop ist der Pfeil hidden, der „ · 20,00 €"-Span hängt direkt am Text dran (kein flex-gap weil Separator im Span). */ display: inline-flex; align-items: center; justify-content: center; } .co-submit:hover { background: var(--brand-dark); } .co-submit:active { transform: translateY(1px); } .co-submit:disabled { background: var(--line); color: var(--text-muted); cursor: not-allowed; box-shadow: none; } /* Submit-Inhaltselemente — Default Desktop: Preis-Suffix sichtbar im Button, Pfeil + Mobile-Total-Row hidden. */ .co-submit-text { /* immer sichtbar */ } .co-submit-price { /* default sichtbar (Desktop) */ } .co-submit-arrow { display: none; } /* default hidden (Desktop) */ .co-submit-total-row { display: none; } /* default hidden (Desktop) */ /* Mobile: Preis raus aus Button, eigene Total-Row darüber, Pfeil rein. „Jetzt kostenpflichtig bestellen"-Wortlaut bleibt (§312j BGB Pflicht). */ @media (max-width: 720px) { .co-submit-price { display: none; } .co-submit-arrow { display: inline-block; width: 20px; height: 20px; margin-left: 8px; flex-shrink: 0; } .co-submit-total-row { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px; margin-bottom: 2px; background: var(--cream-2); border-radius: 12px; font-variant-numeric: tabular-nums; } .co-submit-total-label { font-size: 13.5px; color: var(--text-soft); font-weight: 600; } .co-submit-total-value { font-size: 18px; color: var(--ink); font-weight: 800; letter-spacing: -0.01em; } .co-submit { padding: 14px 18px; font-size: 14.5px; } } /* Summary-Rechts */ .co-summary { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; position: sticky; top: 88px; } .co-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .co-summary-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; } .co-summary-edit { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--brand); flex-shrink: 0; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .co-summary-edit:hover, .co-summary-edit:focus-visible { background: var(--brand); border-color: var(--brand); color: #fff; } .co-summary-edit svg { width: 18px; height: 18px; } .co-summary-items { display: flex; flex-direction: column; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); } .co-summary-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; font-size: 13px; } .co-summary-item-qty { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; font-size: 13px; } .co-summary-item-name { font-weight: 600; color: var(--ink); line-height: 1.3; } .co-summary-item-meta { font-size: 12px; color: var(--text-soft); } .co-summary-item-removed { color: #8a1f1a; } .co-summary-item-note { margin-top: 4px; padding: 5px 8px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px; color: #78350f; font-size: 11.5px; font-weight: 500; line-height: 1.35; word-break: break-word; } .co-summary-item-price { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .co-summary-totals { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .co-summary-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink); font-variant-numeric: tabular-nums; } .co-summary-row[hidden] { display: none; } .co-summary-total { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); font-weight: 700; font-size: 16px; } /* ==================== Trinkgeld-Picker ==================== */ .co-tip { margin-top: 14px; padding: 14px; background: var(--bg-soft, #f7f6f3); border: 1px solid var(--line-soft); border-radius: 12px; } .co-tip[hidden] { display: none; } .co-tip-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; } .co-tip-title { font-weight: 700; font-size: 14px; color: var(--ink); } .co-tip-hint { font-size: 12px; color: var(--text-soft); } .co-tip-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; } .co-tip-btn { appearance: none; background: var(--white); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 8px; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink); cursor: pointer; transition: border-color 0.12s, background 0.12s, color 0.12s; font-variant-numeric: tabular-nums; } .co-tip-btn:hover { border-color: var(--brand); } .co-tip-btn.active { border-color: var(--brand); background: var(--brand); color: var(--white); } .co-tip-btn-custom { grid-column: 1 / -1; } .co-tip-custom { margin-top: 10px; } .co-tip-custom[hidden] { display: none; } .co-tip-custom-label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-soft); font-weight: 600; } .co-tip-custom-input { appearance: none; background: var(--white); border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; } .co-tip-custom-input:focus { outline: none; border-color: var(--brand); } .co-tip-custom-meta { margin-top: 6px; font-size: 12px; color: var(--text-soft); line-height: 1.35; } .co-tip-custom-meta[hidden] { display: none; } .co-tip-reset { margin-top: 10px; appearance: none; background: transparent; border: none; padding: 4px 0; font: inherit; font-size: 12.5px; color: var(--text-soft); text-decoration: underline; cursor: pointer; } .co-tip-reset[hidden] { display: none; } .co-tip-reset:hover { color: var(--ink); } @media (max-width: 720px) { .co-tip { margin-top: 0; padding: 12px; } .co-tip-buttons { grid-template-columns: repeat(2, 1fr); } .co-tip-btn { padding: 12px 8px; font-size: 14px; } } @media (max-width: 900px) { .co-wrap { grid-template-columns: 1fr; padding: 16px; gap: 18px; } .co-summary { position: static; /* Kein order:-1 mehr — auf Mobile schiebt JS (Checkout-Reorder-Skript) das Summary direkt VOR die Zahlung-Section ins Form rein. So sieht der Gast erst was er bestellt, und entscheidet dann die Zahlungsart. */ } .co-grid { grid-template-columns: 1fr 1fr; } .co-field-full { grid-column: 1 / -1; } .co-title { font-size: 22px; } .co-back { display: none; } /* User-Chip auf Mobile: Text ausblenden, nur Icon als runder Button */ .co-user-chip { padding: 8px; max-width: 36px; } .co-user-chip-email { display: none; } } @media (max-width: 560px) { .co-wrap { padding: 12px; } .co-grid { grid-template-columns: 1fr; gap: 10px; } .co-section { padding: 16px 14px; border-radius: 12px; } .co-summary { padding: 16px 14px; } .co-summary-item { font-size: 12.5px; } .co-title { font-size: 20px; } .co-chip-row { gap: 6px; } .co-type-chip, .co-time-chip { font-size: 12px; padding: 6px 10px; } } /* Safety-Net gegen horizontalen Overflow auf schmalen Displays */ /* overflow-x: clip statt hidden — hidden killt position:sticky darunter liegender Elemente, clip verhindert den Overflow ohne Scroll-Container-Semantik */ html, body { overflow-x: clip; } .co-form, .co-summary, .co-section { min-width: 0; max-width: 100%; } .co-field input, .co-field select, .co-section textarea { max-width: 100%; } /* Abhol-Adresse-Card */ .co-pickup-addr { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 12px; } .co-pickup-addr-icon { font-size: 22px; flex-shrink: 0; } .co-pickup-addr-main { flex: 1; min-width: 0; } .co-pickup-addr-title { font-size: 13px; color: var(--text-soft); margin-bottom: 2px; } .co-pickup-addr-title strong { color: var(--ink); } .co-pickup-addr-street { font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.35; } .co-pickup-addr-phone { margin-top: 4px; font-size: 13px; color: var(--text-soft); } .co-pickup-addr-phone a { color: var(--brand); font-weight: 600; text-decoration: none; } .co-pickup-addr-maps { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--cream-2); border-radius: 8px; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; flex-shrink: 0; transition: background 0.12s; } .co-pickup-addr-maps:hover { background: var(--line-soft); } .co-pickup-addr-maps svg { width: 14px; height: 14px; } @media (max-width: 560px) { .co-pickup-addr { flex-wrap: wrap; gap: 10px; } .co-pickup-addr-maps { width: 100%; justify-content: center; padding: 10px 12px; } } /* ============================================================ Bestell-Bestätigung / Status ============================================================ */ .ord-wrap { max-width: 760px; margin: 0 auto; width: 100%; padding: 28px 24px 60px; display: flex; flex-direction: column; gap: 22px; } /* ==================== Variante A: Status-Hero ==================== */ .ord-hero2 { background: var(--ink); color: white; border-radius: 18px; padding: 24px 26px 20px; position: relative; overflow: hidden; box-shadow: 0 14px 34px -14px rgba(0,0,0,0.35); } .ord-hero2::before { content: ''; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(200,55,45,0.2) 0%, transparent 60%); pointer-events: none; } /* Status-Pill oben */ .ord-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; background: rgba(16, 185, 129, 0.18); color: #6ee7b7; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(16, 185, 129, 0.3); position: relative; } .ord-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: ord-pulse 1.6s infinite; } .ord-pill--new { background: rgba(245,158,11,0.18); color: #fbbf24; border-color: rgba(245,158,11,0.3); } .ord-pill--accepted, .ord-pill--preparing { background: rgba(245,158,11,0.18); color: #fcd34d; border-color: rgba(245,158,11,0.3); } .ord-pill--ready { background: rgba(16,185,129,0.18); color: #6ee7b7; border-color: rgba(16,185,129,0.3); } .ord-pill--out { background: rgba(59,130,246,0.18); color: #93c5fd; border-color: rgba(59,130,246,0.3); } .ord-pill--completed { background: rgba(255,255,255,0.14); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.2); } .ord-pill--cancelled { background: rgba(220,38,38,0.2); color: #fca5a5; border-color: rgba(220,38,38,0.35); } @keyframes ord-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } /* Countdown */ .ord-count { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 14px; position: relative; } .ord-count-big { font-size: 54px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: white; } .ord-count-unit { font-size: 20px; font-weight: 600; color: rgba(255,255,255,0.6); margin-right: 8px; } .ord-count-label { font-size: 14px; color: rgba(255,255,255,0.75); font-family: 'Mona Sans', ui-monospace, monospace; letter-spacing: 0.02em; margin-left: auto; text-align: right; } .ord-count-label strong { color: white; font-weight: 700; font-variant-numeric: tabular-nums; } /* Progress-Bar */ .ord-progress { height: 6px; background: rgba(255,255,255,0.12); border-radius: 999px; overflow: hidden; position: relative; margin-bottom: 16px; } .ord-progress-bar { height: 100%; background: linear-gradient(90deg, var(--brand-light, #e85948), var(--brand)); border-radius: 999px; transition: width 0.6s ease; } /* Hero-Foot: Bestellnummer + Actions */ .ord-hero-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.1); position: relative; flex-wrap: wrap; } .ord-hero-foot-num { font-family: 'Mona Sans', ui-monospace, monospace; font-size: 12px; color: rgba(255,255,255,0.6); } .ord-hero-foot-num strong { color: white; font-weight: 700; letter-spacing: 0.02em; } .ord-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; } .ord-action-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.18); border-radius: 10px; font-size: 13px; font-weight: 700; text-decoration: none; transition: all 0.12s; } .ord-action-btn:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.3); } .ord-action-btn svg { width: 14px; height: 14px; } /* ==================== Timeline ==================== */ .ord-tl { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px 8px; } .ord-tl-row { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 10px 0 14px; position: relative; } .ord-tl-row:not(:last-child)::before { content: ''; position: absolute; left: 18px; top: 32px; bottom: -6px; width: 2px; background: var(--line); } .ord-tl-past:not(:last-child)::before, .ord-tl-current:not(:last-child)::before { background: var(--brand); } .ord-tl-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; background: var(--cream-2); color: var(--text-muted); font-size: 18px; line-height: 1; } .ord-tl-past .ord-tl-icon { background: var(--brand); color: white; } .ord-tl-past .ord-tl-icon svg { width: 18px; height: 18px; } .ord-tl-current .ord-tl-icon { background: var(--brand-soft); border: 2px solid var(--brand); animation: ord-current-pulse 2s infinite; } @keyframes ord-current-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,55,45,0.4); } 50% { box-shadow: 0 0 0 8px rgba(200,55,45,0); } } .ord-tl-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); animation: ord-pulse 1.4s infinite; } .ord-tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); } .ord-tl-body { min-width: 0; padding-top: 4px; } .ord-tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 3px; } .ord-tl-title { font-weight: 700; font-size: 14.5px; color: var(--ink); } .ord-tl-future .ord-tl-title { color: var(--text-muted); font-weight: 600; } .ord-tl-time { font-family: 'Mona Sans', ui-monospace, monospace; font-size: 12px; color: var(--text-soft); white-space: nowrap; flex-shrink: 0; } .ord-tl-sub { font-size: 13px; color: var(--text-soft); line-height: 1.4; } .ord-tl-future .ord-tl-sub { color: var(--text-muted); } /* ==================== Unbezahlt-Banner ==================== */ .ord-unpaid-banner { background: #fef2f2; border: 2px solid #fca5a5; border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 4px 18px -8px rgba(220,38,38,0.25); } .ord-unpaid-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; } .ord-unpaid-icon { font-size: 24px; line-height: 1; flex-shrink: 0; color: #dc2626; } .ord-unpaid-main { flex: 1; min-width: 0; } .ord-unpaid-title { font-size: 16px; font-weight: 800; color: #7f1d1d; letter-spacing: -0.01em; } .ord-unpaid-sub { margin-top: 4px; font-size: 13.5px; color: #991b1b; line-height: 1.5; } .ord-unpaid-actions { display: flex; gap: 8px; flex-wrap: wrap; } .ord-unpaid-btn { display: inline-flex; align-items: center; gap: 7px; padding: 11px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: all 0.12s; font-family: inherit; } .ord-unpaid-btn.primary { background: #dc2626; color: white; } .ord-unpaid-btn.primary:hover { background: #b91c1c; } .ord-unpaid-btn.ghost { background: var(--white); color: #7f1d1d; border: 1px solid #fca5a5; } .ord-unpaid-btn.ghost:hover { background: #fef2f2; } @media (max-width: 560px) { .ord-unpaid-actions { flex-direction: column; } .ord-unpaid-btn { justify-content: center; } } /* ==================== Cancelled-State ==================== */ .ord-cancelled { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 14px; padding: 20px 22px; display: flex; gap: 16px; align-items: center; } .ord-cancelled-icon { font-size: 32px; flex-shrink: 0; } .ord-cancelled-title { font-size: 18px; font-weight: 700; color: #9a2924; margin: 0 0 4px; } .ord-cancelled-sub { font-size: 13.5px; color: #7f1d1d; margin: 0; } .ord-cancelled-refund { font-size: 13.5px; color: #7f1d1d; font-weight: 600; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid #fecaca; } /* ==================== Zahlungs-Chip ==================== */ .ord-pay-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; } .ord-pay-chip.paid { background: var(--green-soft); color: #0a6a3c; } /* ==================== Footer ==================== */ .ord-foot2 { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 22px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; flex-wrap: wrap; } .ord-foot-text { font-size: 14px; color: var(--text); } .ord-foot-text strong { color: var(--ink); } .ord-foot-actions { display: flex; gap: 8px; flex-wrap: wrap; } .ord-foot-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 700; text-decoration: none; transition: all 0.12s; } .ord-foot-btn svg { width: 14px; height: 14px; } .ord-foot-btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); } .ord-foot-btn.ghost:hover { border-color: var(--ink); color: var(--ink); } .ord-foot-btn.primary { background: var(--brand); color: white; border: 1px solid var(--brand); } .ord-foot-btn.primary:hover { background: var(--brand-dark); } @media (max-width: 640px) { .ord-hero2 { padding: 20px 18px 16px; } .ord-count-big { font-size: 44px; } .ord-count-label { font-size: 12px; } .ord-hero-foot { flex-direction: column; align-items: stretch; } .ord-hero-actions { flex-direction: column; gap: 10px; } .ord-action-btn { justify-content: center; width: 100%; padding: 12px 14px; font-size: 14px; } /* „Nochmal bestellen" steckt in einem

— das Form selbst muss auch 100% breit werden, sonst bleibt der Button innen schmal. */ .ord-hero-actions form { width: 100%; display: block; } .ord-hero-actions form .ord-action-btn { width: 100%; } .ord-foot2 { flex-direction: column; align-items: stretch; text-align: center; } .ord-foot-actions { flex-direction: column; } .ord-foot-btn { justify-content: center; } .ord-tl { padding: 14px 16px 4px; } } .ord-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; } .ord-section { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 22px; } .ord-section-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 14px; } .ord-items { display: flex; flex-direction: column; gap: 12px; } .ord-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); } .ord-item:last-child { border-bottom: none; padding-bottom: 0; } .ord-item-qty { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; } .ord-item-name { font-weight: 600; color: var(--ink); font-size: 14px; } .ord-item-meta { font-size: 12px; color: var(--text-soft); margin-top: 2px; } .ord-item-removed { color: #8a1f1a; } .ord-item-note { margin-top: 5px; padding: 6px 9px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 7px; color: #78350f; font-size: 12px; font-weight: 500; line-height: 1.4; word-break: break-word; } .ord-item-price { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; font-size: 13.5px; } .ord-totals { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 6px; } .ord-totals-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; } .ord-totals-row.total { font-size: 15px; font-weight: 700; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--line-soft); } .ord-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; font-size: 13px; } .ord-dl dt { color: var(--text-soft); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; } .ord-dl dd { color: var(--ink); line-height: 1.4; } .ord-dl-soft { color: var(--text-soft); font-size: 12.5px; } /* Chat-Thread */ .ord-chat-sect { background: var(--white); } .ord-chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; max-height: 400px; overflow-y: auto; } .ord-bubble { padding: 10px 14px; border-radius: 14px; max-width: 80%; font-size: 13.5px; line-height: 1.45; word-break: break-word; } .ord-bubble-customer { align-self: flex-end; background: var(--brand); color: white; border-bottom-right-radius: 4px; } .ord-bubble-tenant { align-self: flex-start; background: var(--cream-2); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; } .ord-bubble-head { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; opacity: 0.85; margin-bottom: 3px; font-weight: 500; } .ord-bubble-author { font-weight: 700; } .ord-bubble-time { font-variant-numeric: tabular-nums; } .ord-bubble-body { white-space: pre-wrap; } .ord-chat-empty { padding: 18px 12px; text-align: center; color: var(--text-muted); font-size: 12.5px; } .ord-note-form { display: flex; gap: 8px; align-items: stretch; background: var(--cream-2); padding: 8px; border-radius: 12px; } .ord-note-form textarea { flex: 1; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 13.5px; color: var(--ink); outline: none; resize: vertical; min-height: 42px; background: var(--white); } .ord-note-form textarea:focus { border-color: var(--brand); } .ord-note-btn { padding: 10px 18px; background: var(--brand); color: white; border-radius: 9px; font-weight: 700; font-size: 13px; white-space: nowrap; flex-shrink: 0; transition: background 0.12s; } .ord-note-btn:hover { background: var(--brand-dark); } .ord-note-ok, .ord-note-err { padding: 8px 12px; border-radius: 8px; font-size: 12.5px; margin-bottom: 10px; } .ord-note-ok { background: var(--green-soft); color: #0a6a3c; } .ord-note-err { background: #fdecea; color: #9a2924; } .ord-foot { text-align: center; margin-top: 10px; } .ord-home-link { display: inline-block; padding: 10px 18px; color: var(--brand); font-size: 13.5px; font-weight: 600; border-radius: 999px; border: 1px solid var(--line); transition: background 0.12s; } .ord-home-link:hover { background: var(--brand-soft); } @media (max-width: 760px) { .ord-cols { grid-template-columns: 1fr; } .ord-steps { padding: 16px 10px; } .ord-step-label { font-size: 10.5px; } .ord-hero { padding: 24px 18px; } .ord-hero-title { font-size: 19px; } } /* ============================================================ Footer ============================================================ */ .sf-footer { margin-top: 40px; border-top: 1px solid var(--line); padding: 24px; text-align: center; font-size: 12.5px; color: var(--text-soft); } .sf-footer a { color: var(--text); } .sf-footer a:hover { color: var(--brand); } /* ============================================================ Produkt-Modal ============================================================ */ .sf-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(10, 10, 10, 0.55); backdrop-filter: blur(4px); animation: sf-fade 0.15s ease-out; } .sf-modal.open { display: flex; } @keyframes sf-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes sf-slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .sf-modal-box { background: var(--white); border-radius: 20px; width: 100%; max-width: 540px; /* `100vh` als Fallback (alte Browser); `100dvh` (Chrome 108+, Safari 15.4+) berücksichtigt die ein-/ausgefahrene Browser-Adresszeile auf Mobile. Sonst ist `100vh` auf Android Chrome größer als der sichtbare Bereich und das Modal guckt oben/unten drüber. */ max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); /* Box selbst scrollt NICHT — der Close-Button als absolutes Kind muss dafür visuell pinned bleiben. iOS Safari hat einen Quirk: `position: absolute` innerhalb eines `overflow: auto`-Containers scrollt dort mit dem Inhalt mit (auf Desktop bleibt's fixed). Lösung: Box ist nur Positions-Context + `overflow: hidden` (für die Rounded-Corners), der Scroll wandert in `.sf-modal-scroll` unten. */ overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(0,0,0,0.3); animation: sf-slide-up 0.2s ease-out; /* Position-Context für den schwebenden Close-Button (oben rechts, über dem Hero-Bild bzw. dem Head wenn kein Hero da ist). */ position: relative; } /* Scroll-Wrapper innerhalb der Modal-Box. Nur Hero+Head+Body scrollen drin — der Foot liegt AUSSEN, damit er immer am Modal-Box-Boden klebt egal wie die Inhalts-Höhe gerade ist (sonst verlagert sich der Foot bei kurzem Content auf Android Phone in die Mitte des Modals). Close-Button auf der Box-Ebene bleibt pinned. `overscroll-behavior: none` killt iOS-Rubber-Band: bei kurzem Produkt-Inhalt konnte der User sonst hoch-/runterziehen und das Modal bouncte zurück. */ .sf-modal-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; } /* Modal-Hero: Bildbereich oben im Modal. Aspect kommt jetzt via `data-aspect`-Attribut vom Server (Migration 0108: `image_aspect` / `tile_image_aspect` als ENUM 'landscape'|'portrait'). Damit füllt das Bild die Hero-Box exakt — kein contain-Letterbox, kein multiply-Trick mehr nötig. Icon-Variante (`.has-icon`) ist kompakter: ein Emoji rechtfertigt keinen großen Block — fixe Höhe von ~120 px reicht. */ .sf-modal-hero { width: 100%; background: var(--cream-2); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; position: relative; aspect-ratio: 4 / 3; /* Default = landscape */ } .sf-modal-hero[data-aspect="portrait"] { aspect-ratio: 3 / 4; /* Hard-Cap auf Desktop: 3:4 von einer 540-px-Modal-Breite wäre 720 px hoch — zu dominant, frisst die halbe Modal-Höhe und der Gast scrollt für jede Variante. 480 px deckelt das, lässt unten Raum für Title, Anmerkung und CTA. `object-fit: cover` crop't dabei moderat Top/Bottom (~17 %) — das Hauptmotiv (Flaschen-Etikett etc.) bleibt mittig sichtbar. Auf großen 4K-Monitoren bleibt's bei 480 px statt mit dvh aufzuwachsen. Top/Side-Padding gibt dem Hauptmotiv etwas Atemraum zur Modal-Kante statt direkt an die Rounded-Corner zu kleben — Cream-BG füllt das. */ max-height: 480px; padding: 18px 18px 0; } .sf-modal-hero.has-icon { aspect-ratio: auto; height: 120px; } .sf-modal-hero[hidden] { display: none; } .sf-modal-hero-img { display: block; width: 100%; height: 100%; /* `cover` statt `contain`: Bild füllt die Box exakt, da Tenant beim Upload bereits das passende Aspect (Quer/Hoch) gewählt hat. Keine Streifen mehr, kein multiply-Trick. */ object-fit: cover; } .sf-modal-hero-img[hidden] { display: none; } .sf-modal-hero-icon { font-size: 56px; line-height: 1; } /* „Symbolfoto"-Badge wenn der Cat-Tile-Fallback statt des echten Produkt- Bildes gezeigt wird — Verbraucherschutz-Hinweis (Rechtssicherheit) UND ehrliche UX. Unten rechts auf dem Hero, dunkles Pill mit weißer Schrift. */ .sf-modal-hero-badge { position: absolute; right: 12px; bottom: 12px; background: rgba(0, 0, 0, 0.65); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; pointer-events: none; backdrop-filter: blur(2px); } .sf-modal-hero-badge[hidden] { display: none; } .sf-modal-hero { position: relative; } /* Anker für absolute-Badge — falls noch nicht gesetzt */ .sf-modal-hero-icon[hidden] { display: none; } .sf-modal-head { /* Sticky-Top innerhalb des Modal-Box-Scrolls: Hero scrollt drüber weg, Head klebt mit Title/Price oben fest. Z-index über Hero, weißer BG deckt durchscrollende Bild-Reste ab. Padding kompakter (User-Vorgabe) damit auf Mobile mehr Platz für den scrollenden Body bleibt. */ position: sticky; top: 0; z-index: 4; background: var(--white); padding: 10px 48px 5px 22px; border-bottom: 1px solid var(--line-soft); } .sf-modal-head .title { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 8px; line-height: 1.2; } .sf-modal-head .price-head { font-weight: 700; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 5px; margin-bottom: 6px; } .sf-modal-head .price-head .from { font-size: 11.5px; color: var(--text-soft); font-weight: 500; text-transform: lowercase; } .sf-modal-head .desc { font-size: 13px; color: var(--text-soft); line-height: 1.45; } .sf-modal-close { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; /* Frosted-Glass: leicht durchscheinend mit Backdrop-Blur. Funktioniert optisch sowohl auf dem Hero-Bild (egal welche Foto-Farbe drunter) als auch auf dem weißen Head, falls kein Hero da ist. */ background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); display: flex; align-items: center; justify-content: center; transition: background 0.12s, transform 0.12s; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); /* Über alles drüber, auch über dem Hero-Bild */ z-index: 5; } .sf-modal-close:hover { background: var(--white); transform: scale(1.05); } .sf-modal-close svg { width: 15px; height: 15px; stroke-width: 2.5; } .sf-modal-body { /* Body scrollt nicht mehr selbst — der `.sf-modal-scroll`-Wrapper ist der Scroll-Container. Default-Flex (kein grow/shrink-override) damit der Body bei langer Extras-Liste sauber im Scroll-Container schrumpft und nicht aus dem max-height der Box rausbricht. */ } .sf-modal-group { padding: 18px 22px 6px; border-bottom: 1px solid var(--line-soft); } .sf-modal-group:last-child { border-bottom: none; } .sf-modal-group-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .sf-modal-group-title { font-size: 14.5px; font-weight: 700; color: var(--ink); } .sf-modal-group-tag { font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; text-transform: none; letter-spacing: 0; } .sf-modal-group-tag.required { background: var(--brand-soft); color: var(--brand-dark); } .sf-modal-group-tag.optional { background: var(--cream-2); color: var(--text-soft); } /* Plain-Sprache-Hint über dem Extra-Block (Migration 0126). Beispiele: „Wähle 1 Dressing" / „Bis zu 2 Soßen" / „Mindestens 1". */ .sf-modal-group-hint { font-size: 12.5px; color: var(--text-soft); margin: -4px 0 10px; line-height: 1.35; } /* Disable-State auf nicht-mehr-wählbaren Extras (max>1 erreicht). Bei max=1 regelt der Click-Handler das Verhalten (Auto-Toggle der anderen), kein Visual-Disable nötig. */ .sf-opt.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Count-Badge im Group-Header: zeigt die Anzahl der bereits gewählten Extras direkt neben dem Group-Titel. Hilft im Edit-Modus, wenn ausgewählte Extras unter „Mehr anzeigen" versteckt sind — der Gast sieht auf einen Blick dass schon was angehakt ist. `margin-right: auto` schiebt den Optional-Tag rechts raus, der Badge selbst klebt direkt am Titel mit 8px Gap. */ .sf-modal-group-count { margin-left: 8px; margin-right: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--brand); color: white; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; display: inline-block; } .sf-modal-group-count[hidden] { display: none; } .sf-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; } /* ---- Ausstattung/Zutaten-Pills (ENTHALTEN, tap zum entfernen) ---- Horizontal scrollbar — auf Mobile frisst flex-wrap zu viel Vertikalplatz, besser eine Zeile mit natürlichem „Swipe-Hint" durch angeschnittene Pille. */ .sf-ingredients-wrap { display: flex; flex-wrap: nowrap; gap: 8px; padding: 4px 2px 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } .sf-ingredients-wrap::-webkit-scrollbar { height: 6px; } .sf-ingredients-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; } .sf-ingredients-wrap::-webkit-scrollbar-track { background: transparent; } .sf-ingredients-wrap .sf-ingredient-pill { flex-shrink: 0; scroll-snap-align: start; } .sf-ingredient-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 8px; background: var(--green-soft, #dcfce7); color: #065f46; border: 1px solid #a7f3d0; border-radius: 999px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.12s; -webkit-tap-highlight-color: transparent; } .sf-ingredient-pill::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: #10b981 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; flex-shrink: 0; } .sf-ingredient-pill:hover { background: #bbf7d0; } .sf-ingredient-pill.removed { background: #f3f4f6; border-color: #d1d5db; color: #6b7280; text-decoration: line-through; } .sf-ingredient-pill.removed::before { background: #9ca3af url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/12px no-repeat; } /* Notiz-Feld im Produkt-Modal (zum Bearbeiten vor dem Hinzufügen) */ .sf-modal-note-field { width: 100%; min-height: 64px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 15px; color: var(--ink); background: var(--white); outline: none; resize: vertical; -webkit-appearance: none; appearance: none; margin-top: 6px; } .sf-modal-note-field:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(200,55,45,0.1); } .sf-modal-note-field::placeholder { color: var(--text-muted); opacity: 0.6; } .sf-opt:last-child { border-bottom: none; } .sf-opt-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; } .sf-opt-control { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: var(--white); flex-shrink: 0; position: relative; transition: border-color 0.12s, background 0.12s; } .sf-opt-control.sq { border-radius: 5px; } .sf-opt input { position: absolute; opacity: 0; pointer-events: none; } .sf-opt:has(input:checked) .sf-opt-control { border-color: var(--brand); background: var(--brand); } .sf-opt:has(input:checked) .sf-opt-control::after { content: ''; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .sf-opt:has(input[type="radio"]:checked) .sf-opt-control::after { background: radial-gradient(circle at center, var(--white) 35%, var(--brand) 38%); border-radius: 50%; } .sf-opt:has(input[type="checkbox"]:checked) .sf-opt-control::after { background: var(--brand); border-radius: 5px; } .sf-opt:has(input[type="checkbox"]:checked) .sf-opt-control::before { content: ''; position: absolute; left: 5px; top: 2px; width: 6px; height: 10px; border: solid white; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); z-index: 2; } .sf-opt-name { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.3; } .sf-opt-price { font-weight: 600; font-size: 13.5px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; } .sf-opt-price.plus::before { content: '+'; } /* Promo-Anzeige in Variant-Rows (Phase B): durchgestrichener Original + reduzierter Preis daneben + Aktions-Pill in 2. Sub-Zeile under der Row. `.sf-opt.has-promo` aktiviert flex-wrap damit die Pill (`flex-basis:100%`) in eine eigene Zeile rutscht ohne den main-Layout zu verschieben. */ .sf-opt.has-promo { flex-wrap: wrap; row-gap: 6px; } .sf-opt.has-promo .sf-opt-price { display: inline-flex; align-items: baseline; gap: 6px; } .sf-opt-price-strike { font-size: 12.5px; font-weight: 500; color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; } .sf-opt-price-promo { color: #b45309; font-weight: 800; font-size: 14px; } .sf-opt-promo-pill { flex-basis: 100%; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; background: #fef3c7; border: 1px solid #fbbf24; border-radius: 999px; color: #78350f; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; margin-left: 34px; /* unter den Variant-Namen einrücken (control 22px + gap 12px) */ width: fit-content; } /* Extras-Collapse: zuerst 4, Rest hinter "Weitere N anzeigen" */ .sf-opt-hidden { display: none; } .sf-more-btn { display: flex; align-items: center; gap: 6px; padding: 10px 0 4px; color: var(--brand); font-weight: 600; font-size: 13.5px; transition: color 0.12s; } .sf-more-btn:hover { color: var(--brand-dark); } .sf-more-btn svg { width: 13px; height: 13px; stroke-width: 2.5; } /* Live-Filter-Suche in großen Extras-Gruppen (>10 Items). Wird nach Klick auf „Weitere anzeigen" eingeblendet — Header-Suche-Pattern in klein, theme-aware via existing CSS-Vars. */ .sf-opt-search { margin: 10px 0 6px; } .sf-opt-search[hidden] { display: none; } .sf-opt-search-box { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; transition: border-color 0.12s, box-shadow 0.12s; } .sf-opt-search-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(10, 138, 78, 0.14); } .sf-opt-search-ico { width: 18px; height: 18px; color: var(--text-soft); flex-shrink: 0; } .sf-opt-search-input { flex: 1 1 auto; min-width: 0; padding: 0; margin: 0; border: none; background: transparent; font: inherit; color: var(--ink); outline: none; -webkit-appearance: none; } .sf-opt-search-input::placeholder { color: var(--text-soft); } .sf-opt-search-input::-webkit-search-cancel-button { -webkit-appearance: none; } .sf-opt-search-count { margin-top: 8px; padding-left: 4px; font-size: 12.5px; color: var(--text-soft); } .sf-opt-search-count strong { color: var(--ink); font-weight: 700; margin-right: 4px; } .sf-opt-search-hidden { display: none !important; } .sf-modal-foot { /* Foot liegt AUSSERHALB des `.sf-modal-scroll`-Wrappers. Modal-Box ist flex-column → Scroll-Wrapper grows, Foot am Ende. `margin-top: auto` als Safety-Net: wenn Android Chrome die Box mysteriös auf 90dvh aufbläht (statt content-height), landet der Foot trotzdem am unteren Box-Rand statt mitten im Modal. Bei korrekter content-height-Berechnung ist's ein No-op. */ flex-shrink: 0; margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--line-soft); background: var(--white); } .sf-qty { display: flex; align-items: center; gap: 10px; background: var(--cream-2); padding: 4px; border-radius: 999px; flex-shrink: 0; } .sf-qty button { width: 32px; height: 32px; border-radius: 50%; background: var(--white); color: var(--ink); display: flex; align-items: center; justify-content: center; transition: background 0.12s; } .sf-qty button:hover { background: var(--brand); color: white; } .sf-qty button:disabled { opacity: 0.35; cursor: not-allowed; background: var(--white); color: var(--ink); } .sf-qty button svg { width: 14px; height: 14px; stroke-width: 2.5; } .sf-qty-value { min-width: 24px; text-align: center; font-weight: 600; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; } .sf-cta { flex: 1; padding: 12px 18px; background: var(--brand); color: white; border-radius: 999px; font-weight: 700; font-size: 14.5px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.12s; font-variant-numeric: tabular-nums; } .sf-cta:hover { background: var(--brand-dark); } .sf-cta:disabled { background: #b5b5b5; cursor: not-allowed; } /* ============================================================ Menü-Configurator-Modal (Phase C) Class `sf-menu-modal` ist Modifier auf `.sf-modal` — Body-Lock, Scroll-Wrapper, Hero, Foot-Position erbt es alles vom Produkt-Modal- CSS. Hier nur die menü-spezifischen Innereien (Group-Sections mit Min/Max-Hint, Item-Rows mit Radio/Checkbox/Select, Surcharge-Suffix). ============================================================ */ .sf-menu-modal .sf-mm-group { padding: 16px 22px; border-bottom: 1px solid var(--line-soft); } .sf-menu-modal .sf-mm-group:last-child { border-bottom: none; } .sf-menu-modal .sf-mm-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .sf-menu-modal .sf-mm-group-title { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .sf-menu-modal .sf-mm-group-tag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; letter-spacing: 0.02em; text-transform: uppercase; flex-shrink: 0; } .sf-menu-modal .sf-mm-group-tag.required { background: #fef2f2; color: #b91c1c; } .sf-menu-modal .sf-mm-group-tag.optional { background: var(--cream-2); color: var(--text-soft); } /* Erfüllter State: User hat min_select erreicht — grünes „N ausgewählt" als klares „du bist fertig"-Signal. Wird live von updateGroupTags() nach jedem Click umgeschaltet. */ .sf-menu-modal .sf-mm-group-tag.fulfilled { background: #d1fae5; color: #065f46; } /* Item-Row: Container für ein einzelnes Group-Item (Produkt oder Kategorie- Picker). Klickbar als ganze Zeile. flex-wrap aktiviert damit der Cat-Mode- Picker bei engem Viewport unter den Body fällt (Mobile-Schutz). */ .sf-menu-modal .sf-mm-opt { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; transition: border-color 0.12s, background 0.12s; margin-bottom: 8px; user-select: none; } .sf-menu-modal .sf-mm-opt:last-child { margin-bottom: 0; } .sf-menu-modal .sf-mm-opt:hover { border-color: var(--brand); } .sf-menu-modal .sf-mm-opt.is-checked { border-color: var(--brand); background: #f0faf4; } /* Native Input visuell verstecken — wir rendern den Control-Look in `.sf-mm-opt-control`. Input bleibt für Tastatur/Screen-Reader. */ .sf-menu-modal .sf-mm-opt input[type="radio"], .sf-menu-modal .sf-mm-opt input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .sf-menu-modal .sf-mm-opt-control { width: 20px; height: 20px; flex-shrink: 0; border: 2px solid var(--line); background: var(--white); display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.12s, background 0.12s; } .sf-menu-modal .sf-mm-opt-control.radio { border-radius: 50%; } .sf-menu-modal .sf-mm-opt-control.check { border-radius: 6px; } .sf-menu-modal .sf-mm-opt.is-checked .sf-mm-opt-control { border-color: var(--brand); background: var(--brand); } .sf-menu-modal .sf-mm-opt-control::after { content: ''; display: none; } .sf-menu-modal .sf-mm-opt.is-checked .sf-mm-opt-control.radio::after { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--white); } .sf-menu-modal .sf-mm-opt.is-checked .sf-mm-opt-control.check::after { display: block; width: 11px; height: 11px; background: no-repeat center / contain url("data:image/svg+xml;utf8,"); } .sf-menu-modal .sf-mm-opt-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sf-menu-modal .sf-mm-opt-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; } .sf-menu-modal .sf-mm-opt-sub { font-size: 12px; color: var(--text-soft); line-height: 1.35; } .sf-menu-modal .sf-mm-opt-surcharge { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; } /* Negativer Aufpreis (Rabatt-Effekt) — grün statt Brand-Rot damit User checkt: „das ist GÜNSTIGER", nicht „das ist eine Warnung". Wirkt im Modal. */ .sf-menu-modal .sf-mm-opt-surcharge.is-negative { color: #047857; } /* Cart/Checkout/Status-Page: gleiche Vorzeichen-Logik. Positiv = Brand-Color (Marken-Akzent für Aufpreis), negativ = Grün (Rabatt). Wird in den drei Render-Pfaden geteilt für Konsistenz. */ .sf-cart-subcomponent-surcharge { color: var(--brand); font-weight: 600; } .sf-cart-subcomponent-surcharge.is-negative { color: #047857; } /* Kategorie-Mode-Picker: Card-Slot UNTER dem Radio (nur sichtbar wenn das Item gecheckt ist). `flex: 0 0 100%` erzwingt Wrap in nächste Flex-Zeile — die Picker-Card sitzt full-width unter Radio/Name/Surcharge. Vorher war's ein Native-Dropdown rechts neben dem Body — bei vielen Produkten (Adria: 42 Pizzen) unbrauchbar (kein Search, keine Beschreibung, winziges Touch-Target). Jetzt Card mit Click → Sub-Modal mit Liste. */ .sf-menu-modal .sf-mm-opt-picker { flex: 0 0 100%; display: none; margin-top: 6px; } .sf-menu-modal .sf-mm-opt.is-checked .sf-mm-opt-picker { display: block; } .sf-menu-modal .sf-mm-opt-picker-btn { display: block; width: 100%; text-align: left; background: var(--white); border: 1.5px solid var(--line); border-radius: 12px; padding: 0; cursor: pointer; font: inherit; color: var(--ink); transition: border-color 0.12s, box-shadow 0.12s; } .sf-menu-modal .sf-mm-opt-picker-btn:hover, .sf-menu-modal .sf-mm-opt-picker-btn:focus-visible { border-color: var(--brand); outline: none; } .sf-menu-modal .sf-mm-opt-picker-empty { display: flex; align-items: center; gap: 12px; padding: 12px 14px; } .sf-menu-modal .sf-mm-opt-picker-empty[hidden] { display: none; } .sf-menu-modal .sf-mm-opt-picker-icon { flex: 0 0 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: var(--cream-2); border-radius: 8px; overflow: hidden; } .sf-menu-modal .sf-mm-opt-picker-icon-img { background: transparent; padding: 0; } .sf-menu-modal .sf-mm-opt-picker-icon-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sf-menu-modal .sf-mm-opt-picker-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sf-menu-modal .sf-mm-opt-picker-label { font-size: 14px; font-weight: 600; color: var(--text-soft); line-height: 1.3; } .sf-menu-modal .sf-mm-opt-picker-sub { font-size: 12px; color: var(--text-muted); line-height: 1.35; } .sf-menu-modal .sf-mm-opt-picker-chevron { flex: 0 0 18px; width: 18px; height: 18px; color: var(--text-muted); } .sf-menu-modal .sf-mm-opt-picker-chosen { display: flex; align-items: center; gap: 12px; padding: 12px 14px; } .sf-menu-modal .sf-mm-opt-picker-chosen[hidden] { display: none; } .sf-menu-modal .sf-mm-opt-picker-no { flex: 0 0 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: var(--white); border-radius: 8px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .sf-menu-modal .sf-mm-opt-picker-no.is-empty { background: var(--cream-2); } .sf-menu-modal .sf-mm-opt-picker-choice { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sf-menu-modal .sf-mm-opt-picker-choice-name { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; } .sf-menu-modal .sf-mm-opt-picker-choice-desc { font-size: 12px; color: var(--text-soft); line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .sf-menu-modal .sf-mm-opt-picker-change { flex-shrink: 0; font-size: 12px; color: var(--brand); text-decoration: underline; font-weight: 500; } /* Variant-Select: bleibt für Modell-B-Edge-Cases (kein variant_label-Match) sichtbar, ebenfalls full-width unter dem Picker. */ .sf-menu-modal .sf-mm-opt-picker select[data-picker-variant] { width: 100%; margin-top: 8px; padding: 10px 32px 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white) no-repeat right 10px center / 14px url("data:image/svg+xml;utf8,"); font: inherit; font-size: 13.5px; color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer; } .sf-menu-modal .sf-mm-opt-picker select[data-picker-variant]:focus { outline: none; border-color: var(--brand); } /* ============================================================ Sub-Modal: Cat-Mode-Produkt-Picker (sfMenuPickerModal) z-index 110 > .sf-modal (100) damit es über dem Configurator liegt. Auf Mobile als Bottom-Sheet (slide-up von unten), Desktop als zentriertes Modal. ============================================================ */ .sf-menu-picker-modal { z-index: 110; } .sf-menu-picker-modal .sf-mp-box { display: flex; flex-direction: column; width: 100%; max-width: 560px; /* Konstante Höhe statt max-height — sonst springt die Box bei Filter- Treffern (kleinerer Inhalt = kleinere Box → Re-Center-Sprung). Höhe bleibt fix, leere Fläche unten ist akzeptabler als ein UI-Hüpfer. */ height: 80vh; max-height: 720px; background: var(--white); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22); } .sf-menu-picker-modal .sf-mp-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .sf-menu-picker-modal .sf-mp-title { flex: 1 1 auto; font-size: 15px; font-weight: 700; color: var(--ink); } .sf-menu-picker-modal .sf-mp-close { flex: 0 0 auto; background: transparent; border: 0; padding: 6px 10px; font: inherit; font-size: 13px; color: var(--brand); cursor: pointer; border-radius: 6px; } .sf-menu-picker-modal .sf-mp-close:hover { background: var(--cream-2); } .sf-menu-picker-modal .sf-mp-search { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--line); } .sf-menu-picker-modal .sf-mp-search svg { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; } .sf-menu-picker-modal .sf-mp-search input { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; background: var(--cream); color: var(--ink); } .sf-menu-picker-modal .sf-mp-search input:focus { outline: none; border-color: var(--brand); background: var(--white); } .sf-menu-picker-modal .sf-mp-list { flex: 1 1 auto; overflow-y: auto; padding: 0; -webkit-overflow-scrolling: touch; } .sf-menu-picker-modal .sf-mp-item { display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line-soft); padding: 10px 22px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: background 0.12s; } .sf-menu-picker-modal .sf-mp-item:last-child { border-bottom: 0; } .sf-menu-picker-modal .sf-mp-item:hover, .sf-menu-picker-modal .sf-mp-item:focus-visible { background: var(--cream); outline: none; } .sf-menu-picker-modal .sf-mp-item.is-chosen { background: #f0faf4; } .sf-menu-picker-modal .sf-mp-no { flex: 0 0 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--cream-2); color: var(--text-soft); border-radius: 6px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .sf-menu-picker-modal .sf-mp-item.is-chosen .sf-mp-no { background: var(--brand); color: var(--white); } .sf-menu-picker-modal .sf-mp-no-empty { background: transparent; } .sf-menu-picker-modal .sf-mp-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .sf-menu-picker-modal .sf-mp-name { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; } .sf-menu-picker-modal .sf-mp-desc { font-size: 12px; color: var(--text); line-height: 1.35; } .sf-menu-picker-modal .sf-mp-empty { padding: 32px 16px; text-align: center; font-size: 13px; color: var(--text-soft); } @media (max-width: 600px) { .sf-menu-picker-modal { align-items: flex-end; } .sf-menu-picker-modal .sf-mp-box { height: 88vh; max-height: none; border-radius: 16px 16px 0 0; } } /* Notes-Block am Ende */ .sf-menu-modal .sf-mm-notes { padding: 16px 22px 20px; } .sf-menu-modal .sf-mm-notes-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; } .sf-menu-modal .sf-mm-notes textarea { width: 100%; resize: vertical; min-height: 60px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--white); } .sf-menu-modal .sf-mm-notes textarea:focus { outline: none; border-color: var(--brand); } /* Loading / Error Inline-States im Body */ .sf-menu-modal .sf-mm-loading, .sf-menu-modal .sf-mm-error { padding: 36px 22px; text-align: center; font-size: 13px; color: var(--text-soft); } .sf-menu-modal .sf-mm-loading { display: flex; align-items: center; justify-content: center; } /* Generischer Spinner für Modal-Open-Loading (Produkt + Menü) — rotierender Brand-farbener Halbkreis. Genutzt als Inline-Element im Modal-Body während `/api/product/{id}` oder `/api/menu/{id}` laden. */ .sf-spinner { display: inline-block; width: 24px; height: 24px; border: 2.5px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: sf-spin 0.7s linear infinite; vertical-align: middle; } .sf-spinner.sf-spinner-lg { width: 32px; height: 32px; border-width: 3px; } @keyframes sf-spin { to { transform: rotate(360deg); } } @media (max-width: 600px) { .sf-menu-modal .sf-mm-group { padding: 14px 16px; } .sf-menu-modal .sf-mm-notes { padding: 14px 16px 18px; } .sf-menu-modal .sf-mm-opt { padding: 11px 12px; } .sf-menu-modal .sf-mm-opt-name { font-size: 13.5px; } } /* ============================================================ Toast ============================================================ */ .sf-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(40px); background: #0a0a0a; color: #fff; padding: 13px 22px; border-radius: 999px; font-size: 13.5px; font-weight: 600; box-shadow: 0 12px 30px rgba(0,0,0,0.25); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; display: flex; align-items: center; gap: 10px; } .sf-toast svg { width: 16px; height: 16px; color: #4ade80; stroke-width: 2.5; } .sf-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* ============================================================ Mobile (<= 900px) ============================================================ */ @media (max-width: 900px) { .sf-body { grid-template-columns: 1fr; padding: 16px; gap: 16px; } /* Cart ist mobil standardmäßig versteckt — entweder Pill unten (mit Items) oder gar nichts (leer). Nur bei body.sf-cart-open = Full-Screen. */ .sf-cart { display: none; } /* Pill sichtbar wenn Cart Items hat */ body[data-cart-count="0"] .sf-cart-pill { display: none; } body:not([data-cart-count="0"]):not(.sf-cart-open) .sf-cart-pill { display: flex; } /* Full-Screen Cart wenn geöffnet */ body.sf-cart-open { overflow: hidden; } body.sf-cart-open .sf-cart { /* Flex-Column statt Block: damit der Foot via `margin-top: auto` bei kurzem Cart-Inhalt ans Cart-Ende gepusht wird statt ein leerer Streifen unter dem Foot zu entstehen (in den iOS-Safari sonst rubber- band'en lässt). */ display: flex; flex-direction: column; position: fixed; inset: 0; max-height: none; /* 100vh = Fallback; 100dvh = moderne dynamische Viewport-Höhe, berücksichtigt Safari-URL-Bar wenn sie ein-/ausfährt, sodass der Bezahlen-Button unten nicht mehr verdeckt wird. */ height: 100vh; height: 100dvh; border: none; border-radius: 0; z-index: 90; padding: 18px; /* Padding-bottom: 0 — Safe-Area + sonstigen Bottom-Space übernimmt der Sticky-Foot selbst (siehe `.sf-cart-foot` Mobile-Override). Sonst entsteht eine transparente Lücke unter dem Foot, durch die der Voucher-Block beim Scrollen durchschimmert. */ padding-bottom: 0; animation: sf-slide-up 0.2s ease-out; overflow-y: auto; /* iOS Momentum-Scroll fürs bessere Gefühl */ -webkit-overflow-scrolling: touch; /* `none` statt `contain`: Rubber-Band-Bouncing komplett aus. Bei kurzem Cart-Inhalt war das Pull-Up-Bouncen verwirrend, weil der Foot optisch wegrutscht und beim Loslassen wieder kommt. Block-Chaining auf die Hintergrund-Page wird mit `none` automatisch mit unterbunden. */ overscroll-behavior: none; } /* Foot bei kurzem Content nach unten pushen — sonst klebt er an seiner natürlichen Position direkt nach dem Voucher und unter ihm bleibt eine leere Cart-Region (in der man dann scrollen / rubber-band'en kann). */ body.sf-cart-open .sf-cart-foot { margin-top: auto; } /* Empty-State (kein Foot vorhanden) braucht eigenes Bottom-Padding für die Safe-Area */ body.sf-cart-open .sf-cart-empty { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } body.sf-cart-open .sf-cart-close { display: flex; } body.sf-cart-open .sf-cart-pill { display: none; } .sf-cart-head { font-size: 18px; margin-bottom: 14px; } .sf-main { padding-bottom: 16px; } body:not([data-cart-count="0"]) .sf-main { padding-bottom: 88px; } /* Header-Layout auf Mobile: Burger + Brand links, alle Action-Icons (Search, Live-Chip, User) rechts gruppiert. flex-wrap: nowrap verhindert dass User- Icon in eine zweite Zeile rutscht. `margin-left: auto` auf Search-Btn drückt sich + alle nachfolgenden Icons (Live, User) nach rechts und füllt den Gap dazwischen mit Brand-Text statt einer leeren Lücke in der Mitte. */ .sf-header-inner { padding: 12px 16px; gap: 8px; justify-content: flex-start; flex-wrap: nowrap; } .sf-brand-text .loc { display: none; } .sf-search { display: none; } .sf-search-btn { display: inline-flex; margin-left: auto; } .sf-brand { flex-shrink: 1; min-width: 0; } .sf-hours-wrap { flex-shrink: 1; min-width: 0; } /* Wichtig: das Default-`margin-left: auto` von `.sf-header-right` neutralisieren — sonst splittet der Browser den freien Raum auf zwei Spacer (Search-Btn + Header-Right), Live-Chip + User-Btn würden auseinander gerissen. Wir wollen aber alle 3 Action-Icons direkt nebeneinander rechts. */ .sf-header-right { flex-shrink: 0; margin-left: 0; } .sf-live-chip { padding: 5px 10px; font-size: 11.5px; max-width: 100%; } /* Hero auf Mobile: volle Breite, keine Rundungen — kompensiert das 16px-Padding von .sf-body via negativen Margins. Sieht prominenter aus + kein gequetschter Eindruck. */ .sf-hero { padding: 20px 22px; margin: -16px -16px 0; border-radius: 0; } .sf-hero-title { font-size: 20px; } .sf-hero-sub { max-width: 100%; font-size: 13px; } /* Cat-Page Hero analog full-width — Breadcrumb darüber bleibt eingerückt. Mobile-Aspect 5:3 (höher als Desktop 3:1) damit der Banner mit Mobile- Variant `{id}-mobile.webp` ordentlich kommt. */ .sf-cat-hero { margin-left: -16px; margin-right: -16px; border-radius: 0; max-width: none; aspect-ratio: 5 / 3; } .sf-products { grid-template-columns: 1fr; } .sf-categories { top: 65px; } .sf-cat-section { scroll-margin-top: 120px; } } @media (max-width: 480px) { .sf-product { padding: 14px; gap: 10px; } .sf-product-right { min-width: 70px; width: auto; height: auto; } .sf-product-name { font-size: 14.5px; } .sf-product-price { font-size: 15.5px; } } /* Modal: auf schmalen Screens als Bottom-Sheet */ @media (max-width: 600px) { .sf-modal { padding: 0; align-items: flex-end; } .sf-modal-box { max-width: 100%; /* Content-bound: kurze Modals (wenig Extras) hugen den Inhalt von unten, lange Modals (viele Extras) cappen bei 90dvh und der Scroll-Wrapper übernimmt. `dvh` für Android-Adressleiste. */ max-height: 90vh; max-height: 90dvh; border-radius: 20px 20px 0 0; } /* Hochkant-Hero auf Mobile bremsen: 3:4 von voller Screen-Breite würde den Bottom-Sheet komplett füllen (≈80% Viewport-Höhe). Auf 50dvh deckeln, `cover` crop't ein bisschen Top/Bottom — Bottle-Hauptmotiv bleibt mittig sichtbar. */ .sf-modal-hero[data-aspect="portrait"] { aspect-ratio: auto; height: 50dvh; } .sf-modal-hero.has-icon { height: 96px; } .sf-modal-hero-icon { font-size: 44px; } } /* ================================================================= * Customer Push-Opt-In-Prompt (auf OrderStatus-Seite) * ================================================================= */ .cust-push-prompt { background: linear-gradient(135deg, #fef9c3, #fef3c7); border-left: 4px solid var(--brand); } .cust-push-prompt-inner { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; } .cust-push-icon { font-size: 32px; text-align: center; animation: cust-push-shake 2s ease-in-out infinite; } @keyframes cust-push-shake { 0%, 100% { transform: rotate(0); } 5%, 15% { transform: rotate(-10deg); } 10%, 20% { transform: rotate(10deg); } 25% { transform: rotate(0); } } .cust-push-text { font-size: 14px; line-height: 1.5; } .cust-push-text strong { display: block; font-size: 15px; margin-bottom: 3px; } .cust-push-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; } .cust-push-actions .btn { padding: 9px 16px; font-size: 13.5px; font-weight: 600; border-radius: 9px; border: 1px solid transparent; cursor: pointer; font-family: inherit; transition: background 0.12s, border-color 0.12s, color 0.12s; } .cust-push-actions .btn-primary { background: var(--brand); color: #fff; } .cust-push-actions .btn-primary:hover { background: var(--brand-dark); } .cust-push-actions .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .cust-push-actions .btn-ghost:hover { background: var(--cream-2); } .cust-push-marketing { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.08); } .cust-push-marketing label { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; cursor: pointer; } .cust-push-marketing input[type="checkbox"] { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--brand); flex-shrink: 0; } .cust-push-marketing small { display: block; color: #6b6b6b; font-size: 12px; margin-top: 2px; } .cust-push-feedback { margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 13px; border-left: 3px solid; } .cust-push-feedback.is-ok { background: #e8faf0; color: #065f46; border-color: #10b981; } .cust-push-feedback.is-error { background: #fef2f2; color: #991b1b; border-color: #dc2626; } @media (max-width: 620px) { .cust-push-prompt-inner { grid-template-columns: 1fr; text-align: center; } .cust-push-icon { margin: 0 auto; } .cust-push-actions { justify-content: center; } } /* ============================================================ * Shop-Paused-Banner — oben auf jeder Customer-Seite, wenn der * Tenant-Admin in der App „Pausieren" gedrückt hat. * ============================================================ */ .shop-paused-banner { position: sticky; top: 0; z-index: 1000; background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%); color: #fff; font-size: 14px; line-height: 1.4; padding: 10px 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .shop-paused-banner-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .shop-paused-banner strong { font-weight: 700; font-size: 15px; } .shop-paused-reason { background: rgba(255,255,255,0.18); padding: 3px 10px; border-radius: 999px; font-size: 13px; } .shop-paused-when { margin-left: auto; opacity: 0.85; font-size: 13px; font-style: italic; } /* Wenn Shop-Paused-Banner sichtbar ist, die min-height von .sf-app * um die Bannerhöhe reduzieren, sonst entsteht unnötiges Leer-Scroll. * Das Banner ist sticky → nimmt im Layout trotzdem Platz → 100vh + Banner * = mehr als Viewport. */ body[data-shop-paused="1"] .sf-app { min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px); } /* Body-Flag: Alle Checkout-Buttons ausgrauen wenn Shop pausiert. * Konkrete Klassen im Projekt: * .sf-cart-cta → „Bezahlen (29,50 €)" im Cart-Drawer der Storefront * .co-submit → „Jetzt kostenpflichtig bestellen" im Checkout-Formular */ body[data-shop-paused="1"] .sf-cart-cta, body[data-shop-paused="1"] .co-submit { opacity: 0.5 !important; pointer-events: none !important; cursor: not-allowed !important; filter: grayscale(70%); background: #9ca3af !important; border-color: #9ca3af !important; } @media (max-width: 620px) { .shop-paused-banner-inner { gap: 8px; } .shop-paused-when { margin-left: 0; width: 100%; } } /* Menü-Nummer vor Artikelname — grau, wie in der Speisekarte */ .sf-cart-item-nr, .co-summary-item-nr, .ord-item-nr { display: inline-block; font-family: 'Mona Sans', ui-monospace, monospace; font-weight: 600; color: var(--text-muted); margin-right: 3px; } /* Extras untereinander: + (Hinzufügen) grün, − (Entfernen) rot */ .sf-cart-item-extras .plus, .co-summary-item-meta .plus, .ord-item-meta .plus { color: var(--green, #0a8a4e); font-weight: 700; margin-right: 3px; } .sf-cart-item-extras .minus, .co-summary-item-meta .minus, .ord-item-meta .minus { color: var(--red, #dc2626); font-weight: 700; margin-right: 3px; } /* ============================================================ FAHRER-APP (`/fahrer`) — Mockup-Reimplementierung 2026-04-25 Mobile-First, Klassen-Prefix `drv-`. Alle Driver-spezifischen Custom-Props sind auf `.drv-app` gescoped, damit sie nicht den globalen Customer-Namespace verschmutzen. ============================================================ */ .drv-app { --drv-bg: #f3f3f3; --drv-off-white: #f8f8f8; --drv-green-bright: #10b981; --drv-green-dark: #064e3b; --drv-amber: #eab308; --drv-amber-soft: #fef9c3; --drv-amber-dark: #854d0e; --drv-red: #dc2626; --drv-blue: #0ea5e9; --drv-blue-soft: #e0f2fe; --drv-purple: #7c3aed; --drv-purple-soft: #f3eeff; background: var(--drv-bg); min-height: 100vh; padding-bottom: 16px; font-variant-numeric: tabular-nums; color: var(--ink); } /* ----- Header ----- */ .drv-header { background: var(--white); border-bottom: 1px solid var(--line); padding: 16px 18px 14px; } .drv-header-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .drv-identity { display: flex; align-items: center; gap: 11px; min-width: 0; } .drv-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: var(--white); display: grid; place-items: center; font-size: 16px; font-weight: 800; text-transform: uppercase; flex-shrink: 0; position: relative; box-shadow: 0 2px 8px -1px rgba(200, 55, 45, 0.3); } .drv-avatar::after { content: ''; position: absolute; bottom: -1px; right: -1px; width: 12px; height: 12px; background: var(--drv-green-bright); border: 2.5px solid var(--white); border-radius: 50%; } .drv-greeting { min-width: 0; } .drv-greeting-line { font-size: 12px; color: var(--text-soft); line-height: 1.1; } .drv-greeting-name { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.015em; line-height: 1.15; margin-top: 1px; } .drv-greeting-restaurant { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; } .drv-header-actions { display: flex; gap: 5px; flex-shrink: 0; align-items: center; } .drv-logout-form { margin: 0; padding: 0; } .drv-header-icon-btn { width: 36px; height: 36px; background: var(--drv-off-white); border: none; border-radius: 10px; display: grid; place-items: center; color: var(--text-soft); cursor: pointer; transition: background 0.12s, color 0.12s, transform 0.12s; padding: 0; } .drv-header-icon-btn:hover { background: var(--drv-bg); color: var(--ink); } .drv-header-icon-btn:active { transform: scale(0.95); } .drv-header-icon-btn svg { width: 16px; height: 16px; } @keyframes drv-spin { to { transform: rotate(360deg); } } .drv-refresh-btn.is-spinning svg { animation: drv-spin 0.6s linear; } /* ----- Flash-Banners ----- */ .drv-flash { margin: 12px 14px 0; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; } .drv-flash.ok { background: var(--green-soft); color: var(--green); } .drv-flash.err { background: #fef2f2; color: var(--drv-red); } /* ----- KPI-Row ----- */ .drv-kpi-row { padding: 14px 14px 4px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; } .drv-kpi { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 10px; text-align: center; overflow: hidden; } .drv-kpi-icon { font-size: 16px; margin-bottom: 4px; display: block; line-height: 1; } .drv-kpi-value { font-size: 20px; font-weight: 800; letter-spacing: -0.025em; line-height: 1; color: var(--ink); } .drv-kpi-value-money { font-size: 17px; } .drv-kpi-label { font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; } .drv-kpi.cash { background: linear-gradient(135deg, #fef9c3 0%, #fef0a3 100%); border-color: rgba(234, 179, 8, 0.35); } .drv-kpi.cash .drv-kpi-value { color: var(--drv-amber-dark); } .drv-kpi.cash .drv-kpi-label { color: var(--drv-amber-dark); opacity: 0.75; } .drv-kpi.tip { background: linear-gradient(135deg, var(--green-soft) 0%, #d3f5e2 100%); border-color: rgba(10, 138, 78, 0.25); } .drv-kpi.tip .drv-kpi-value { color: var(--green); } .drv-kpi.tip .drv-kpi-label { color: var(--green); opacity: 0.75; } /* ----- Section Wrapper ----- */ .drv-section { padding: 18px 14px 0; } .drv-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 4px; } .drv-section-title { font-size: 16px; font-weight: 800; letter-spacing: -0.015em; display: flex; align-items: center; gap: 7px; } .drv-section-emoji { font-size: 16px; } .drv-section-meta { font-size: 11.5px; color: var(--text-soft); font-weight: 600; } .drv-section-meta strong { color: var(--ink); font-weight: 700; } /* ----- Tour-Card (active tour) ----- */ .drv-tour-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; position: relative; box-shadow: 0 4px 12px -3px rgba(0, 0, 0, 0.06); margin-bottom: 10px; } .drv-tour-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--drv-green-bright); } .drv-tc-cash-alert { background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%); border-bottom: 1px solid rgba(234, 179, 8, 0.3); padding: 10px 16px; display: flex; align-items: center; gap: 10px; } .drv-tc-cash-alert-icon { font-size: 18px; flex-shrink: 0; } .drv-tc-cash-alert-text { flex: 1; font-size: 12.5px; color: var(--drv-amber-dark); font-weight: 600; line-height: 1.3; } .drv-tc-cash-alert-text strong { font-weight: 800; font-size: 14px; } .drv-tc-head { padding: 14px 16px 8px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .drv-tc-head-left { flex: 1; min-width: 0; } .drv-tc-id { font-size: 10px; color: var(--text-muted); font-weight: 600; letter-spacing: 0.04em; margin-bottom: 2px; } .drv-tc-customer { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; } .drv-tc-head-right { text-align: right; flex-shrink: 0; } .drv-tc-price { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1; } .drv-tc-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 5px; } .drv-tc-pill.cash { background: var(--drv-amber-soft); color: var(--drv-amber-dark); } .drv-tc-pill.cash::before { content: '💰'; font-size: 11px; margin-right: 1px; } .drv-tc-pill.paid { background: var(--green-soft); color: var(--green); } .drv-tc-pill.paid::before { content: '✓'; font-weight: 800; } .drv-tc-section { padding: 12px 16px; border-top: 1px solid var(--line-soft); } .drv-tc-address { display: flex; gap: 12px; align-items: flex-start; } .drv-tc-pin { width: 36px; height: 36px; background: var(--brand-soft); border-radius: 9px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; } .drv-tc-address-info { flex: 1; min-width: 0; } .drv-tc-address-line { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; line-height: 1.3; } .drv-tc-address-extra { font-size: 12px; color: var(--text-soft); margin-top: 2px; line-height: 1.35; } .drv-tc-items-summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--line-soft); cursor: pointer; background: transparent; width: 100%; border-left: none; border-right: none; border-bottom: none; color: inherit; font: inherit; text-align: left; transition: background 0.1s; } .drv-tc-items-summary:hover { background: var(--drv-off-white); } .drv-tc-items-label { font-size: 12.5px; color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 6px; } .drv-tc-items-icon { width: 22px; height: 22px; background: var(--drv-off-white); border-radius: 6px; display: grid; place-items: center; font-size: 12px; flex-shrink: 0; } .drv-tc-chevron { color: var(--text-muted); transition: transform 0.2s; } .drv-tc-chevron svg { width: 14px; height: 14px; } .drv-tc-items-summary[aria-expanded="true"] .drv-tc-chevron { transform: rotate(180deg); } .drv-tc-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line-soft); } .drv-quick-btn { padding: 11px 12px; background: var(--drv-off-white); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 7px; letter-spacing: -0.005em; transition: background 0.12s, transform 0.12s; cursor: pointer; text-decoration: none; } .drv-quick-btn:hover { background: var(--drv-bg); } .drv-quick-btn:active { transform: scale(0.97); } .drv-quick-btn svg { width: 14px; height: 14px; } .drv-quick-btn.nav { background: var(--drv-blue-soft); border-color: rgba(14, 165, 233, 0.25); color: #0369a1; } .drv-quick-btn.nav:hover { background: #d1eafd; } .drv-quick-btn.call { background: var(--drv-purple-soft); border-color: rgba(124, 58, 237, 0.25); color: var(--drv-purple); } .drv-quick-btn.call:hover { background: #ebe2fc; } .drv-quick-btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; font-size: 12px; } .drv-tc-cta { padding: 12px 14px 14px; border-top: 1px solid var(--line-soft); background: var(--drv-off-white); } .drv-btn-deliver { width: 100%; padding: 14px; background: var(--green); color: var(--white); border: none; border-radius: 12px; font-size: 15px; font-weight: 800; letter-spacing: -0.01em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.12s, transform 0.12s; box-shadow: 0 4px 12px -3px rgba(10, 138, 78, 0.35); white-space: nowrap; cursor: pointer; font-family: inherit; } .drv-btn-deliver:hover { background: #0a7040; } .drv-btn-deliver:active { transform: scale(0.98); } .drv-btn-deliver:disabled { opacity: 0.6; cursor: progress; } .drv-btn-deliver svg { width: 16px; height: 16px; flex-shrink: 0; } .drv-btn-deliver.cash-mode { background: linear-gradient(135deg, var(--drv-amber-dark) 0%, #654a0d 100%); box-shadow: 0 4px 12px -3px rgba(133, 77, 14, 0.35); font-size: 14px; gap: 6px; } .drv-btn-deliver-amount { background: rgba(255, 255, 255, 0.2); padding: 2px 9px; border-radius: 6px; margin-left: 2px; font-size: 13px; white-space: nowrap; flex-shrink: 0; } /* ----- Pool-Card (ready, kompakter als Tour-Card) ----- */ .drv-pool-card { background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 10px; } .drv-btn-take { width: 100%; padding: 12px; background: var(--brand); color: var(--white); border: none; border-radius: 10px; font-size: 14px; font-weight: 800; letter-spacing: -0.005em; cursor: pointer; transition: background 0.12s, transform 0.12s; font-family: inherit; } .drv-btn-take:hover { background: var(--brand-dark); } .drv-btn-take:active { transform: scale(0.98); } .drv-btn-take:disabled { opacity: 0.6; cursor: progress; } /* ----- Empty-State ----- */ .drv-empty { background: var(--white); border: 1.5px dashed var(--line); border-radius: 12px; padding: 22px 18px; text-align: center; } .drv-empty-text { font-size: 13px; color: var(--text-soft); line-height: 1.5; } /* ----- Completed-Liste ----- */ .drv-completed-list { display: flex; flex-direction: column; gap: 8px; } .drv-completed-item { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; } .drv-completed-time { background: var(--drv-off-white); color: var(--text); padding: 4px 9px; border-radius: 7px; font-size: 12px; font-weight: 700; flex-shrink: 0; min-width: 50px; text-align: center; } .drv-completed-info { flex: 1; min-width: 0; } .drv-completed-customer { font-size: 13.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.005em; line-height: 1.2; } .drv-completed-address { font-size: 11.5px; color: var(--text-soft); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drv-completed-amounts { text-align: right; flex-shrink: 0; } .drv-completed-amount { font-size: 13.5px; font-weight: 800; color: var(--ink); line-height: 1.1; } .drv-completed-tip { font-size: 10.5px; color: var(--green); font-weight: 700; margin-top: 2px; display: flex; align-items: center; gap: 3px; justify-content: flex-end; } .drv-completed-tip::before { content: '+'; font-weight: 800; } .drv-completed-tip.cash { color: var(--drv-amber-dark); } .drv-completed-pill { display: inline-block; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-top: 3px; letter-spacing: 0.04em; text-transform: uppercase; } .drv-completed-pill.cash { background: var(--drv-amber-soft); color: var(--drv-amber-dark); } .drv-completed-pill.paid { background: var(--green-soft); color: var(--green); } .drv-safe-bottom { height: 16px; flex-shrink: 0; } /* ----- Info-Modal ----- */ .drv-info-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 1000; display: grid; place-items: center; padding: 20px; } .drv-info-backdrop[hidden] { display: none; } .drv-info-box { background: var(--white); border-radius: 16px; padding: 22px; max-width: 460px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.4); } .drv-info-close { position: absolute; top: 8px; right: 12px; background: transparent; border: none; font-size: 28px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 4px 10px; } .drv-info-close:hover { color: var(--ink); } .drv-info-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; } .drv-info-title { font-size: 18px; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.015em; } .drv-info-sect { margin-top: 12px; } .drv-info-sect h4 { font-size: 13.5px; font-weight: 700; margin: 0 0 4px; } .drv-info-sect p { font-size: 13px; color: var(--text-soft); line-height: 1.45; margin: 0; } .drv-info-tip { margin-top: 16px; padding: 10px 12px; background: var(--drv-off-white); border-radius: 10px; font-size: 12px; color: var(--text-soft); line-height: 1.45; } /* ----- Mobile-Adaption (unter 720 px noch enger) ----- */ @media (max-width: 720px) { .drv-section { padding: 16px 12px 0; } .drv-kpi-row { padding: 12px 12px 4px; } .drv-kpi { padding: 10px 8px; } .drv-kpi-value { font-size: 18px; } .drv-kpi-value-money { font-size: 15px; } .drv-tc-customer { font-size: 16px; } .drv-tc-price { font-size: 16px; } } /* ----- Driver-Login (`/fahrer/login`) ----- */ .drv-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); } .drv-login-box { background: var(--white); border-radius: 20px; padding: 36px 28px; max-width: 380px; width: 100%; text-align: center; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); } .drv-login-logo { width: 70px; height: 70px; border-radius: 18px; background: var(--brand); color: var(--white); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 30px; font-weight: 700; overflow: hidden; } .drv-login-logo img { width: 100%; height: 100%; object-fit: cover; } .drv-login-title { font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.02em; } .drv-login-sub { font-size: 14px; color: var(--text-soft); margin-bottom: 26px; } .drv-login-err { padding: 12px 14px; background: #fee2e2; color: #7f1d1d; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; text-align: left; } .drv-login-form { display: flex; flex-direction: column; gap: 14px; text-align: left; } .drv-login-form label { font-size: 12px; font-weight: 700; color: var(--text-soft); letter-spacing: 0.04em; text-transform: uppercase; } .drv-login-form input { padding: 18px 20px; border: 2px solid var(--line); border-radius: 14px; font-size: 28px; font-weight: 700; text-align: center; letter-spacing: 0.5em; outline: none; font-variant-numeric: tabular-nums; transition: border-color 0.12s; font-family: inherit; } .drv-login-form input:focus { border-color: var(--brand); } .drv-login-form button { padding: 16px; background: var(--brand); color: var(--white); border: none; border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background 0.12s; font-family: inherit; } .drv-login-form button:hover { background: var(--brand-dark); } .drv-login-hint { margin-top: 20px; font-size: 12px; color: var(--text-muted); } /* ============================================================ CUSTOMER-FOOTER + ALLERGENE-ACCORDION + SEO/FAQ-BLOCK Erscheint auf allen Customer-Pages via `views/layouts/customer.php`. Klassen-Prefix `sf-foot-` (passt zum bestehenden sf-Namespace). ============================================================ */ /* SEO/FAQ-Block (über dem Footer) */ .sf-foot-seo { background: var(--white); border-top: 1px solid var(--line-soft); padding: 32px 16px; margin-top: 40px; } .sf-foot-seo-inner { max-width: 960px; margin: 0 auto; } .sf-foot-seo-intro { font-size: 14px; color: var(--text); line-height: 1.6; margin-bottom: 24px; } .sf-foot-faq-title { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.015em; margin: 0 0 14px; } .sf-foot-faqs { display: flex; flex-direction: column; gap: 8px; } .sf-foot-faq { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0; overflow: hidden; } .sf-foot-faq[open] { background: var(--white); } .sf-foot-faq-q { cursor: pointer; list-style: none; padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .sf-foot-faq-q::-webkit-details-marker { display: none; } .sf-foot-faq-q::after { content: '+'; font-size: 20px; font-weight: 600; color: var(--brand); line-height: 1; flex-shrink: 0; } .sf-foot-faq[open] .sf-foot-faq-q::after { content: '−'; } .sf-foot-faq-a { padding: 0 16px 14px; font-size: 13.5px; color: var(--text); line-height: 1.55; } /* Allergene-Accordion */ .sf-foot-allergen { background: var(--brand-soft); border-top: 1px solid var(--line-soft); padding: 0; } .sf-foot-allergen-wrap { max-width: 1440px; margin: 0 auto; padding: 0 24px; } .sf-foot-allergen-summary { cursor: pointer; list-style: none; padding: 18px 4px; display: flex; align-items: center; gap: 12px; } .sf-foot-allergen-summary::-webkit-details-marker { display: none; } .sf-foot-allergen-title { font-size: 14px; font-weight: 800; color: var(--ink); letter-spacing: -0.005em; } .sf-foot-allergen-hint { flex: 1; font-size: 12px; color: var(--text-soft); } .sf-foot-allergen-toggle { font-size: 22px; font-weight: 600; color: var(--brand); line-height: 1; flex-shrink: 0; width: 22px; text-align: center; transition: transform 0.18s; } .sf-foot-allergen-wrap[open] .sf-foot-allergen-toggle { transform: rotate(45deg); /* + → × visuell */ } .sf-foot-allergen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; padding: 8px 4px 22px; } .sf-foot-allergen-coltitle { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand); margin: 0 0 10px; } .sf-foot-allergen-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .sf-foot-allergen-item { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text); line-height: 1.4; } .sf-foot-allergen-code { display: inline-grid; place-items: center; width: 24px; min-width: 24px; height: 22px; border-radius: 5px; background: var(--white); border: 1px solid var(--line); font-size: 11px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; } .sf-foot-allergen-name { color: var(--text); } /* Footer */ .sf-foot { background: var(--white); border-top: 1px solid var(--line); padding: 36px 0 24px; margin-top: 0; } .sf-foot-inner { max-width: 1440px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } .sf-foot-col { min-width: 0; } .sf-foot-col-brand .sf-foot-eyebrow { color: var(--ink); font-size: 13px; letter-spacing: 0.04em; } .sf-foot-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; } .sf-foot-desc { font-size: 12px; color: var(--text-soft); line-height: 1.55; margin: 0; } .sf-foot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text); } .sf-foot-link { color: var(--text); text-decoration: none; transition: color 0.12s; } .sf-foot-link:hover { color: var(--brand); } .sf-foot-brand-name { font-size: 13px; letter-spacing: 0.04em; color: var(--ink); font-weight: 800; margin-bottom: 12px; } /* Social-Icons in Brand-Spalte */ .sf-foot-social { display: flex; gap: 8px; margin-top: 16px; } .sf-foot-social-btn { width: 36px; height: 36px; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; color: var(--text); transition: background 0.12s, color 0.12s, border-color 0.12s; } .sf-foot-social-btn:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); } .sf-foot-social-btn svg { width: 16px; height: 16px; } /* Liefergebiete als 1-spaltige Liste mit Pin-Icons (eine Zone pro Zeile) */ .sf-foot-zones-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .sf-foot-zones-grid[hidden] { display: none; } /* Liefergebiete-Toggle: Desktop verhält sich wie ein normaler Eyebrow (kein Chevron, kein Cursor-Pointer, Toggle deaktiviert). Mobile blendet den Chevron ein + macht den Button klickbar mit rotation animation. */ .sf-foot-zones-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: default; /* sf-foot-eyebrow-Klasse bringt font-size, letter-spacing, color, etc. mit */ } .sf-foot-zones-chev { display: none; width: 16px; height: 16px; transition: transform 0.2s ease; flex-shrink: 0; margin-left: auto; } @media (max-width: 720px) { .sf-foot-zones-toggle { cursor: pointer; justify-content: space-between; padding: 6px 0; margin-bottom: 0; /* eyebrow hat 12px — bei collapsed kein extra Abstand */ -webkit-tap-highlight-color: transparent; } .sf-foot-zones-toggle[aria-expanded="true"] { margin-bottom: 12px; /* Abstand zur ausgeklappten Liste */ } .sf-foot-zones-chev { display: inline-block; } .sf-foot-zones-toggle[aria-expanded="true"] .sf-foot-zones-chev { transform: rotate(180deg); } } .sf-foot-zone { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .sf-foot-zone-pin { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; background: var(--brand-soft); border-radius: 7px; color: var(--brand); } .sf-foot-zone-pin svg { width: 14px; height: 14px; } .sf-foot-zone-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .sf-foot-zone-name { font-weight: 600; color: var(--ink); font-size: 13px; line-height: 1.3; } .sf-foot-zone-plz { font-size: 11.5px; color: var(--text-soft); font-variant-numeric: tabular-nums; line-height: 1.4; } /* Kontakt-Liste mit Icons */ .sf-foot-contact { gap: 10px; } .sf-foot-contact-row { display: flex; align-items: flex-start; gap: 10px; } .sf-foot-contact-icon { flex-shrink: 0; color: var(--text-soft); margin-top: 2px; } .sf-foot-contact-icon svg { width: 14px; height: 14px; } .sf-foot-contact-text { line-height: 1.4; color: var(--text); word-break: break-word; min-width: 0; } /* Bottom-Bar: Copyright + Powered-by */ .sf-foot-bottom { border-top: 1px solid var(--line-soft); margin-top: 28px; padding-top: 18px; } .sf-foot-bottom-inner { max-width: 1440px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); } .sf-foot-copy { line-height: 1.4; } .sf-foot-poweredby strong { color: var(--brand); font-weight: 700; } .sf-foot-biyamara { display: inline-flex; align-items: center; justify-content: center; line-height: 0; opacity: 0.85; transition: opacity 0.15s; text-decoration: none; vertical-align: middle; /* Inline-SVG erbt Schrift-Farbe via currentColor — schwarz für Schrift, der Akzent-Quadrat bleibt orange (hardcoded im SVG-rect-fill). */ color: var(--ink, #1a1a1a); } .sf-foot-biyamara:hover { opacity: 1; } /* `.sf-foot-biyamara` als Parent erhöht Spezifität auf 0,2,0 — schlägt die generische `.sf-foot svg`-Regel (0,1,1) die sonst auf 16×16 zwingt. */ .sf-foot-biyamara .sf-foot-biyamara-svg { display: block; width: 150px; height: auto; } /* Mobile-Adaption: 4 Spalten → 1 Spalte gestapelt */ @media (max-width: 720px) { .sf-foot { padding: 28px 16px 20px; } .sf-foot-inner { grid-template-columns: 1fr; gap: 22px; } .sf-foot-allergen-grid { grid-template-columns: 1fr; gap: 18px; } .sf-foot-seo { padding: 24px 16px; } .sf-foot-zones-grid { gap: 8px; } .sf-foot-inner { padding: 0 16px; } .sf-foot-bottom-inner { padding: 0 16px; } .sf-foot-allergen-wrap { padding: 0 16px; } .sf-foot-bottom-inner { flex-direction: column; align-items: flex-start; gap: 6px; } } /* ============================================================ MENÜS — Storefront-Surfaces (Top-Slider + Section + Cat-Pill) Klassen-Prefix `sf-menu-` und `sf-menus-`. Configurator-Modal kommt in Phase C als eigener Block, hier nur Discovery-UI. ============================================================ */ /* Top-Slider (max 5 Menüs) — visuell verwandt mit sf-cart-rec-list, aber größer (mehr Bild-Anteil) weil's prominent unter dem Hero sitzt. Snap-Scroll auf Mobile, normale Cards auf Desktop. */ .sf-menus-slider { margin: 0; padding: 0; } .sf-menus-slider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .sf-menus-slider-title { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0; } .sf-menus-slider-list { display: grid; grid-auto-flow: column; grid-auto-columns: 240px; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; /* Negative Margins damit Karten am Viewport-Rand bündig anfangen, aber innerhalb des Hauptcontents. Padding bringt's zurück. */ margin: 0 calc(-1 * var(--sf-main-px, 16px)); padding: 4px var(--sf-main-px, 16px) 8px; } .sf-menus-slider-list::-webkit-scrollbar { display: none; } /* Eigene Section über den Kategorien (Grid mit max-2-Spalten Desktop) */ .sf-menus-section { scroll-margin-top: 140px; margin-top: 8px; } .sf-menus-section-head { display: grid; grid-template-columns: 68px 1fr auto; gap: 16px; align-items: center; margin-bottom: 16px; padding: 16px 18px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; position: relative; overflow: hidden; } .sf-menus-section-head::before { content: ''; position: absolute; right: 0; top: 0; width: 220px; height: 100%; background: linear-gradient(270deg, var(--brand-soft) 0%, transparent 80%); pointer-events: none; opacity: 0.55; } .sf-menus-section-head-icon { width: 68px; height: 68px; border-radius: 12px; background: var(--cream-2); display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0; } .sf-menus-section-head-main { min-width: 0; position: relative; } .sf-menus-section-eyebrow { font-family: 'Mona Sans', ui-monospace, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 3px; } .sf-menus-section-title { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; color: var(--ink); line-height: 1.1; } .sf-menus-section-count { position: relative; text-align: center; padding-left: 12px; flex-shrink: 0; } .sf-menus-section-count-num { font-family: 'Mona Sans', sans-serif; font-variant-numeric: tabular-nums; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: var(--brand); line-height: 1; } .sf-menus-section-count-lbl { font-family: 'Mona Sans', ui-monospace, monospace; font-size: 10.5px; font-weight: 600; color: var(--text-soft); margin-top: 3px; letter-spacing: 0.05em; text-transform: uppercase; } /* Section-Grid (analog sf-products) */ .sf-menus-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } /* Menü-Card — kommt in zwei Größen: Slider-Card (240px) + Section-Card (Grid). Gleicher Style, Layout passt sich automatisch dem Container an. */ .sf-menu-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.05s; text-align: left; width: 100%; display: flex; flex-direction: column; scroll-snap-align: start; position: relative; } .sf-menu-card:hover { border-color: var(--brand); box-shadow: var(--shadow-md); } .sf-menu-card:active { transform: scale(0.99); } .sf-menu-card-img { width: 100%; aspect-ratio: 4 / 3; background: var(--cream-2); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .sf-menu-card-img[data-aspect="portrait"] { aspect-ratio: 3 / 4; } .sf-menu-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sf-menu-card-img-placeholder { font-size: 56px; line-height: 1; opacity: 0.85; filter: saturate(0.9); } /* Badge oben links auf der Card — entweder „Neu" oder Verfügbarkeits-Hinweis */ .sf-menu-card-badge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; font-family: 'Mona Sans', ui-monospace, monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--brand); color: white; box-shadow: 0 2px 6px rgba(0,0,0,0.12); } .sf-menu-card-badge.is-unavailable { background: rgba(10, 10, 10, 0.78); color: white; text-transform: none; letter-spacing: 0.02em; font-family: inherit; font-size: 11.5px; font-weight: 600; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Differentiator-Badge: nur in Cat-Section-Loop (nicht im Hero-Slider) damit der Gast „Komplett-Paket ≠ Einzelprodukt" sofort sieht. Oben rechts statt links damit's nicht mit dem unavailable/new-Badge kollidiert. Dezenter weißer BG + dunkler Text, kontrastiert mit dem grünen Brand-Badge links. */ .sf-menu-card-badge.sf-menu-card-badge-type { left: auto; right: 10px; background: rgba(255, 255, 255, 0.92); color: var(--ink); text-transform: none; letter-spacing: 0.01em; font-family: inherit; font-size: 11px; font-weight: 700; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .sf-menu-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .sf-menu-card-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sf-menu-card-desc { font-size: 12.5px; color: var(--text-soft); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sf-menu-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; gap: 8px; } .sf-menu-card-price { font-weight: 700; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; } .sf-menu-card-price .from { font-size: 11px; color: var(--text-soft); font-weight: 500; margin-right: 3px; text-transform: lowercase; } .sf-menu-card-cta { width: 32px; height: 32px; background: var(--ink); color: white; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.12s, transform 0.05s; } .sf-menu-card-cta:hover { background: var(--brand); } .sf-menu-card-cta:active { transform: scale(0.92); } .sf-menu-card-cta svg { width: 15px; height: 15px; stroke-width: 2.5; } /* Card im Unavailable-State: ausgegraut + Cursor not-allowed, Click bleibt aktiv (zeigt Toast mit Verfügbarkeits-Hinweis). */ .sf-menu-card.is-unavailable { opacity: 0.55; filter: grayscale(0.4); } .sf-menu-card.is-unavailable:hover { border-color: var(--line); box-shadow: none; } .sf-menu-card.is-unavailable .sf-menu-card-cta { background: var(--text-muted); cursor: help; } /* Mobile-Tweaks: Slider-Card wird etwas schmaler (200px statt 240px), Section-Grid auf 1 Spalte. */ @media (max-width: 720px) { .sf-menus-slider-list { grid-auto-columns: 200px; /* Auf Mobile KEIN negative-margin-Trick — der Slider soll bündig mit dem Section-Title-Abstand starten (16px vom Viewport-Rand, kommt vom .sf-body-padding). Sonst klebt die erste Card am Rand. */ margin: 0; padding: 4px 0 8px; } .sf-menus-grid { grid-template-columns: 1fr; } .sf-menus-section-head { grid-template-columns: 52px 1fr auto; gap: 12px; padding: 14px 16px; } .sf-menus-section-head-icon { width: 52px; height: 52px; font-size: 22px; } .sf-menus-section-title { font-size: 19px; } .sf-menus-section-count-num { font-size: 24px; } .sf-menus-section-count-lbl { font-size: 9.5px; } .sf-menu-card-name { font-size: 14.5px; } .sf-menu-card-price { font-size: 15px; } } @media (max-width: 480px) { .sf-menus-slider-list { grid-auto-columns: 180px; } } /* ============================================================ Promotion-Banner pro Kategorie (Phase A der Promotions-V1-UI) Sichtbar über jeder `.sf-cat-section` wenn Backend `active_promotions[]` für die Kategorie liefert (gefiltert nach Wochentag/Zeitfenster/Order-Type). Frontend zeigt max 2 pro Kategorie (Spec aus Backend-Inbox). Aktions-Akzentfarbe Orange — tenant-agnostisch (Brand-Farbe ist je Tenant unterschiedlich, würde optisch unruhig wirken). ============================================================ */ .sf-promo-banners { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .sf-promo-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fef3c7; border: 1px solid #fbbf24; border-radius: 10px; color: #78350f; font-size: 13.5px; line-height: 1.4; } .sf-promo-banner-icon { font-size: 20px; line-height: 1; flex-shrink: 0; } .sf-promo-banner-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; } .sf-promo-banner-label { font-weight: 700; color: #78350f; } .sf-promo-banner-hint { font-weight: 500; color: #92400e; } @media (max-width: 600px) { .sf-promo-banner { padding: 9px 12px; font-size: 13px; gap: 10px; } .sf-promo-banner-icon { font-size: 18px; } .sf-promo-banners { gap: 6px; margin-bottom: 12px; } } /* ============================================================ Konto-Bereich (Mein-Konto-Layout) Klassen-Prefix `konto-*` (semantisch eindeutig, kein sf-/co-/cat-Namespace). War vorher inline-CSS im `views/customer/konto/_layout.php` — ausgelagert damit Critical-CSS-Pattern + Cache-Buster greifen. Maße: gleicher max-width wie `.sf-body` (1440px) damit der Konto-Bereich visuell unter dem Header bündig sitzt statt schmaler/breiter zu wirken. ============================================================ */ /* Globale Ergänzung: Scrollbar-Gutter reservieren damit Layout nicht springt wenn Content kürzer/länger wird als Viewport. Wirkt überall, nicht nur im Konto. Wenn das auf der Storefront/Checkout Probleme macht (sehe ich aktuell nicht), dann später per Page-Klasse scopen. */ html { scrollbar-gutter: stable; } .konto-back, .konto-logout { font-size: 13px; padding: 6px 12px; border-radius: 8px; text-decoration: none; border: 1px solid var(--line); background: var(--white); color: var(--text); cursor: pointer; font-family: inherit; } .konto-back:hover, .konto-logout:hover { background: var(--cream-2); } /* Helper-Klassen ersetzen die letzten inline-styles auf Forms/Containers (war vorher style="display:inline;" / style="margin:0;" auf Action-Forms und style="display:flex;..." auf dem Header-Buttons-Wrapper). */ .konto-form-inline { display: inline; margin: 0; } .konto-header-actions { display: flex; gap: 8px; align-items: center; } .konto-wrap { max-width: 1440px; /* analog .sf-body */ width: 100%; /* WICHTIG: parent `.sf-app` ist flex-column, ohne `width:100%` schrumpft der Wrap auf Content-Größe und sieht im Viewport zu schmal aus. Storefront `.sf-body` macht das gleiche. */ margin: 24px auto 60px; padding: 0 28px; /* analog .sf-header-inner-Side-Padding */ display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; align-items: start; box-sizing: border-box; } .konto-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 88px; /* unter dem sticky Header */ align-self: start; } .konto-nav a { padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; transition: background 0.12s; } .konto-nav a:hover { background: var(--cream-2); } .konto-nav a.active { background: var(--ink); color: white; } .konto-main { min-width: 0; } .konto-flash { padding: 12px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 14px; } .konto-flash.ok { background: var(--green-soft); color: #065f46; } .konto-flash.err { background: #fee2e2; color: #7f1d1d; } .konto-card { background: var(--white); border-radius: 14px; padding: 22px 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); margin-bottom: 16px; } .konto-card h2 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 14px; } /* Newsletter-Einwilligung: Checkbox-Row unter dem Profil-Grid */ .konto-consent { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--bg, #f3f3f3); border: 1px solid var(--line, #e5e5e5); border-radius: 10px; margin: 16px 0; cursor: pointer; transition: border-color .12s; } .konto-consent:hover { border-color: var(--text-soft, #6b6b6b); } .konto-consent input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; cursor: pointer; accent-color: var(--brand, #c8372d); } .konto-consent span { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.45; } .konto-consent small { color: var(--text-soft, #6b6b6b); font-size: 12.5px; font-weight: 400; } @media (max-width: 900px) { .konto-wrap { grid-template-columns: 1fr; padding: 0 16px; margin: 16px auto 40px; gap: 16px; } .konto-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; position: static; } .konto-nav::-webkit-scrollbar { display: none; } .konto-nav a { flex-shrink: 0; white-space: nowrap; } } /* ───── Konto: Übersicht (Stats + Profil-Form + Recent-Orders) ───── */ .konto-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .konto-stat-val { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); } .konto-stat-lbl { font-size: 12px; color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-top: 2px; } /* Form-Styles — werden auf der Übersicht (Profil) UND auf Adressen genutzt. */ .konto-form { display: flex; flex-direction: column; gap: 14px; } .konto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .konto-full { grid-column: 1 / -1; } .konto-form label { display: block; font-size: 12px; font-weight: 600; color: var(--text-soft); margin-bottom: 4px; letter-spacing: 0.02em; } .konto-form input, .konto-form textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.12s; box-sizing: border-box; } .konto-form input:focus, .konto-form textarea:focus { border-color: var(--brand); } .konto-form input:disabled { opacity: 0.6; } /* „(optional)"-Hint neben Field-Labels */ .konto-optional-hint { color: var(--text-muted); font-weight: 400; font-size: 11px; } .konto-btn { align-self: flex-start; padding: 10px 18px; background: var(--brand); color: white; border: none; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; transition: background 0.12s; } .konto-btn:hover { background: var(--brand-dark); } /* Recent-Orders auf Übersicht */ .konto-order { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px; margin-bottom: 6px; text-decoration: none; color: var(--ink); transition: background 0.12s, border-color 0.12s; } .konto-order:hover { background: var(--cream-2); border-color: var(--text-soft); } .konto-order-num { font-family: 'Mona Sans', monospace; font-size: 11.5px; color: var(--text-muted); font-weight: 600; } .konto-order-date { font-size: 13.5px; color: var(--ink); margin-top: 2px; } .konto-order-right { text-align: right; } .konto-order-total { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; } /* Status-Pills — geteilt zwischen Übersicht + Bestellungen-Liste */ .konto-order-status { font-size: 11.5px; font-weight: 600; margin-top: 2px; padding: 2px 8px; border-radius: 999px; display: inline-block; } .konto-order-status.is-active { background: var(--green-soft); color: var(--green); } .konto-order-status.is-pending { background: #fef3c7; color: #92400e; } .konto-order-status.is-disabled { background: #fee2e2; color: #991b1b; } .konto-order-status.is-done { background: var(--cream-2); color: var(--text-soft); } .konto-link-all { display: block; margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--brand); text-decoration: none; font-weight: 600; } .konto-link-all:hover { text-decoration: underline; } /* Inline-Brand-Link (z.B. Empty-State CTA „Speisekarte ansehen") */ .konto-link-inline { color: var(--brand); font-weight: 600; } /* Empty-State (zentrierter Hint mit Cream-BG) — Adressen + Bestellungen */ .konto-empty-hint { padding: 20px 16px; background: var(--cream-2); border-radius: 10px; color: var(--text-soft); font-size: 13.5px; margin-bottom: 14px; } .konto-empty-state { padding: 30px 20px; text-align: center; color: var(--text-soft); font-size: 14px; } /* ───── Konto: Adressen ───── */ .addr-card { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 12px; margin-bottom: 10px; background: var(--white); } .addr-card.is-default { border-color: var(--brand); background: var(--white); } .addr-info { min-width: 0; flex: 1; } .addr-default-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--brand); color: white; font-size: 11px; font-weight: 700; margin-bottom: 6px; } .addr-name { font-weight: 700; font-size: 14.5px; color: var(--ink); } .addr-text { font-size: 13.5px; color: var(--text); line-height: 1.5; margin-top: 4px; } .addr-note { font-size: 12.5px; color: var(--text-soft); font-style: italic; margin-top: 4px; } .addr-actions { display: flex; gap: 6px; flex-shrink: 0; } .addr-add { margin-top: 16px; border: 1px dashed var(--line); border-radius: 10px; padding: 0; } .addr-add summary { padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--brand); user-select: none; } .addr-add[open] summary { border-bottom: 1px dashed var(--line); } .addr-add > form { padding: 16px; } /* Inline-Buttons (Stern für Default, Mülleimer zum Löschen) — geteilt zwischen Adressen + Bestellungen-Liste */ .btn-link { padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--white); font-size: 14px; cursor: pointer; color: var(--text-soft); transition: background 0.12s; text-decoration: none; } .btn-link:hover { background: var(--cream-2); color: var(--ink); } .btn-danger { color: #dc2626; border-color: #fca5a5; } .btn-danger:hover { background: #fef2f2; } /* ───── Konto: Bestellungen-Liste ───── */ .order-row { padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 12px; margin-bottom: 10px; } .order-row-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px; gap: 12px; } .order-row-num { font-family: 'Mona Sans', monospace; font-size: 11.5px; color: var(--text-muted); font-weight: 600; } .order-row-date { font-size: 13.5px; color: var(--ink); margin-top: 2px; font-weight: 500; } .order-row-right { text-align: right; flex-shrink: 0; } .order-row-total { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 16px; } .order-row-items { padding: 8px 10px; background: var(--cream-2); border-radius: 8px; font-size: 12.5px; color: var(--text); line-height: 1.5; margin-bottom: 10px; } .order-row-actions { display: flex; gap: 8px; flex-wrap: wrap; } .btn-reorder { padding: 7px 12px; background: var(--brand); color: white; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.12s; } .btn-reorder:hover { background: var(--brand-dark); } @media (max-width: 700px) { .konto-grid { grid-template-columns: 1fr; } .addr-card { flex-direction: column; } } /* ============================================================ SEO-Cat-Page (`/c/{slug}`) — Mobile-First. ============================================================ */ .sf-cat-page { max-width: 960px; margin: 0 auto; padding: 16px 16px 60px; } .sf-cat-breadcrumb { /* Fluchtet 1:1 mit .sf-body (max-width 1440px, padding 24px / mobile 16px) damit Breadcrumb-Text exakt unter dem linken Hero-Bild-Rand startet. `width: 100%` + `box-sizing: border-box` wichtig: ohne `width` schrumpft der flex-Container `.sf-app` das Element auf Inhalts-Breite und zentriert es per `margin: auto` mittig statt links bündig. */ width: 100%; max-width: 1440px; box-sizing: border-box; margin: 12px auto 0; padding: 0 24px; font-size: 13px; color: var(--text-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } @media (max-width: 900px) { .sf-cat-breadcrumb { padding: 0 16px; } } .sf-cat-breadcrumb a { color: var(--text-soft); text-decoration: none; } .sf-cat-breadcrumb a:hover { color: var(--ink); text-decoration: underline; } .sf-cat-breadcrumb-sep { color: var(--text-muted); } .sf-cat-breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; } /* Banner-Style Hero (Mockup): Vollbild-Bild mit Status-Pill links oben + Eyebrow / H1 / Meta-Zeile als Overlay unten links. Dark-Gradient von oben nach unten damit weißer Text auf hellen Bildern lesbar bleibt. */ .sf-cat-hero { position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 8px; /* Aspect-ratio fixt die Höhe stabil, Browser muss kein Reflow nach Bild-Load. 1200×400 ist 3:1 — gleicher Faktor wie max-width-Cap weiter unten. */ aspect-ratio: 3 / 1; max-width: 1200px; background: var(--cream); } .sf-cat-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } /* Dunkles Gradient von oben (leicht) nach unten (stark) damit Title auch auf hellen Hero-Bildern (z.B. helle Pizza, weißer Tisch) kontrastiert. Status-Pill (white-BG) bleibt sichtbar — leichte 0.10-Abdunklung oben stört den weißen Pill nicht spürbar. */ .sf-cat-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.25) 35%, rgba(0, 0, 0, 0.65) 80%, rgba(0, 0, 0, 0.82) 100%); z-index: 1; pointer-events: none; } .sf-cat-hero-status { position: absolute; top: 16px; left: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--white); color: var(--ink); border-radius: 999px; font-size: 12.5px; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); } .sf-cat-hero-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #c8372d; /* default closed = rot */ flex-shrink: 0; } .sf-cat-hero.is-open .sf-cat-hero-status .dot { background: #16a34a; /* open = grün */ } .sf-cat-hero-content { position: absolute; left: 28px; right: 28px; bottom: 24px; z-index: 2; color: white; } .sf-cat-hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.88); margin-bottom: 10px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); } .sf-cat-hero-eyebrow::before { content: ""; display: inline-block; width: 24px; height: 1px; background: rgba(255, 255, 255, 0.65); } .sf-cat-hero-title { font-size: 36px; font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; color: white; margin: 0 0 10px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); } .sf-cat-hero-meta { font-size: 14.5px; font-weight: 500; color: rgba(255, 255, 255, 0.92); line-height: 1.45; max-width: 60ch; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); } /* Mobile: kompaktere Aspect-Ratio (5:3) damit auf schmalen Phones der Inhalt noch sinnvoll lesbar bleibt + Title + Meta nicht überlappen. border-radius: 0 muss HIER stehen (nicht im Mobile-Master-Block oben), weil die Base-Regel `.sf-cat-hero { border-radius: 16px }` nach dem Master-Block kommt und ihn überschreibt — same Specificity, spätere Regel gewinnt. */ @media (max-width: 720px) { .sf-cat-hero { aspect-ratio: 5 / 3; border-radius: 0; } .sf-cat-hero-status { top: 12px; left: 12px; padding: 6px 11px; font-size: 11.5px; } .sf-cat-hero-content { left: 16px; right: 16px; bottom: 16px; } .sf-cat-hero-eyebrow { margin-bottom: 6px; font-size: 10.5px; } .sf-cat-hero-title { font-size: 22px; margin-bottom: 6px; } .sf-cat-hero-meta { font-size: 12.5px; } } .sf-cat-cta { display: inline-flex; align-items: center; gap: 8px; padding: 15px 40px; background: var(--brand); color: var(--white); border-radius: 12px; font-size: 15px; font-weight: 700; text-decoration: none; transition: background 0.12s, transform 0.12s; } .sf-cat-cta:hover { background: var(--brand-dark); transform: translateY(-1px); } .sf-cat-cta svg { width: 16px; height: 16px; } /* Action-Row unter dem Produkt-Grid auf der Cat-Page — rechts ausgerichtet damit der CTA als Abschluss der Section liest (mobile zentriert). */ .sf-cat-actions { display: flex; justify-content: flex-end; margin-top: 16px; } @media (max-width: 720px) { .sf-cat-actions { justify-content: center; } } .sf-cat-prose { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; margin-bottom: 8px; color: var(--ink); line-height: 1.6; font-size: 15px; } .sf-cat-prose h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin: 22px 0 10px; } .sf-cat-prose h2:first-child { margin-top: 0; } .sf-cat-prose h3 { font-size: 16px; font-weight: 700; margin: 18px 0 8px; } .sf-cat-prose p { margin: 0 0 14px; } .sf-cat-prose p:last-child { margin-bottom: 0; } .sf-cat-prose strong { font-weight: 700; } .sf-cat-prose em { font-style: italic; } .sf-cat-prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; } .sf-cat-prose a:hover { color: var(--brand-dark); } .sf-cat-prose ul { margin: 0 0 14px; padding-left: 22px; } .sf-cat-prose ul li { margin-bottom: 6px; } .sf-cat-products { margin-bottom: 24px; } .sf-cat-products-title { font-size: 20px; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 12px; padding: 0 4px; } .sf-cat-products-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .sf-cat-product { display: flex; align-items: stretch; gap: 14px; padding: 14px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: var(--ink); transition: border-color 0.12s, transform 0.12s; } .sf-cat-product:hover { border-color: var(--brand); transform: translateY(-1px); } .sf-cat-product-img { flex: 0 0 88px; width: 88px; height: 88px; border-radius: 10px; background: var(--cream); overflow: hidden; display: flex; align-items: center; justify-content: center; } .sf-cat-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .sf-cat-product-img-fallback { font-size: 32px; } .sf-cat-product-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .sf-cat-product-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .sf-cat-product-no { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; background: var(--cream-2); padding: 2px 7px; border-radius: 6px; } .sf-cat-product-name { font-size: 15px; font-weight: 700; color: var(--ink); } .sf-cat-product-desc { font-size: 13px; color: var(--text-soft); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sf-cat-product-price { margin-top: auto; padding-top: 4px; font-size: 15px; font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; } .sf-cat-product-price .from { font-weight: 500; color: var(--text-soft); font-size: 12px; margin-right: 2px; } .sf-cat-cross { margin: 32px 0 24px; } .sf-cat-cross-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px; padding: 0 4px; } .sf-cat-cross-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sf-cat-cross-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 14px; transition: border-color 0.12s, background 0.12s; } .sf-cat-cross-card:hover { border-color: var(--brand); background: var(--cream); } .sf-cat-cross-card svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; } .sf-cat-bottom-cta { text-align: center; margin-top: 32px; } @media (min-width: 720px) { .sf-cat-page { padding: 24px 24px 80px; } .sf-cat-hero-title { font-size: 34px; } .sf-cat-hero-body { padding: 28px 28px 32px; } .sf-cat-products-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .sf-cat-cross-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } .sf-cat-prose { padding: 28px 32px; } } @media (min-width: 1024px) { .sf-cat-page { padding: 32px 24px 100px; } .sf-cat-hero-title { font-size: 38px; } } /* ============================================================ Globale Cart-Pill — sichtbar auf Pages die `'showCartPill' => true` ans Layout senden (z.B. SEO-Cat-Page). Hidden wenn Cart leer (Body hat `data-cart-count="0"`). Mobile-First: rund unten rechts. ============================================================ */ .sf-global-cart-pill { position: fixed; bottom: 16px; right: 16px; z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; background: var(--brand); color: var(--white); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 14px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); transition: transform 0.12s, background 0.12s; } .sf-global-cart-pill:hover { background: var(--brand-dark); transform: translateY(-2px); } .sf-global-cart-pill-icon { position: relative; width: 24px; height: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .sf-global-cart-pill-icon svg { width: 22px; height: 22px; } .sf-global-cart-pill-count { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; background: var(--white); color: var(--brand); border-radius: 999px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } .sf-global-cart-pill-total { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Verstecken wenn Cart leer */ body[data-cart-count="0"] .sf-global-cart-pill { display: none; } @media (max-width: 480px) { .sf-global-cart-pill { bottom: 12px; right: 12px; left: 12px; justify-content: center; } } /* ============================================================ Produktinfos-Akkordeon im Produkt-Modal (Allergene + Zusatzstoffe + LMIV) .sf-info-group erbt komplett von .sf-modal-group (padding 18px 22px 6px, border-bottom). Kein eigener Border + kein radius — sonst kollidiert die Trennlinie zur „Anmerkung"-Gruppe doppelt. Toggle-Button hat padding 0, damit Title bündig mit dem Anmerkung-Title fluchtet (beide bei 22px). ============================================================ */ .sf-info-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; background: transparent; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; gap: 12px; } .sf-info-toggle-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .sf-info-toggle-title { font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .sf-info-toggle-sub { font-size: 12.5px; color: var(--text-soft); line-height: 1.3; } .sf-info-toggle-state { display: flex; align-items: center; flex-shrink: 0; } .sf-info-toggle-chev { font-size: 22px; font-weight: 400; color: var(--text-soft); line-height: 1; transform: translateY(-1px); } .sf-info-toggle-close { display: none; padding: 6px 12px; background: var(--cream-2); color: var(--ink); border-radius: 999px; font-size: 12.5px; font-weight: 600; } .sf-info-toggle[aria-expanded="true"] .sf-info-toggle-chev { display: none; } .sf-info-toggle[aria-expanded="true"] .sf-info-toggle-close { display: inline-flex; } .sf-info-body { margin-top: 14px; display: flex; flex-direction: column; } .sf-info-section { display: flex; flex-direction: column; gap: 8px; } /* Trennlinie zwischen Allergene-Section + Zusatzstoffe-Section sowie vor dem Disclaimer. Erste Section: keine Linie (greift via + Combinator). Symmetrisches 14px-Spacing oberhalb + unterhalb der Linie. */ .sf-info-section + .sf-info-section, .sf-info-disclaimer { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); } .sf-info-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); } .sf-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .sf-info-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); line-height: 1.35; } .sf-info-item-code { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--cream-2); color: var(--ink); border-radius: 6px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .sf-info-item-name { flex: 1; min-width: 0; } .sf-info-disclaimer { font-size: 11.5px; color: var(--text-soft); line-height: 1.45; } /* ============================================================ PLZ-Autocomplete-Liste (Modal + Closed-Modal-Step + Cart-PLZ-Form) ============================================================ */ /* Wrap um den Input — von JS erzeugt. Behält das Flex-Verhalten bei (Cart-Form hat den Input vorher als flex: 1 Child gehabt). Suggest-Liste ist absolute positioniert und schwebt unter dem Input ohne umgebende Elemente zu pushen. */ .sf-plz-input-wrap { position: relative; flex: 1 1 auto; min-width: 0; } .sf-plz-input-wrap > input { width: 100%; } .sf-plz-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 10; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); /* ~3 Items sichtbar, weiteres scrollbar (jedes Item ~70px). */ max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; } /* Modal-Variante: Input hat margin-bottom: 12px — Liste muss das ausgleichen damit sie direkt unter dem Input-Border landet, nicht 12px darunter. */ .sf-plz-input-wrap > .sf-plz-input + .sf-plz-suggest { top: calc(100% - 6px); } /* Specifity-Boost via Container-Selector — der existing `.sf-cart-plz-row button` würde sonst als descendant-Match auf die Suggest-Items im Cart-Wrap greifen und sie schwarz färben (Cart-Submit-Button-Style). 0,2,1 > 0,1,1. */ .sf-plz-suggest .sf-plz-suggest-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line-soft); border-radius: 0; cursor: pointer; text-align: left; font: inherit; transition: background 0.12s, color 0.12s; width: 100%; } .sf-plz-suggest .sf-plz-suggest-item:last-child { border-bottom: 0; } .sf-plz-suggest .sf-plz-suggest-item:first-child, .sf-plz-suggest .sf-plz-suggest-item:hover { background: var(--brand-soft); color: var(--ink); } .sf-plz-suggest .sf-plz-suggest-item:first-child .sf-plz-suggest-icon, .sf-plz-suggest .sf-plz-suggest-item:hover .sf-plz-suggest-icon { background: var(--brand); color: white; } .sf-plz-suggest-icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--cream-2); color: var(--text-soft); border-radius: 8px; transition: background 0.12s, color 0.12s; } .sf-plz-suggest-icon svg { width: 16px; height: 16px; } .sf-plz-suggest-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .sf-plz-suggest-title { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .sf-plz-suggest-meta { font-size: 12px; color: var(--text-soft); line-height: 1.3; font-variant-numeric: tabular-nums; } /* Loading-Spinner während PLZ-Submit nach Suggest-Click. Wrap-Klasse `is-loading` triggert das Pseudo-Element rechts im Input. */ .sf-plz-input-wrap.is-loading::after { content: ""; position: absolute; top: 50%; right: 14px; width: 18px; height: 18px; margin-top: -9px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: sf-plz-spin 0.7s linear infinite; pointer-events: none; } .sf-plz-input-wrap.is-loading > input { /* Platz für den Spinner damit der eingegebene Text nicht drunter rutscht */ padding-right: 40px; } @keyframes sf-plz-spin { to { transform: rotate(360deg); } } /* ============================================================ Reorder-Prominent (Tier-2-Roadmap, User-Mockup 2026-05-02) Desktop-Card direkt unter Hero (eingeloggter Customer + letzte Bestellung). Mobile: Card hidden, sticky-bottom-Pill statt dessen die NUR sichtbar ist wenn Cart leer (sonst zeigt sf-cart-pill). ============================================================ */ .sf-reorder { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px 22px; background: #e8f3ec; border: 1px solid #c7e4d2; border-radius: 14px; } .sf-reorder-icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid #c7e4d2; border-radius: 12px; color: var(--brand); flex-shrink: 0; } .sf-reorder-icon svg { width: 24px; height: 24px; } .sf-reorder-text { min-width: 0; } .sf-reorder-eyebrow { font-size: 11px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; } .sf-reorder-title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 4px; } .sf-reorder-meta { font-size: 13px; color: var(--text-soft); line-height: 1.4; } .sf-reorder-form { margin: 0; } .sf-reorder-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--brand); color: #fff; border: 0; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; white-space: nowrap; } .sf-reorder-btn:hover, .sf-reorder-btn:focus-visible { background: var(--brand-dark, #0e3e26); outline: none; } .sf-reorder-btn svg { width: 16px; height: 16px; } /* Mobile: Desktop-Card weg, Pill an */ @media (max-width: 720px) { .sf-reorder { display: none; } } /* ===== Mobile-Sticky-Reorder-Pill ===== */ .sf-reorder-pill { display: none; position: fixed; bottom: 16px; left: 16px; right: 16px; margin: 0; z-index: 50; } @media (max-width: 720px) { /* Sichtbar nur wenn Cart leer (sonst kollidiert mit sf-cart-pill). body[data-cart-count] wird vom Cart-JS aktuell gehalten. */ body[data-cart-count="0"]:not(.sf-cart-open) .sf-reorder-pill { display: block; } } .sf-reorder-pill-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--brand); color: #fff; border: 0; border-radius: 12px; font-family: inherit; cursor: pointer; box-shadow: 0 8px 20px -4px rgba(0,0,0,0.25); } .sf-reorder-pill-icon { width: 36px; height: 36px; background: rgba(255,255,255,0.16); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .sf-reorder-pill-icon svg { width: 18px; height: 18px; } .sf-reorder-pill-text { flex: 1 1 auto; min-width: 0; text-align: left; } .sf-reorder-pill-eyebrow { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.8; } .sf-reorder-pill-main { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sf-reorder-pill-arrow { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .sf-reorder-pill-arrow svg { width: 18px; height: 18px; } /* ============================================================ GPS-PLZ-Auto-Fill (Tier-2-Roadmap, User-Konsens 2026-04-30) • PLZ-Modal/Cart: hellgrauer Text-Link unter dem Input (subtil) • Checkout: prominente Mint-Card mit grünem CTA + Confirm-State Visibility-Toggle via body[data-gps-available="1"] — überlebt Cart-Rerender ohne JS-Re-Init. ============================================================ */ /* Block sichtbar nur wenn Tenant einen Google-Maps-Key in .env hat. */ .sf-gps-block { display: none; margin: 0 0 7px; } body[data-gps-available="1"] .sf-gps-block { display: block; } .sf-gps-row { display: flex; align-items: center; justify-content: center; gap: 8px; } /* PLZ-Modal/Cart-Variante: brand-grüner Text-Link, zentriert */ .sf-gps-link { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; padding: 4px 0; color: var(--brand); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: color 0.15s; } .sf-gps-link:hover, .sf-gps-link:focus-visible { color: var(--brand-dark, #0e3e26); outline: none; text-decoration: underline; } .sf-gps-link svg { width: 14px; height: 14px; flex-shrink: 0; } /* Info-Button (i) mit Hover-/Click-Tooltip */ .sf-gps-info-btn { position: relative; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--text-muted); cursor: pointer; border-radius: 50%; padding: 0; flex-shrink: 0; } .sf-gps-info-btn:hover, .sf-gps-info-btn:focus-visible { color: var(--brand); background: var(--off-white, #f6f4ef); outline: none; } .sf-gps-info-btn svg { width: 16px; height: 16px; } .sf-gps-tooltip { position: absolute; bottom: calc(100% + 6px); /* Rechts-anchored statt zentriert: Der Info-Btn sitzt meistens am rechten Rand der GPS-Section — bei `left: 50%; translateX(-50%)` würde der Tooltip über den Container hinauslaufen und rechts abgeschnitten. */ right: -8px; left: auto; transform: none; width: max-content; max-width: 260px; background: var(--ink); color: var(--white); padding: 8px 10px; border-radius: 8px; font-size: 12px; line-height: 1.4; font-weight: 400; text-align: left; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10; } .sf-gps-tooltip.is-open { opacity: 1; visibility: visible; } .sf-gps-tooltip::after { content: ''; position: absolute; top: 100%; /* Arrow unter dem Info-Icon rechts (analog zur Tooltip-Verankerung) */ right: 16px; left: auto; transform: none; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--ink); } /* Loading-State: Spinner + Text + Cancel-Link */ .sf-gps-loading { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #e8f3ec; border: 1px solid #c7e4d2; border-radius: 10px; font-size: 13px; color: #155b32; } .sf-gps-loading-text { flex: 1 1 auto; font-weight: 500; } .sf-gps-spinner { width: 18px; height: 18px; border: 2px solid rgba(22, 86, 55, 0.2); border-top-color: var(--brand); border-radius: 50%; flex-shrink: 0; animation: sf-gps-spin 0.7s linear infinite; } @keyframes sf-gps-spin { to { transform: rotate(360deg); } } .sf-gps-cancel { background: transparent; border: 0; color: var(--text-soft); font-size: 13px; font-weight: 500; cursor: pointer; padding: 4px 6px; text-decoration: underline; font-family: inherit; flex-shrink: 0; } .sf-gps-cancel:hover { color: var(--ink); } /* Hint-Banner (success/error) — sichtbar nach success oder bei API-Fehler */ .sf-gps-hint { margin-top: 10px; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.4; } .sf-gps-hint-success { background: #e8f3ec; border: 1px solid #c7e4d2; color: #155b32; } .sf-gps-hint-error { background: #fee2e2; border: 1px solid #fca5a5; color: #7f1d1d; } /* ============================================================ Checkout-Variante: prominente Card mit grünem CTA ============================================================ */ .co-gps-card { display: none; align-items: center; gap: 14px; padding: 16px 18px; background: #e8f3ec; border: 1px solid #c7e4d2; border-radius: 12px; margin-bottom: 16px; } body[data-gps-available="1"] .co-gps-card[data-gps-mode="initial"]:not([hidden]) { display: flex; } body[data-gps-available="1"] .co-gps-card-loading:not([hidden]) { display: flex; } .co-gps-card-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border-radius: 10px; color: var(--brand); flex-shrink: 0; } .co-gps-card-icon svg { width: 22px; height: 22px; } .co-gps-card-text { flex: 1 1 auto; min-width: 0; } .co-gps-card-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 3px; } .co-gps-card-sub { font-size: 12.5px; color: var(--text-soft); line-height: 1.4; } .co-gps-card-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; background: var(--brand-dark, #0e3e26); color: #fff; border: 0; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; flex-shrink: 0; transition: background 0.15s; white-space: nowrap; } .co-gps-card-btn:hover, .co-gps-card-btn:focus-visible { background: var(--brand); outline: none; } .co-gps-card-btn svg { width: 16px; height: 16px; } .co-gps-loading-text { flex: 1 1 auto; font-weight: 500; color: #155b32; font-size: 14px; } /* Confirm-Card: Adress-Vorschau mit „übernehmen"-CTA */ .co-gps-confirm { display: none; flex-direction: column; gap: 12px; padding: 16px; background: #e8f3ec; border: 1px solid #c7e4d2; border-radius: 12px; margin-bottom: 16px; } body[data-gps-available="1"] .co-gps-confirm:not([hidden]) { display: flex; } .co-gps-confirm-head { display: flex; align-items: center; gap: 12px; } .co-gps-confirm-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--white); border-radius: 10px; color: var(--brand); flex-shrink: 0; } .co-gps-confirm-icon svg { width: 22px; height: 22px; } .co-gps-confirm-meta { flex: 1 1 auto; min-width: 0; } .co-gps-confirm-eyebrow { font-size: 11px; font-weight: 700; color: var(--brand); letter-spacing: 0.06em; margin-bottom: 2px; } .co-gps-confirm-q { font-size: 14px; font-weight: 600; color: var(--ink); } .co-gps-confirm-edit { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--line); color: var(--text-soft); padding: 7px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; flex-shrink: 0; } .co-gps-confirm-edit:hover { color: var(--ink); border-color: var(--text-muted); } .co-gps-confirm-edit svg { width: 14px; height: 14px; } .co-gps-confirm-addr { background: var(--white); border-radius: 10px; padding: 14px 16px; } .co-gps-confirm-line1 { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 2px; } .co-gps-confirm-line2 { font-size: 13.5px; color: var(--text-soft); } .co-gps-confirm-apply { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; background: var(--brand-dark, #0e3e26); color: #fff; border: 0; border-radius: 10px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.15s; } .co-gps-confirm-apply:hover, .co-gps-confirm-apply:focus-visible { background: var(--brand); outline: none; } .co-gps-confirm-apply svg { width: 18px; height: 18px; } /* Mobile-Adjustments */ @media (max-width: 720px) { .co-gps-card { flex-wrap: wrap; } .co-gps-card-text { flex: 1 1 calc(100% - 58px); } .co-gps-card-btn { width: 100%; justify-content: center; } .co-gps-confirm-edit span, .co-gps-confirm-edit { font-size: 12px; padding: 6px 10px; } } /* ============================================================ Driver-PWA GPS-Hint-Banner (Live-Tracking aktiv) Einmaliger Banner nach erstem Auftrag-Annehmen, Auto-Hide nach 8s. Memory `feedback_mobile_first`: Mobile-PWA bei Driver, deshalb Pattern Bottom-Banner statt Top. ============================================================ */ .drv-gps-hint { position: fixed; bottom: 16px; left: 16px; right: 16px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--ink); color: #fff; border-radius: 12px; font-size: 13px; line-height: 1.4; z-index: 200; box-shadow: 0 8px 24px -6px rgba(0,0,0,0.35); animation: drv-gps-hint-in 0.25s ease-out; } @keyframes drv-gps-hint-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .drv-gps-hint-text { flex: 1 1 auto; } .drv-gps-hint-close { background: transparent; border: 0; color: rgba(255,255,255,0.7); font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; font-family: inherit; flex-shrink: 0; } .drv-gps-hint-close:hover { color: #fff; } /* ============================================================ Live-Order-Tracking (Customer Order-Status-Page) Embed unterhalb der Status-Timeline. Mobile: full-width. ============================================================ */ .ord-tracking { margin: 16px 0 24px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; } .ord-tracking-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); background: var(--white); } .ord-tracking-title { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); } .ord-tracking-pulse { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; position: relative; flex-shrink: 0; } .ord-tracking-pulse::before { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgba(22, 163, 74, 0.35); animation: ord-tracking-pulse 1.6s ease-out infinite; } @keyframes ord-tracking-pulse { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } } .ord-tracking-sub { font-size: 12.5px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ord-tracking-map { position: relative; width: 100%; height: 320px; background: var(--off-white, #f6f4ef); } .ord-tracking-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--text-soft); background: var(--off-white, #f6f4ef); } @media (max-width: 720px) { .ord-tracking-map { height: 280px; } } /* ---------- Toast-Notifications für Status- und Chat-Updates (2026-05-03) ---------- */ .ord-toast-host { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 32px); pointer-events: none; } .ord-toast { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--white); border: 1px solid var(--line, #e5e3dd); border-left: 4px solid var(--brand, #165637); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); font-size: 14px; color: var(--text); max-width: 360px; opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; pointer-events: auto; cursor: default; } .ord-toast.is-visible { opacity: 1; transform: translateY(0); } .ord-toast.is-leaving { opacity: 0; transform: translateY(8px); } .ord-toast--chat { cursor: pointer; } .ord-toast--status { border-left-color: var(--brand, #165637); } .ord-toast-icon { font-size: 18px; line-height: 1; flex-shrink: 0; } .ord-toast-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; } @media (max-width: 720px) { .ord-toast-host { bottom: 12px; } .ord-toast { max-width: calc(100vw - 24px); padding: 10px 14px; font-size: 13px; } } /* Pulse-Highlight für gerade reingekommene Chat-Bubbles */ @keyframes ord-bubble-glow { 0% { box-shadow: 0 0 0 0 rgba(22, 86, 55, 0.45); } 60% { box-shadow: 0 0 0 8px rgba(22, 86, 55, 0.15); } 100% { box-shadow: 0 0 0 0 rgba(22, 86, 55, 0); } } .ord-bubble.is-new { animation: ord-bubble-glow 1.6s ease-out 1; } /* ---------- Cookie-Consent Modal (DSGVO, 2026-05-03) ---------- */ .cc-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); } .cc-overlay[hidden] { display: none; } .cc-modal { background: var(--white); border-radius: 16px; width: 100%; max-width: 540px; max-height: calc(100dvh - 40px); display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30); overflow: hidden; } .cc-view { display: flex; flex-direction: column; min-height: 0; } .cc-view[hidden] { display: none; } .cc-modal-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 12px; border-bottom: 1px solid var(--line, #e5e3dd); } .cc-icon { font-size: 28px; line-height: 1; } .cc-back { background: none; border: 1px solid var(--line, #e5e3dd); width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; color: var(--text); flex-shrink: 0; } .cc-back:hover { background: var(--off-white, #f6f4ef); } .cc-title { font-size: 18px; font-weight: 700; margin: 0; color: var(--text); } .cc-body { padding: 16px 24px; overflow-y: auto; flex: 1; font-size: 14px; line-height: 1.55; color: var(--text); } .cc-body p { margin: 0 0 12px; } .cc-body p:last-child { margin-bottom: 0; } .cc-privacy-line a { color: var(--brand, #165637); text-decoration: underline; font-weight: 500; } .cc-actions { display: flex; flex-direction: column; gap: 8px; padding: 16px 24px 20px; border-top: 1px solid var(--line, #e5e3dd); } .cc-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; border: 1px solid transparent; cursor: pointer; font-family: inherit; text-align: center; min-height: 44px; transition: background .15s ease, color .15s ease, border-color .15s ease; } .cc-btn-primary { background: var(--brand, #165637); color: #fff; border-color: var(--brand, #165637); } .cc-btn-primary:hover { background: var(--brand-dark, #0e3f25); border-color: var(--brand-dark, #0e3f25); } .cc-btn-outline { background: var(--white); color: var(--text); border-color: var(--line, #d8d6cf); } .cc-btn-outline:hover { background: var(--off-white, #f6f4ef); } .cc-btn-link { background: transparent; color: var(--text-soft, #6c6960); border-color: transparent; text-decoration: underline; font-weight: 500; } .cc-btn-link:hover { color: var(--brand, #165637); } /* ---- Settings-Kategorien ---- */ .cc-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .cc-cat { border: 1px solid var(--line, #e5e3dd); border-radius: 12px; padding: 14px 16px; background: var(--off-white, #f9f8f4); } .cc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .cc-cat-head strong { font-size: 15px; font-weight: 700; color: var(--text); } .cc-cat-desc { font-size: 13px; color: var(--text-soft, #6c6960); margin: 0; line-height: 1.5; } /* ---- Toggle-Switches ---- */ .cc-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .cc-toggle.is-locked { cursor: not-allowed; } .cc-toggle input { position: absolute; opacity: 0; pointer-events: none; } .cc-toggle-slider { display: inline-block; width: 42px; height: 24px; background: #c7c4ba; border-radius: 12px; position: relative; transition: background .2s ease; flex-shrink: 0; } .cc-toggle-slider::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--white); border-radius: 50%; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .cc-toggle input:checked + .cc-toggle-slider { background: var(--brand, #165637); } .cc-toggle input:checked + .cc-toggle-slider::after { transform: translateX(18px); } .cc-toggle.is-locked .cc-toggle-slider { background: var(--brand, #165637); opacity: 0.55; } .cc-toggle-label { font-size: 12px; color: var(--text-soft, #6c6960); font-weight: 500; /* Label vor den Slider rendern damit der Slider bei allen 3 Toggles (Notwendig/Statistik/Marketing) an derselben rechten Kante endet — einheitliche Optik (User-Wunsch 2026-05-03). */ order: -1; } /* ---- Footer-Re-Open-Link ---- */ .sf-foot-cc-link { background: none; border: none; padding: 0; margin-right: 16px; color: var(--text-soft, #6c6960); font-size: inherit; font-family: inherit; cursor: pointer; text-decoration: underline; } .sf-foot-cc-link:hover { color: var(--brand, #165637); } /* ---- Mobile ---- */ @media (max-width: 720px) { .cc-overlay { padding: 0; align-items: flex-end; } .cc-modal { max-width: none; border-radius: 16px 16px 0 0; max-height: 90dvh; } .cc-modal-head { padding: 16px 18px 10px; } .cc-body { padding: 12px 18px; font-size: 13.5px; } .cc-actions { padding: 12px 18px 18px; } .cc-title { font-size: 16px; } .sf-foot-cc-link { display: block; margin: 4px 0; } } /* ---------- Tracking-Blocked-Hint (Marketing-Cookie verweigert, 2026-05-03) ---------- */ .ord-tracking-blocked { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: var(--off-white, #f6f4ef); border: 1px dashed var(--line, #d8d6cf); border-radius: 14px; margin: 16px 0; } .ord-tracking-blocked-icon { font-size: 32px; line-height: 1; flex-shrink: 0; opacity: 0.55; } .ord-tracking-blocked-body { flex: 1; min-width: 0; } .ord-tracking-blocked-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; } .ord-tracking-blocked-text { font-size: 13.5px; color: var(--text-soft, #6c6960); margin: 0 0 10px; line-height: 1.5; } .ord-tracking-blocked-btn { display: inline-flex; align-items: center; padding: 8px 14px; background: var(--brand, #165637); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background .15s ease; } .ord-tracking-blocked-btn:hover { background: var(--brand-dark, #0e3f25); } @media (max-width: 720px) { .ord-tracking-blocked { padding: 14px 16px; } .ord-tracking-blocked-icon { font-size: 26px; } } /* ---------- Item-Nummer in Warenkorb / Checkout-Summary / Order-Status ausblenden (User-Wunsch 2026-05-03) ---------- */ .sf-cart-item-nr, .co-summary-item-nr, .ord-item-nr { display: none; } /* ---------- Stripe-Redirect-Pending-Banner (2026-05-06) ---------- */ /* Zeigt sich wenn User gerade von Stripe-Bezahl-Page zurückkommt (`?redirect_status=succeeded`) und Webhook noch nicht durch ist. Ersetzt den irreführenden „Zahlung steht noch aus"-Pending-Banner für den kurzen Moment zwischen Stripe-Confirm und Webhook-Update. */ .ord-pending-stripe { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--green-soft, #e8faf0); border: 1px solid #a7d8b9; border-radius: 14px; margin-bottom: 16px; } .ord-pending-stripe-icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; } .ord-pending-stripe-spinner { width: 24px; height: 24px; border: 3px solid #a7d8b9; border-top-color: var(--green, #0a8a4e); border-radius: 50%; animation: ord-pending-spin 0.8s linear infinite; } @keyframes ord-pending-spin { to { transform: rotate(360deg); } } .ord-pending-stripe-body { flex: 1; min-width: 0; } .ord-pending-stripe-title { font-weight: 700; font-size: 15px; color: var(--green, #0a8a4e); margin-bottom: 4px; } .ord-pending-stripe-sub { font-size: 13px; color: var(--text); line-height: 1.5; } @media (max-width: 720px) { .ord-pending-stripe { padding: 14px 16px; gap: 12px; } .ord-pending-stripe-title { font-size: 14px; } } /* ============================================================ „Über uns"-Page (2026-05-07) — `.sf-about-*`-Namespace Tenant-konfigurierbar via Settings-Tab `/admin/settings/about`. ============================================================ */ .sf-about { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; display: flex; flex-direction: column; gap: 20px; } .sf-about-crumb { font-size: 13px; color: var(--text-soft); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .sf-about-crumb a { color: var(--text-soft); text-decoration: none; } .sf-about-crumb a:hover { color: var(--ink); text-decoration: underline; } .sf-about-crumb-sep { color: var(--text-muted); } .sf-about-crumb-current { color: var(--ink); font-weight: 600; } /* ---- Hero (full-width, BG-Bild bleed-out) ---- */ /* Bricht aus dem `.sf-about`-Container (max-width 1200px) aus auf 100vw — klassisches `width: 100vw + margin-left: calc(50% - 50vw)`-Pattern. Kein border-radius mehr, weil's kein Card-Look ist sondern ein Magazin- Style-Header. Inner-Content bleibt via `.sf-about-hero-content` auf 1100px begrenzt damit die Headline nicht über die ganze Bildschirm- Breite läuft (Lesbarkeit). */ .sf-about-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-top: -4px; border-radius: 0; overflow: hidden; padding: 80px 0 64px; background: #2a1a16; color: #fff; min-height: 420px; display: flex; align-items: flex-end; } /* Hero-Image als echtes (statt `background-image`) damit der Browser `fetchpriority="high"` + `srcset` + `decoding="async"` ehren kann — wichtig für LCP. Liegt absolut hinter Content + Gradient. */ .sf-about-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } /* Bottom-Gradient für Text-Lesbarkeit (analog `.sf-cat-hero::after`-Pattern): oben fast transparent, unten sehr dunkel — Headline + Subline am unteren Rand bleiben kontrastreich auch auf hellen BG-Bildern (z.B. Pizza-Foto). */ .sf-about-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.25) 35%, rgba(0, 0, 0, 0.65) 80%, rgba(0, 0, 0, 0.82) 100%); z-index: 1; pointer-events: none; } .sf-about-hero-content { position: relative; z-index: 2; max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 24px; } .sf-about-hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent, #ff6600); margin-bottom: 14px; } .sf-about-eyebrow-dash { display: inline-block; width: 22px; height: 2px; background: var(--accent, #ff6600); border-radius: 1px; } .sf-about-hero-title { font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 14px; color: #fff; } .sf-about-hero-sub { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.92); margin: 0; max-width: 620px; } /* ---- Section-Cards (weiß, padding) ---- */ .sf-about-section { background: var(--white); border: 1px solid var(--line, #e5e5e5); border-radius: 18px; padding: 36px 40px; } .sf-about-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted, #999); margin-bottom: 8px; } .sf-about-section-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); margin: 0 0 18px; } .sf-about-section-text { font-size: 15.5px; line-height: 1.7; color: var(--text); max-width: 760px; } .sf-about-section-text p { margin: 0 0 12px; } .sf-about-section-text p:last-child { margin-bottom: 0; } /* ---- Section 2: Text + Bild rechts ---- */ .sf-about-section-with-image { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: stretch; } .sf-about-section-with-image.has-image { grid-template-columns: 1fr 280px; } .sf-about-section-image { border-radius: 12px; overflow: hidden; background: var(--bg); aspect-ratio: 1 / 1; } .sf-about-section-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- Bildergalerie ---- */ .sf-about-gallery { background: var(--white); border: 1px solid var(--line, #e5e5e5); border-radius: 18px; padding: 36px 40px; } .sf-about-gallery-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .sf-about-gallery-count { text-align: right; flex-shrink: 0; } .sf-about-gallery-count strong { display: block; font-size: 24px; font-weight: 800; color: var(--accent, #ff6600); line-height: 1; } .sf-about-gallery-count span { font-size: 12px; color: var(--text-soft); } .sf-about-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .sf-about-gallery-tile { position: relative; margin: 0; padding: 0; border: none; background: var(--bg); border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer; font-family: inherit; display: block; width: 100%; } .sf-about-gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .sf-about-gallery-tile:hover img, .sf-about-gallery-tile:focus-visible img { transform: scale(1.04); } .sf-about-gallery-tile:focus-visible { outline: 3px solid var(--accent, #ff6600); outline-offset: 2px; } .sf-about-gallery-label { position: absolute; bottom: 12px; left: 14px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.6); pointer-events: none; } /* ---- Lightbox ---- */ .sf-about-lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; padding: 24px; } .sf-about-lightbox[hidden] { display: none; } .sf-about-lightbox-stage { margin: 0; max-width: min(92vw, 1400px); max-height: 90vh; display: flex; flex-direction: column; align-items: center; gap: 14px; pointer-events: none; /* damit BG-Click zum Schließen klappt */ } .sf-about-lightbox-stage img { pointer-events: auto; max-width: 100%; max-height: calc(90vh - 50px); width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); display: block; } .sf-about-lightbox-stage figcaption { pointer-events: auto; display: flex; align-items: center; gap: 16px; color: #fff; font-size: 13px; text-align: center; } .sf-about-lightbox-stage [data-lightbox-label] { font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .sf-about-lightbox-counter { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.6); font-size: 12px; } .sf-about-lightbox-close, .sf-about-lightbox-nav { position: absolute; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, transform .1s ease; font-family: inherit; } .sf-about-lightbox-close:hover, .sf-about-lightbox-nav:hover { background: rgba(255, 255, 255, 0.2); } .sf-about-lightbox-close:active, .sf-about-lightbox-nav:active { transform: scale(0.93); } .sf-about-lightbox-close { top: 18px; right: 18px; } .sf-about-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); } .sf-about-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); } .sf-about-lightbox-prev:active { transform: translateY(-50%) scale(0.93); } .sf-about-lightbox-next:active { transform: translateY(-50%) scale(0.93); } .sf-about-lightbox-nav svg, .sf-about-lightbox-close svg { width: 22px; height: 22px; } @media (max-width: 480px) { .sf-about-lightbox { padding: 12px; } .sf-about-lightbox-close, .sf-about-lightbox-nav { width: 38px; height: 38px; } .sf-about-lightbox-close { top: 12px; right: 12px; } .sf-about-lightbox-prev { left: 8px; } .sf-about-lightbox-next { right: 8px; } .sf-about-lightbox-stage img { max-height: calc(90vh - 42px); } } /* ---- Meta (Öffnungszeiten + Adresse-Cards, 2 Spalten) ---- */ .sf-about-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .sf-about-meta-card { background: var(--white); border: 1px solid var(--line, #e5e5e5); border-radius: 16px; padding: 24px 26px; } .sf-about-meta-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .sf-about-meta-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--accent-soft, #fff0e5); border-radius: 8px; font-size: 16px; color: var(--accent, #ff6600); } .sf-about-hours { width: 100%; border-collapse: collapse; font-size: 13.5px; } .sf-about-hours th { text-align: left; padding: 6px 0; font-weight: 500; color: var(--text); width: 50%; } .sf-about-hours td { text-align: right; padding: 6px 0; color: var(--text-soft); font-variant-numeric: tabular-nums; } .sf-about-hours tr.is-today th, .sf-about-hours tr.is-today td { font-weight: 700; color: var(--green, #0a8a4e); } .sf-about-today-pill { display: inline-block; margin-left: 8px; padding: 1px 7px; background: var(--green-soft, #e8faf0); color: var(--green, #0a8a4e); border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .sf-about-hours-closed { color: var(--accent, #ff6600); font-weight: 600; } .sf-about-address { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--text); margin-bottom: 14px; } .sf-about-address strong { color: var(--ink); font-weight: 700; } .sf-about-contact { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .sf-about-contact a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--accent, #ff6600); text-decoration: none; } .sf-about-contact a:hover { text-decoration: underline; } .sf-about-meta-actions { display: flex; gap: 8px; flex-wrap: wrap; } .sf-about-meta-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; transition: background .12s ease; } .sf-about-meta-btn:hover { background: var(--cream-2, #f5f5f0); } /* ---- Bottom-CTA ---- */ .sf-about-cta { background: var(--white); border: 1px solid var(--line, #e5e5e5); border-radius: 16px; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .sf-about-cta-text { font-size: 14px; color: var(--text-soft); } .sf-about-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; background: var(--ink); color: #fff; border-radius: 10px; font-size: 14.5px; font-weight: 700; text-decoration: none; transition: background .15s ease; flex-shrink: 0; } .sf-about-cta-btn:hover { background: #2a2a2a; } .sf-about-cta-btn svg { width: 16px; height: 16px; } /* ---- Mobile / Tablet ---- */ @media (max-width: 900px) { .sf-about { padding: 16px 12px 40px; } .sf-about-hero { padding: 56px 0 36px; min-height: 320px; } .sf-about-hero-content { padding: 0 16px; } .sf-about-hero-title { font-size: 26px; } .sf-about-hero-sub { font-size: 14.5px; } .sf-about-section { padding: 26px 24px; } .sf-about-section-title { font-size: 20px; } .sf-about-gallery { padding: 26px 24px; } .sf-about-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .sf-about-section-with-image.has-image { grid-template-columns: 1fr; } .sf-about-section-image { aspect-ratio: 16 / 10; } .sf-about-meta { grid-template-columns: 1fr; } } @media (max-width: 480px) { .sf-about-hero { padding: 44px 0 28px; min-height: 260px; } .sf-about-hero-content { padding: 0 14px; } .sf-about-hero-title { font-size: 22px; } .sf-about-section { padding: 22px 18px; } .sf-about-gallery { padding: 22px 18px; } .sf-about-cta { flex-direction: column; align-items: stretch; text-align: center; } .sf-about-cta-btn { justify-content: center; } } /* ============================================================ Theme-Toggle (Burger-Drawer) 2-Button-Switch (Hell / Dunkel) analog zum Sprach-Picker. Aktivem Button mit Brand-grünem Outline + Check-Marker. ============================================================ */ .sf-drawer-themes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 14px 4px; } .sf-drawer-theme { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; text-align: left; transition: background 0.12s, border-color 0.12s; } .sf-drawer-theme:hover { border-color: var(--brand); } .sf-drawer-theme svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.8; } .sf-drawer-theme span { flex: 1; } .sf-drawer-theme.is-active { background: #ecf8f1; border-color: #b4ddc3; color: #155b3a; font-weight: 700; } .sf-drawer-theme-check { color: #2a8857; font-weight: 700; } /* ============================================================ Dark-Mode-Overrides (vollständig) Aktiv via `` (server-side gesetzt). Strategy: CSS-Vars umdefinieren (deckt ~70% aller Selectors die var(--white)/var(--bg)/var(--ink)/etc. nutzen), plus gezielte Override-Regeln für hardcoded Farben (#fff, rgba(255,255,255,…)). Reihenfolge unten folgt Komponenten-Hierarchie: Page → Header → Drawer → Modals → Cards → Forms → Footer. ============================================================ */ :root[data-theme="dark"] { --bg: #0a0a0a; --surface: #1a1a1a; --white: #1a1a1a; --cream-2: #232323; --brand-soft: rgba(255, 102, 0, 0.14); --line: #2a2a2a; --line-soft: #1f1f1f; --ink: #f0f0f0; --ink-2: #e0e0e0; --text: #d8d8d8; --text-soft: #b7b6b6; --text-muted: #6b6b6b; --green-soft: rgba(10, 138, 78, 0.18); --orange-soft: rgba(217, 119, 6, 0.16); --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 4px 14px rgba(0,0,0,0.45); --shadow-lg: 0 10px 30px rgba(0,0,0,0.55); } :root[data-theme="dark"] body { color: var(--ink); background: var(--bg); } /* ---- Header / Sticky Categories ---- */ :root[data-theme="dark"] .sf-header { background: rgba(15, 15, 15, 0.86); border-bottom-color: var(--line); } :root[data-theme="dark"] .sf-categories { background: rgba(15, 15, 15, 0.88); border-bottom-color: var(--line); } :root[data-theme="dark"] .sf-cat, :root[data-theme="dark"] .sf-cat-tile { background: var(--white); border-color: var(--line); color: var(--text); } :root[data-theme="dark"] .sf-cat-tile { background: var(--cream-2); } :root[data-theme="dark"] .sf-cat.active, :root[data-theme="dark"] .sf-add-btn { background: var(--cream-2); color: #fff; border: 1px solid var(--brand); } /* Order-Type-Toggle (Lieferung/Abholung) oben: analog .sf-cart-ot-btn (Cart- Toggle rechts) — grauer BG, KEIN Brand-Border (sonst kollidiert visuell mit dem grauen Cart-Pendant das bewusst „weicher" wirkt). */ :root[data-theme="dark"] .sf-ot-item.active { background: var(--text-muted); color: #fff; border: none; } :root[data-theme="dark"] .sf-search input { background: var(--white); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .sf-search input::placeholder { color: var(--text-muted); } :root[data-theme="dark"] .sf-search-btn, :root[data-theme="dark"] .sf-burger, :root[data-theme="dark"] .sf-login-btn, :root[data-theme="dark"] .sf-user-btn { background: var(--white); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-burger-bars::before, :root[data-theme="dark"] .sf-burger-bars::after { background: var(--ink); } :root[data-theme="dark"] .sf-burger-bars::before { box-shadow: 0 5px 0 var(--ink); } :root[data-theme="dark"] .sf-order-type { background: var(--white); border-color: var(--line); } :root[data-theme="dark"] .sf-ot-item { color: var(--text-soft); } /* ---- Hero (Tenant-Brand-Gradient bleibt im Dark, Closed-Variante eh dunkel) ---- */ :root[data-theme="dark"] .sf-hero { box-shadow: 0 8px 24px -6px rgba(0,0,0,0.5); } /* ---- Cat-Head + Cat-Section ---- */ :root[data-theme="dark"] .sf-cat-head, :root[data-theme="dark"] .sf-menus-section-head { background: var(--white); border-color: var(--line); } :root[data-theme="dark"] .sf-cat-head-thumb { background: var(--cream-2); } :root[data-theme="dark"] .sf-cat-head-icon { color: var(--ink); } /* ---- Product Cards (mix-blend-mode-Override + Polaroid-BG für Thumbs) ---- */ :root[data-theme="dark"] .sf-product { background: var(--white); border-color: var(--line); } :root[data-theme="dark"] .sf-product-name { color: var(--ink); } :root[data-theme="dark"] .sf-product-price { color: var(--ink); } :root[data-theme="dark"] .sf-product-thumb { background: var(--cream-2); border: 1px solid var(--line); } :root[data-theme="dark"] .sf-product-thumb img { mix-blend-mode: normal; } :root[data-theme="dark"] .sf-product-icon { background: var(--cream-2); } /* ---- Menu Cards (Top-Slider + Section-Grid) ---- */ :root[data-theme="dark"] .sf-menu-card { background: var(--white); border-color: var(--line); } :root[data-theme="dark"] .sf-menu-card-img { background: var(--cream-2); } /* ---- Burger-Drawer ---- */ :root[data-theme="dark"] .sf-drawer-panel { background: var(--white); border-right-color: var(--line); } :root[data-theme="dark"] .sf-drawer-head { border-bottom-color: var(--line); } :root[data-theme="dark"] .sf-drawer-close { background: transparent; color: var(--ink); } :root[data-theme="dark"] .sf-drawer-close:hover { background: var(--cream-2); } :root[data-theme="dark"] .sf-drawer-brand { color: var(--ink); } :root[data-theme="dark"] .sf-drawer-link { color: var(--ink); } :root[data-theme="dark"] .sf-drawer-link:hover { background: var(--cream-2); } :root[data-theme="dark"] .sf-drawer-link-sub { color: var(--text); } :root[data-theme="dark"] .sf-drawer-section-label { color: var(--text-muted); } :root[data-theme="dark"] .sf-drawer-lang, :root[data-theme="dark"] .sf-drawer-theme { background: var(--cream-2); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-drawer-lang.is-active, :root[data-theme="dark"] .sf-drawer-theme.is-active { background: rgba(42, 136, 87, 0.18); border-color: rgba(42, 136, 87, 0.5); color: #6ad29c; } :root[data-theme="dark"] .sf-drawer-lang-check, :root[data-theme="dark"] .sf-drawer-theme-check { color: #6ad29c; } /* ---- Modals (alle Customer-Modals: Produkt, Menu, Plz, Note, Search, Picker) ---- */ :root[data-theme="dark"] .sf-modal-overlay, :root[data-theme="dark"] .sf-plz-modal, :root[data-theme="dark"] .sf-note-modal, :root[data-theme="dark"] .sf-modal { background: rgba(0, 0, 0, 0.7); } :root[data-theme="dark"] .sf-modal-content, :root[data-theme="dark"] .sf-modal-card, :root[data-theme="dark"] .sf-plz-card, :root[data-theme="dark"] .sf-note-card, :root[data-theme="dark"] .sf-menu-modal-card, :root[data-theme="dark"] .sf-menu-picker-card, :root[data-theme="dark"] .sf-search-modal-card { background: var(--white); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-modal-close, :root[data-theme="dark"] .sf-plz-close, :root[data-theme="dark"] .sf-note-close, :root[data-theme="dark"] .sf-menu-modal-close { background: var(--cream-2); color: var(--ink); } :root[data-theme="dark"] .sf-modal-title { color: var(--ink); } :root[data-theme="dark"] .sf-modal-group, :root[data-theme="dark"] .sf-modal-section { background: var(--surface); border-color: var(--line-soft); } :root[data-theme="dark"] .sf-modal-hero { background: var(--cream-2); } :root[data-theme="dark"] .sf-modal-hero img { mix-blend-mode: normal; } :root[data-theme="dark"] .sf-modal-extra-row, :root[data-theme="dark"] .sf-modal-variant { border-color: var(--line); background: var(--cream-2); } :root[data-theme="dark"] .sf-modal-extra-row.is-checked, :root[data-theme="dark"] .sf-modal-variant.is-checked { background: rgba(255, 102, 0, 0.10); border-color: var(--brand); } :root[data-theme="dark"] .sf-modal-extra-row.is-disabled, :root[data-theme="dark"] .sf-modal-variant.is-disabled { opacity: 0.45; } :root[data-theme="dark"] .sf-modal input[type="text"], :root[data-theme="dark"] .sf-modal input[type="tel"], :root[data-theme="dark"] .sf-modal input[type="email"], :root[data-theme="dark"] .sf-modal textarea { background: var(--cream-2); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .sf-modal-cta, :root[data-theme="dark"] .sf-modal-add-btn { background: var(--brand); color: #fff; } /* Menü-Picker Sub-Modal (Items mit Search) */ :root[data-theme="dark"] .sf-mp-search input { background: var(--cream-2); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-mp-item { background: var(--white); border-bottom-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-mp-item:hover { background: var(--cream-2); } :root[data-theme="dark"] .sf-mp-item-name { color: var(--ink); } :root[data-theme="dark"] .sf-mp-item-desc { color: var(--text-soft); } /* Picker-Card-Slot im Configurator */ :root[data-theme="dark"] .sf-mm-opt-picker { background: var(--cream-2); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-mm-opt-picker.is-empty { background: var(--cream-2); border-style: dashed; } :root[data-theme="dark"] .sf-mm-opt-picker-change { color: var(--brand); } /* Search-Modal (Mobile-Bottom-Sheet) */ :root[data-theme="dark"] .sf-search-modal-list-item { background: var(--white); border-bottom-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-search-modal-list-item:hover { background: var(--cream-2); } :root[data-theme="dark"] .sf-search-modal-input input { background: var(--cream-2); border-color: var(--line); color: var(--ink); } /* ---- Cart-Drawer (Desktop + Mobile) ---- */ :root[data-theme="dark"] .sf-cart { background: var(--white); border-color: var(--line); } :root[data-theme="dark"] .sf-cart-head { color: var(--ink); } :root[data-theme="dark"] .sf-cart-empty { color: var(--text-soft); } :root[data-theme="dark"] .sf-cart-empty svg { color: var(--text-muted); } :root[data-theme="dark"] .sf-cart-empty-title { color: var(--ink); } :root[data-theme="dark"] .sf-cart-item { background: var(--cream-2); border-color: var(--line); box-shadow: 3px 3px 10px rgba(0,0,0,0.4); } :root[data-theme="dark"] .sf-cart-item-name, :root[data-theme="dark"] .sf-cart-item-price { color: var(--ink); } :root[data-theme="dark"] .sf-cart-item-meta { color: var(--text-soft); } :root[data-theme="dark"] .sf-cart-del { background: var(--white); color: var(--text-soft); } :root[data-theme="dark"] .sf-cart-qty { background: var(--white); } :root[data-theme="dark"] .sf-cart-qty button { background: var(--cream-2); color: var(--ink); } :root[data-theme="dark"] .sf-cart-totals-row { color: var(--ink); } :root[data-theme="dark"] .sf-cart-totals-row.muted { color: var(--text-soft); } :root[data-theme="dark"] .sf-cart-totals-row.total { border-top-color: var(--line); } :root[data-theme="dark"] .sf-cart-cta { background: var(--brand); color: #fff; } :root[data-theme="dark"] .sf-cart-pill-icon { background: var(--white); color: var(--brand); } :root[data-theme="dark"] .sf-cart-voucher input, :root[data-theme="dark"] .sf-cart-note textarea, :root[data-theme="dark"] .sf-cart-plz input { background: var(--cream-2); border-color: var(--line); color: var(--ink); } /* Recommendation-Block + Tip-Picker */ :root[data-theme="dark"] .sf-rec-card { background: var(--cream-2); border-color: var(--line); } :root[data-theme="dark"] .sf-rec-card-name { color: var(--ink); } :root[data-theme="dark"] .sf-tip-btn, :root[data-theme="dark"] .sf-tip-custom-input { background: var(--cream-2); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-tip-btn.is-active { background: var(--brand); color: #fff; border-color: var(--brand); } /* ---- Closed-Banner / Promo-Banner / Reorder-Card (warme Cards bleiben warm) ---- */ :root[data-theme="dark"] .sf-closed-banner { background: linear-gradient(135deg, #3a2f0e 0%, #4a3812 100%); border-color: #92400e; color: #fef3c7; } :root[data-theme="dark"] .sf-closed-banner-title { color: #fde68a; } :root[data-theme="dark"] .sf-closed-banner-sub { color: #fcd34d; } :root[data-theme="dark"] .sf-closed-banner-cta { background: #b45309; color: #fff; } /* ---- Checkout (co-*) ---- */ :root[data-theme="dark"] .co-form, :root[data-theme="dark"] .co-summary, :root[data-theme="dark"] .co-section, :root[data-theme="dark"] .co-card, :root[data-theme="dark"] .co-meta-card, :root[data-theme="dark"] .co-final { background: var(--white); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .co-fld input, :root[data-theme="dark"] .co-fld textarea, :root[data-theme="dark"] .co-fld select, :root[data-theme="dark"] .co-input, :root[data-theme="dark"] .co-textarea, :root[data-theme="dark"] .co-form input, :root[data-theme="dark"] .co-form textarea, :root[data-theme="dark"] .co-form select { background: var(--cream-2); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .co-fld input::placeholder, :root[data-theme="dark"] .co-form input::placeholder, :root[data-theme="dark"] .co-form textarea::placeholder { color: var(--text-muted); } :root[data-theme="dark"] .co-section-num, :root[data-theme="dark"] .co-stepper-dot { background: var(--cream-2); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .co-stepper-dot.is-active { background: var(--brand); color: #fff; border-color: var(--brand); } :root[data-theme="dark"] .co-stepper-line { background: var(--line); } :root[data-theme="dark"] .co-summary-item, :root[data-theme="dark"] .co-summary-row, :root[data-theme="dark"] .co-summary-totals { color: var(--ink); } :root[data-theme="dark"] .co-summary-totals-row.muted { color: var(--text-soft); } :root[data-theme="dark"] .co-pay-method { background: var(--cream-2); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .co-pay-method.active { background: rgba(255, 102, 0, 0.10); border-color: var(--brand); } :root[data-theme="dark"] .co-pay-logos { filter: brightness(1.1); } /* Radio-Kreis im Pay-Picker: Default-Border (var(--line) = #2a2a2a) ist auf dunklem Card-BG kaum sichtbar — heller machen via --text-muted (#6b6b6b). */ :root[data-theme="dark"] .co-pay-ctrl { border: 2px solid var(--text-muted); } :root[data-theme="dark"] .co-submit-btn { background: var(--brand); color: #fff; } :root[data-theme="dark"] .co-login-hint { background: var(--cream-2); color: var(--text); border-color: var(--line); } :root[data-theme="dark"] .co-zone-banner { background: rgba(10, 138, 78, 0.18); border-color: rgba(10, 138, 78, 0.4); color: #a7f3d0; } :root[data-theme="dark"] .co-edit-btn { background: var(--cream-2); color: var(--brand); } :root[data-theme="dark"] .co-confirm-card { background: var(--cream-2); border-color: var(--line); color: var(--ink); } /* ---- Order-Status (ord-*) ---- */ :root[data-theme="dark"] .ord-card, :root[data-theme="dark"] .ord-hero, :root[data-theme="dark"] .ord-tl, :root[data-theme="dark"] .ord-summary, :root[data-theme="dark"] .ord-tracking, :root[data-theme="dark"] .ord-chat, :root[data-theme="dark"] .ord-driver, :root[data-theme="dark"] .ord-pending, :root[data-theme="dark"] .ord-pending-stripe { background: var(--white); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .ord-tl-step { border-color: var(--line); } :root[data-theme="dark"] .ord-tl-icon { background: var(--cream-2); color: var(--text-soft); } :root[data-theme="dark"] .ord-tl-step.done .ord-tl-icon { background: rgba(10, 138, 78, 0.25); color: #6ad29c; } :root[data-theme="dark"] .ord-tl-step.current .ord-tl-icon { background: var(--brand); color: #fff; } :root[data-theme="dark"] .ord-bubble { background: var(--cream-2); color: var(--ink); } :root[data-theme="dark"] .ord-bubble.is-customer { background: var(--brand); color: #fff; } :root[data-theme="dark"] .ord-note input, :root[data-theme="dark"] .ord-note textarea { background: var(--cream-2); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .ord-cancel-banner { background: rgba(220, 38, 38, 0.16); border-color: rgba(220, 38, 38, 0.45); color: #fecaca; } :root[data-theme="dark"] .ord-unpaid-btn.ghost { background: var(--white); color: #fff; border-color: rgba(255, 255, 255, 0.25); } :root[data-theme="dark"] .ord-unpaid-btn.ghost:hover { background: var(--cream-2); border-color: rgba(255, 255, 255, 0.45); } /* Toast: dunkler Pill-BG mit hellem Text — Iter-3 hatte var(--ink-2) als BG was im Dark zu `#e0e0e0` (hell) flippt → hell-on-hell unleserlich. Fix: hardcoded dunkler BG analog `.sf-toast`-Pattern, weißer Text + Brand-Border. */ :root[data-theme="dark"] .ord-toast { background: #0a0a0a; color: #fff; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 8px 24px rgba(0,0,0,0.5); } :root[data-theme="dark"] .ord-driver-position-stale { background: var(--cream-2); color: var(--text-soft); } /* ---- Konto / Login / Auth ---- */ :root[data-theme="dark"] .konto-page, :root[data-theme="dark"] .konto-card, :root[data-theme="dark"] .konto-section, :root[data-theme="dark"] .konto-tabs, :root[data-theme="dark"] .auth-card, :root[data-theme="dark"] .auth-page { background: var(--white); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .konto-tab { background: var(--cream-2); color: var(--text-soft); } :root[data-theme="dark"] .konto-tab.is-active { background: var(--brand); color: #fff; } :root[data-theme="dark"] .konto-form input, :root[data-theme="dark"] .konto-form textarea, :root[data-theme="dark"] .auth-form input { background: var(--cream-2); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .konto-order-row { border-bottom-color: var(--line); } :root[data-theme="dark"] .konto-order-row:hover { background: var(--cream-2); } /* ---- Driver-App ---- */ :root[data-theme="dark"] .drv-app, :root[data-theme="dark"] .drv-app * { color: var(--ink); } :root[data-theme="dark"] .drv-card, :root[data-theme="dark"] .drv-tour, :root[data-theme="dark"] .drv-pool, :root[data-theme="dark"] .drv-kpi, :root[data-theme="dark"] .drv-recent { background: var(--white); border-color: var(--line); } :root[data-theme="dark"] .drv-cash-alert { background: rgba(220, 38, 38, 0.18); border-color: rgba(220, 38, 38, 0.5); color: #fecaca; } :root[data-theme="dark"] .drv-quick-btn { background: var(--cream-2); color: var(--ink); border-color: var(--line); } /* ---- About-Page ---- */ :root[data-theme="dark"] .sf-about, :root[data-theme="dark"] .sf-about-section, :root[data-theme="dark"] .sf-about-gallery, :root[data-theme="dark"] .sf-about-cta-wrap { background: var(--bg); } :root[data-theme="dark"] .sf-about-section { background: var(--white); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-about-section-title { color: var(--ink); } :root[data-theme="dark"] .sf-about-section-text { color: var(--text); } :root[data-theme="dark"] .sf-about-section-kicker { color: var(--brand); } :root[data-theme="dark"] .sf-about-gallery { background: var(--white); border-color: var(--line); } :root[data-theme="dark"] .sf-about-cta-btn { background: var(--ink-2); color: var(--bg); } :root[data-theme="dark"] .sf-about-cta-btn:hover { background: var(--white); } :root[data-theme="dark"] .sf-about-meta { color: var(--text); } :root[data-theme="dark"] .sf-about-lightbox { background: rgba(0, 0, 0, 0.92); } /* ---- Legal-Pages ---- */ :root[data-theme="dark"] .legal-page, :root[data-theme="dark"] .legal-wrap { background: var(--bg); color: var(--ink); } :root[data-theme="dark"] .legal-wrap { background: var(--white); border-color: var(--line); } :root[data-theme="dark"] .legal-section, :root[data-theme="dark"] .legal-section summary { color: var(--ink); border-bottom-color: var(--line); } :root[data-theme="dark"] .legal-section summary:hover { background: var(--cream-2); } :root[data-theme="dark"] .legal-list { color: var(--text); } /* ---- Footer ---- */ :root[data-theme="dark"] .sf-foot, :root[data-theme="dark"] .sf-foot-seo, :root[data-theme="dark"] .sf-foot-allergen { background: #050505; border-top-color: var(--line); color: var(--text); } :root[data-theme="dark"] .sf-foot-eyebrow { color: var(--text-muted); } :root[data-theme="dark"] .sf-foot-list, :root[data-theme="dark"] .sf-foot-zones-grid, :root[data-theme="dark"] .sf-foot-allergen-list { color: var(--text); } :root[data-theme="dark"] .sf-foot-link { color: var(--text); } :root[data-theme="dark"] .sf-foot-link:hover { color: var(--ink); } :root[data-theme="dark"] .sf-foot-zone-pin { background: rgba(255, 102, 0, 0.18); color: #ff8c3a; } :root[data-theme="dark"] .sf-foot-social-btn { background: var(--cream-2); border-color: var(--line); color: var(--text); } :root[data-theme="dark"] .sf-foot-bottom { border-top-color: var(--line); } :root[data-theme="dark"] .sf-foot-copy, :root[data-theme="dark"] .sf-foot-bottom-inner { color: var(--text-muted); } :root[data-theme="dark"] .sf-foot-biyamara { color: var(--ink); } :root[data-theme="dark"] .sf-foot-faq summary { color: var(--ink); } :root[data-theme="dark"] .sf-foot-faq-q { color: var(--ink); } :root[data-theme="dark"] .sf-foot-faq-a { color: var(--text); } :root[data-theme="dark"] .sf-foot-allergen-summary, :root[data-theme="dark"] .sf-foot-allergen-title { color: var(--ink); } :root[data-theme="dark"] .sf-foot-allergen-coltitle { color: var(--ink); } :root[data-theme="dark"] .sf-foot-allergen-code { color: var(--brand); } :root[data-theme="dark"] .sf-foot-cc-link { color: var(--text); } /* ---- Cookie-Consent-Modal ---- */ :root[data-theme="dark"] .cc-overlay { background: rgba(0, 0, 0, 0.7); } :root[data-theme="dark"] .cc-modal { background: var(--white); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .cc-title, :root[data-theme="dark"] .cc-cat strong { color: var(--ink); } :root[data-theme="dark"] .cc-body, :root[data-theme="dark"] .cc-cat-desc { color: var(--text); } :root[data-theme="dark"] .cc-toggle-slider { background: var(--cream-2); } :root[data-theme="dark"] .cc-btn-outline { background: var(--cream-2); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .cc-btn-link { color: var(--brand); } :root[data-theme="dark"] .cc-back { color: var(--ink); } :root[data-theme="dark"] .cc-privacy-line a { color: var(--brand); } /* ---- Shop-Paused-Banner (warm-bleibt-warm) ---- */ :root[data-theme="dark"] .shop-paused-banner { background: #3a1d11; border-bottom-color: #92400e; color: #fde68a; } /* ---- Spinner ---- */ :root[data-theme="dark"] .sf-spinner { border-color: rgba(255, 255, 255, 0.15); border-top-color: var(--brand); } /* ---- Generic Inputs/Textareas/Selects (Fallback) ---- */ :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="tel"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] input[type="search"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input:not([type]):not([data-cc-cat]), :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { color-scheme: dark; } /* ============================================================ Dark-Mode Patches (nach User-Smoke-Test 2026-05-07) Konkrete Korrekturen für Stellen die der Var-Override nicht sauber abdeckt (hardcoded Farben, var(--ink)-als-BG, etc.). ============================================================ */ /* ---- „Enthalten"-Pills im Produkt-Modal ---- Im Light hat die aktive Pill hell-grünen BG mit dunkelgrünem Text. Im Dark wurde --green-soft auf rgba(…,0.18) gemapped → Pill fast unsichtbar + dunkler Text auf dunklem BG. Lösung: helle Pill beibehalten (analog Light), nur removed-State an Dark anpassen. */ :root[data-theme="dark"] .sf-ingredient-pill { background: #c8edd5; color: #064e34; border-color: #6ad29c; } :root[data-theme="dark"] .sf-ingredient-pill:hover { background: #a8e0bb; } :root[data-theme="dark"] .sf-ingredient-pill.removed { background: #2a2a2a; border-color: #3a3a3a; color: #888; } :root[data-theme="dark"] .sf-ingredient-pill.removed::before { background: #555 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/12px no-repeat; } /* ---- Cart-Order-Type-Toggle (Lieferung / Abholung) ---- `var(--ink)` flippt im Dark → BG hell, color: white → unsichtbar. User-Wunsch: --text-muted als BG mit weißer Schrift. */ :root[data-theme="dark"] .sf-cart-ot-btn { color: var(--text-soft); } :root[data-theme="dark"] .sf-cart-ot-btn.active { background: var(--text-muted); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.4); } /* ---- Recommendation-Block im Cart („Für dich empfohlen") ---- Container-BG sollte zur Card passen, + Button im Brand-Grün (statt mintigem Hover-Zustand der im Dark verschwindet). */ :root[data-theme="dark"] .sf-cart-rec { background: var(--cream-2); border-color: var(--line); } :root[data-theme="dark"] .sf-cart-rec-title { color: var(--ink); } :root[data-theme="dark"] .sf-cart-rec-card { background: var(--white); border-color: var(--line); } :root[data-theme="dark"] .sf-cart-rec-card:hover { border-color: var(--brand); } :root[data-theme="dark"] .sf-cart-rec-name { color: var(--ink); } :root[data-theme="dark"] .sf-cart-rec-price { color: var(--text-soft); } :root[data-theme="dark"] .sf-cart-rec-img, :root[data-theme="dark"] .sf-cart-rec-img-empty { background: #f3f3f0; } :root[data-theme="dark"] .sf-cart-rec-img img { mix-blend-mode: normal; } :root[data-theme="dark"] .sf-cart-rec-add { background: var(--brand); color: #fff; } :root[data-theme="dark"] .sf-cart-rec-card:hover .sf-cart-rec-add { background: var(--brand-dark); } /* ---- Menü-Card-CTA (das + bei Menü-Cards) ---- Aktuell hardcoded `var(--ink)` BG → im Dark unsichtbar. User-Wunsch: gleicher Brand-Grün-Style wie bei Produkt-Cards. */ :root[data-theme="dark"] .sf-menu-card-cta { background: var(--brand); color: #fff; } :root[data-theme="dark"] .sf-menu-card-cta:hover { background: var(--brand-dark); } :root[data-theme="dark"] .sf-menu-card.is-unavailable .sf-menu-card-cta { background: var(--text-muted); } /* ---- Reorder-Card („Willkommen zurück, DENIZ") ---- Hardcoded mint-BG `#e8f3ec` + mint-Border → im Dark unpassend. Im Dark: dunkel-grüner Tönung mit Brand-Akzenten. */ :root[data-theme="dark"] .sf-reorder { background: rgba(10, 138, 78, 0.16); border-color: rgba(10, 138, 78, 0.45); } :root[data-theme="dark"] .sf-reorder-icon { background: var(--white); border-color: rgba(10, 138, 78, 0.45); color: var(--brand); } :root[data-theme="dark"] .sf-reorder-eyebrow { color: #6ad29c; } :root[data-theme="dark"] .sf-reorder-title { color: var(--ink); } :root[data-theme="dark"] .sf-reorder-meta { color: var(--text-soft); } /* ---- Konto-Sidebar-Nav (Übersicht / Bestellungen / Adressen) ---- `.konto-nav a.active` nutzt `var(--ink)` als BG → Dark = hell-on-light. Im Dark: Brand-Color als aktive State. */ :root[data-theme="dark"] .konto-nav a { color: var(--text); } :root[data-theme="dark"] .konto-nav a:hover { background: var(--cream-2); } :root[data-theme="dark"] .konto-nav a.active { background: var(--brand); color: #fff; } /* ---- Konto-Bestellungen-Liste (.order-row + Buttons) ---- `.btn-link` hat hardcoded `background: white` → muss Dark werden. `.order-row` nutzt `--line-soft` Border, das ist OK. */ :root[data-theme="dark"] .order-row { background: var(--white); border-color: var(--line); } :root[data-theme="dark"] .order-row-num, :root[data-theme="dark"] .order-row-date, :root[data-theme="dark"] .order-row-total { color: var(--ink); } :root[data-theme="dark"] .order-row-num { color: var(--text-muted); } :root[data-theme="dark"] .order-row-items { background: var(--cream-2); color: var(--text); } :root[data-theme="dark"] .btn-link { background: var(--cream-2); color: var(--text-soft); border-color: var(--line); } :root[data-theme="dark"] .btn-link:hover { background: var(--white); color: var(--ink); border-color: var(--brand); } :root[data-theme="dark"] .btn-danger { color: #f87171; border-color: rgba(248, 113, 113, 0.4); background: var(--cream-2); } :root[data-theme="dark"] .btn-danger:hover { background: rgba(248, 113, 113, 0.15); } :root[data-theme="dark"] .konto-card { background: var(--white); border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,0.4); } :root[data-theme="dark"] .konto-card h2 { color: var(--ink); } :root[data-theme="dark"] .konto-order { color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .konto-order:hover { background: var(--cream-2); border-color: var(--text-soft); } :root[data-theme="dark"] .konto-order-num { color: var(--text-muted); } :root[data-theme="dark"] .konto-order-date { color: var(--ink); } :root[data-theme="dark"] .konto-order-status.is-pending { background: rgba(217, 119, 6, 0.18); color: #fbbf24; } :root[data-theme="dark"] .konto-order-status.is-disabled { background: rgba(220, 38, 38, 0.18); color: #fca5a5; } :root[data-theme="dark"] .konto-order-status.is-active { background: rgba(10, 138, 78, 0.22); color: #6ad29c; } :root[data-theme="dark"] .konto-order-status.is-done { background: var(--cream-2); color: var(--text-soft); } :root[data-theme="dark"] .konto-flash.ok { background: rgba(10, 138, 78, 0.18); color: #a7f3d0; } :root[data-theme="dark"] .konto-flash.err { background: rgba(220, 38, 38, 0.18); color: #fca5a5; } :root[data-theme="dark"] .konto-consent { background: var(--cream-2); border-color: var(--line); } :root[data-theme="dark"] .konto-consent:hover { border-color: var(--text-soft); } /* ---- Storefront-Suche: Dropdown-Items + Bottom-Sheet-Liste ---- `.sf-search-item:hover` nutzt `var(--off-white, #f6f4ef)` (Fallback) → im Dark hell-on-dark. Plus die Item-Img/Icon/Nr-Pills haben helle BGs. */ :root[data-theme="dark"] .sf-search-dropdown, :root[data-theme="dark"] .sf-search-results { background: var(--white); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-search-item { background: transparent; border-bottom-color: var(--line); } :root[data-theme="dark"] .sf-search-item:hover, :root[data-theme="dark"] .sf-search-item:focus-visible { background: var(--cream-2); } :root[data-theme="dark"] .sf-search-item-name { color: var(--ink); } :root[data-theme="dark"] .sf-search-item-desc { color: var(--text-soft); } :root[data-theme="dark"] .sf-search-item-img, :root[data-theme="dark"] .sf-search-item-icon, :root[data-theme="dark"] .sf-search-item-no { background: var(--cream-2); } :root[data-theme="dark"] .sf-search-item-no { color: var(--text-soft); } :root[data-theme="dark"] .sf-search-item-img { mix-blend-mode: normal; } :root[data-theme="dark"] .sf-search-item mark { background: rgba(255, 102, 0, 0.18); color: var(--brand); } /* ============================================================ Dark-Mode Patches Iteration 2 (User-Test 2026-05-07 #2) ============================================================ */ /* ---- Sofort/Später-Cards (.sf-when-btn) ---- Aktive Card hatte var(--brand-soft) BG (im Dark fast unsichtbar) + var(--brand-dark) Sub-Text (auf dunkel = unlesbar). User-Klage: „Heute · 18:15" nicht lesbar. Lösung: brand-Tönung als BG, hellen Text in beiden Zeilen. */ :root[data-theme="dark"] .sf-when-btn { background: var(--cream-2); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-when-btn.active { background: rgba(10, 138, 78, 0.22); border-color: var(--brand); color: #fff; } :root[data-theme="dark"] .sf-when-btn.active .sf-when-btn-title { color: #fff; } :root[data-theme="dark"] .sf-when-btn.active .sf-when-btn-sub { color: rgba(255, 255, 255, 0.85); } :root[data-theme="dark"] .sf-when-btn:disabled { opacity: 0.4; } :root[data-theme="dark"] .sf-when-picker { background: var(--cream-2); } :root[data-theme="dark"] .sf-when-day { background: var(--white); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-when-day.active { background: var(--brand); border-color: var(--brand); color: #fff; } :root[data-theme="dark"] .sf-when-day-top { color: var(--text-soft); } :root[data-theme="dark"] .sf-when-day-bot { color: var(--ink); } /* ---- Closed-Modal Lieferung/Abholung-Toggle (.sf-cm-mode-btn) ---- Aktive Variante hatte ähnliches Problem wie sf-when-btn. */ :root[data-theme="dark"] .sf-cm-mode-btn { background: var(--white); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-cm-mode-btn.active { background: rgba(255, 102, 0, 0.16); border-color: var(--brand); color: var(--ink); } :root[data-theme="dark"] .sf-cm-back { color: var(--text-soft); } :root[data-theme="dark"] .sf-cm-back:hover { color: var(--ink); background: var(--cream-2); } /* ---- Pickup-Block + „In Google Maps öffnen"-Button ---- Container hatte hardcoded color #0a6a3c → unlesbar im Dark. Maps-Btn hatte rgba(255,255,255,0.7) BG → semitransparent weiß. */ :root[data-theme="dark"] .sf-cart-pickup { background: var(--cream-2); color: #a7f3d0; } :root[data-theme="dark"] .sf-cart-pickup-maps { background: rgba(255, 255, 255, 0.08); color: #d4f7e3; border: 1px solid rgba(255, 255, 255, 0.12); } :root[data-theme="dark"] .sf-cart-pickup-maps:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } /* ---- Voucher-Form (Gutscheincode-Input + Einlösen-Btn) ---- Input ohne explizites BG → erbt body. Im Dark wird er aber durch generic input-override gesetzt — sollte ok sein. Button hatte var(--ink) BG (hell-on-light Problem) + hardcoded #000 hover. */ :root[data-theme="dark"] .sf-voucher-form input { background: var(--cream-2); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .sf-voucher-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.15); } :root[data-theme="dark"] .sf-voucher-form button { background: var(--brand); color: #fff; } :root[data-theme="dark"] .sf-voucher-form button:hover { background: var(--brand-dark); } :root[data-theme="dark"] .sf-voucher-err-msg { background: rgba(220, 38, 38, 0.18); color: #fca5a5; } /* ---- Menu-Modal Configurator: aktiv-State (sf-mm-opt.is-checked) ---- Hardcoded `#f0faf4` Mint-BG → im Dark unpassend. Plus Picker-Card. */ :root[data-theme="dark"] .sf-menu-modal .sf-mm-opt { background: var(--cream-2); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-menu-modal .sf-mm-opt:hover { border-color: var(--brand); } :root[data-theme="dark"] .sf-menu-modal .sf-mm-opt.is-checked { background: var(--cream-2); border-color: var(--brand); } :root[data-theme="dark"] .sf-menu-modal .sf-mm-opt-picker-btn { background: var(--white); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .sf-menu-modal .sf-mm-opt-picker-btn:hover, :root[data-theme="dark"] .sf-menu-modal .sf-mm-opt-picker-btn:focus-visible { border-color: var(--brand); } :root[data-theme="dark"] .sf-menu-modal .sf-mm-opt-picker-no.is-empty { background: var(--white); } :root[data-theme="dark"] .sf-menu-picker-modal .sf-mp-item.is-chosen { background: rgba(10, 138, 78, 0.20); } /* ---- Checkout-User-Chip (Legacy-Selektor falls noch wo verwendet) ---- Markup im Checkout ist heute auf .sf-user-btn umgestellt — der Legacy-Style bleibt aber definiert für andere Pages die ihn evtl. noch nutzen. */ :root[data-theme="dark"] .co-user-chip { background: rgba(10, 138, 78, 0.20); color: #a7f3d0; border-color: transparent; } :root[data-theme="dark"] .co-user-chip:hover { border-color: rgba(167, 243, 208, 0.4); } /* ---- Konto-Header Back-/Logout-Buttons + Header-Brand-Strip ---- Bereits durch background-Replace abgedeckt. Hover-State greift automatisch via var(--cream-2). Hier nur color falls ein Edge-Case. */ :root[data-theme="dark"] .konto-back, :root[data-theme="dark"] .konto-logout { color: var(--text); } /* ---- Checkout-Login-Hint (co-login-hint*) — hardcoded blau im Light ---- Im Dark: dunkler Blau-Tönung mit hellem Text. */ :root[data-theme="dark"] .co-login-hint { background: rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.4); color: #bae6fd; } :root[data-theme="dark"] .co-login-hint:hover { background: rgba(56, 189, 248, 0.22); border-color: rgba(56, 189, 248, 0.6); } :root[data-theme="dark"] .co-login-hint-icon { background: rgba(56, 189, 248, 0.22); } :root[data-theme="dark"] .co-login-hint-text strong { color: #bae6fd; } :root[data-theme="dark"] .co-login-ok { background: rgba(10, 138, 78, 0.18); color: #a7f3d0; border-color: rgba(10, 138, 78, 0.4); } :root[data-theme="dark"] .co-login-ok-link { color: #86efac; } :root[data-theme="dark"] .co-login-ok-note { color: #86efac; } /* ---- Cart-Pill-Icon (Mobile sticky-bottom Cart) ---- var(--white) im Dark wäre #1a1a1a → würde im orangen Pill verschwinden. Hier explizit auf wirklich-weiß zurück. */ :root[data-theme="dark"] .sf-cart-pill-icon { background: #fff; color: var(--brand); } /* ---- Generic Card-BGs die noch hardcoded #fff hatten und jetzt var(--white) sind: keine extra Override nötig — flippen automatisch. */ /* ============================================================ Dark-Mode Patches Iteration 3 (User-Test 2026-05-07 #3) ============================================================ */ /* ---- Pflichtfeld-Pill im Produkt-Modal ---- `.sf-modal-group-tag.required` nutzte var(--brand-soft) BG + var(--brand-dark) Text → im Dark beide nahezu unsichtbar. Lösung: Brand-Color rgba mit hellem Text. */ :root[data-theme="dark"] .sf-modal-group-tag.required { background: rgba(255, 102, 0, 0.22); color: #ffb380; } :root[data-theme="dark"] .sf-modal-group-tag.optional { background: var(--cream-2); color: var(--text-soft); } /* ---- Trinkgeld-Picker (.co-tip*) ---- Container hatte hardcoded `var(--bg-soft, #f7f6f3)` Light-Fallback. */ :root[data-theme="dark"] .co-tip { background: var(--cream-2); border-color: var(--line); } :root[data-theme="dark"] .co-tip-title { color: var(--ink); } :root[data-theme="dark"] .co-tip-hint { color: var(--text-soft); } :root[data-theme="dark"] .co-tip-btn { background: var(--white); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .co-tip-btn:hover { border-color: var(--brand); } :root[data-theme="dark"] .co-tip-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; } :root[data-theme="dark"] .co-tip-custom-input { background: var(--white); border-color: var(--line); color: var(--ink); } :root[data-theme="dark"] .co-tip-custom-input:focus { border-color: var(--brand); } :root[data-theme="dark"] .co-tip-custom-meta, :root[data-theme="dark"] .co-tip-reset { color: var(--text-soft); } /* ---- Order-Status Hero-Card (.ord-hero2) ---- Hardcoded var(--ink) BG → im Dark wird Card hell, Text war weiß = unlesbar. Plus Decorative-Circle in Brand-Tönung. */ :root[data-theme="dark"] .ord-hero2 { background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%); color: #f0f0f0; box-shadow: 0 14px 34px -14px rgba(0,0,0,0.6); border: 1px solid var(--line); } :root[data-theme="dark"] .ord-hero2::before { background: radial-gradient(circle, rgba(255, 102, 0, 0.22) 0%, transparent 60%); } :root[data-theme="dark"] .ord-hero-foot-num strong { color: #fff; } :root[data-theme="dark"] .ord-pill--completed { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.78); border-color: rgba(255,255,255,0.16); } /* Status-Pills nutzen schon rgba — sind dark-mode-tauglich, keine Override nötig. */ /* ---- Customer-Push-Prompt (.cust-push-prompt) ---- Hardcoded gelber Linear-Gradient `#fef9c3 → #fef3c7` → im Dark unpassend. Plus Feedback-States hardcoded. */ :root[data-theme="dark"] .cust-push-prompt { background: linear-gradient(135deg, rgba(255, 102, 0, 0.14) 0%, rgba(255, 102, 0, 0.08) 100%); border-left-color: var(--brand); color: var(--ink); } :root[data-theme="dark"] .cust-push-text strong { color: var(--ink); } :root[data-theme="dark"] .cust-push-text { color: var(--text); } :root[data-theme="dark"] .cust-push-marketing { border-top-color: rgba(255, 255, 255, 0.10); } :root[data-theme="dark"] .cust-push-marketing small { color: var(--text-soft); } :root[data-theme="dark"] .cust-push-feedback.is-ok { background: rgba(10, 138, 78, 0.18); color: #a7f3d0; border-color: rgba(10, 138, 78, 0.5); } :root[data-theme="dark"] .cust-push-feedback.is-error { background: rgba(220, 38, 38, 0.18); color: #fca5a5; border-color: rgba(220, 38, 38, 0.5); } /* Buttons im Banner: auf orange-Tönung-BG braucht Ghost-Btn helleren Border- Kontrast als das default `var(--line)` (im Dark zu dezent für Lesbarkeit). */ :root[data-theme="dark"] .cust-push-actions .btn-ghost { color: var(--ink); border-color: rgba(255, 255, 255, 0.18); } :root[data-theme="dark"] .cust-push-actions .btn-ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.28); } /* ---- Sandbox-Hint (Stripe-Bezahl-Page) bleibt warm im Dark, leicht abgedunkelt ---- */ :root[data-theme="dark"] .pay-sandbox-hint { background: rgba(217, 119, 6, 0.18); border-color: rgba(217, 119, 6, 0.45); color: #fde68a; } :root[data-theme="dark"] .pay-error { background: rgba(220, 38, 38, 0.18); border-color: rgba(220, 38, 38, 0.45); color: #fca5a5; } :root[data-theme="dark"] .pay-summary { background: var(--cream-2); } :root[data-theme="dark"] .pay-summary-row.total { border-top-color: var(--line); } /* ---- Slot-Picker-Bestätigung (.sf-when-confirm) ---- „✓ Abholung zwischen 17:00 und 17:15"-Zeile hatte var(--green-soft) BG + #065f46 Text → im Dark dunkelgrün auf dunkelgrün-rgba = unlesbar. Lösung: dunkleres rgba-BG + heller Mint-Text. */ :root[data-theme="dark"] .sf-when-confirm { background: rgba(10, 138, 78, 0.20); color: #a7f3d0; } :root[data-theme="dark"] .sf-when-check { background: #10b981; color: #fff; } /* ---- „Online bezahlt"-Pill in der Order-Status-Details-Box ---- .ord-pay-chip.paid hatte var(--green-soft) BG + #0a6a3c Text → im Dark beides nahe dunkelgrün, unlesbar. */ :root[data-theme="dark"] .ord-pay-chip.paid { background: rgba(10, 138, 78, 0.20); color: #a7f3d0; } /* ============================================================ 404-Page (.sf-404-*) — Customer-Frontend, Light + Dark Pizza-Mockup (User-Vorlage 2026-05-07). Centered Card mit SVG-Pizza-Illustration (fehlende Scheibe), Brand-CTA + Ghost-CTA, Divider + Cat-Chips. Header bleibt durchs customer-Layout sichtbar. Hintergrund/Border/Text laufen über die globalen Customer-Vars (`--white`, `--line`, `--ink`, `--text-soft`, `--brand`, `--shadow-*`), damit die Page automatisch zum Rest des Layouts passt. Die Pizza- SVG-Farben sind eigene Vars weil sie illustrationsspezifisch sind (echte Pizza-Töne in Light + Dark). ============================================================ */ :root { --sf-404-pizza-crust: #e0a868; --sf-404-pizza-sauce: #d6553d; --sf-404-pizza-cheese: #f4e4c1; --sf-404-pizza-pep: #a82929; --sf-404-pizza-basil: #3d6b3a; } :root[data-theme="dark"] { --sf-404-pizza-crust: #d4a056; --sf-404-pizza-sauce: #c54d36; --sf-404-pizza-cheese: #ebd9b0; --sf-404-pizza-pep: #922424; --sf-404-pizza-basil: #386033; } .sf-404 { max-width: 640px; margin: 40px auto; padding: 0 16px; } .sf-404-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px 32px 32px; text-align: center; box-shadow: var(--shadow-md); } .sf-404-illu { width: 130px; height: 130px; margin: 0 auto 18px; display: block; } .sf-404-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; } .sf-404-headline { font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; margin: 0 0 10px; line-height: 1.2; } .sf-404-body { font-size: 13.5px; line-height: 1.6; color: var(--text-soft); max-width: 420px; margin: 0 auto 22px; } .sf-404-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; } .sf-404-btn { padding: 11px 22px; border-radius: 10px; border: 1px solid transparent; font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .sf-404-btn:hover { opacity: 0.92; } .sf-404-btn-primary { background: var(--brand); color: #fff; } .sf-404-btn-primary:hover { background: var(--brand-dark); opacity: 1; } .sf-404-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .sf-404-btn-ghost:hover { background: var(--cream-2); opacity: 1; } .sf-404-divider { display: flex; align-items: center; gap: 14px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); max-width: 320px; margin: 0 auto 14px; } .sf-404-divider::before, .sf-404-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .sf-404-divider span { white-space: nowrap; } .sf-404-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .sf-404-chip { font-size: 12.5px; padding: 6px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color 0.12s, background 0.12s; } .sf-404-chip:hover { border-color: var(--brand); background: var(--cream-2); } /* Mobile (≤ 720px) */ @media (max-width: 720px) { .sf-404 { margin: 24px auto; padding: 0 12px; } .sf-404-card { padding: 28px 20px 24px; border-radius: var(--radius); } .sf-404-illu { width: 110px; height: 110px; margin-bottom: 14px; } .sf-404-headline { font-size: 20px; } .sf-404-body { font-size: 13px; } .sf-404-actions { flex-direction: column; gap: 8px; } .sf-404-btn { width: 100%; justify-content: center; } } /* ============================================================ Dark-Mode Patches Iteration 5 (User-Test 2026-05-07 #5) ============================================================ */ /* ---- Radio-Inner-Circle im Menu-Configurator ---- Inner-Circle nutzte var(--white) → im Dark `#1a1a1a` (dunkel) auf Brand-grünem Outer-Circle = kaum sichtbar. Force wirklich-weiß. */ :root[data-theme="dark"] .sf-menu-modal .sf-mm-opt.is-checked .sf-mm-opt-control.radio::after { background: #fff; } /* ---- Picker-Empty-Card-Texte ("Bitte wählen" + Sub-Hinweis) ---- Im Dark waren --text-soft (#9a9a9a) + --text-muted (#6b6b6b) zu blass auf der Card. User-Wunsch: var(--text) für besseren Kontrast. */ :root[data-theme="dark"] .sf-menu-modal .sf-mm-opt-picker-label, :root[data-theme="dark"] .sf-menu-modal .sf-mm-opt-picker-sub { color: var(--text); } /* ---- GPS-Card im Checkout (.co-gps-card) ---- Hardcoded Mint-BG `#e8f3ec` + Mint-Border → im Dark unpassend. */ :root[data-theme="dark"] .co-gps-card { background: var(--cream-2); border-color: var(--line); } :root[data-theme="dark"] .co-gps-card-icon { background: var(--white); } /* ---- Driver-App (.drv-app) Dark-Mode ---- Driver-App nutzt eigene `--drv-*`-Vars (gescoped auf .drv-app) statt der globalen Customer-Vars. Im Dark werden die Vars umdefiniert — Layout + Children fallen damit automatisch auf die dunklen Werte zurück. */ :root[data-theme="dark"] .drv-app { --drv-bg: #0a0a0a; /* Page-BG */ --drv-off-white: #1a1a1a; /* Card-BG (Header-Btn, Tour, KPI, Pool, Recent) */ --drv-amber-soft: rgba(234, 179, 8, 0.18); --drv-amber-dark: #fde68a; /* Cash-KPI-Text — im Dark heller */ --drv-blue-soft: rgba(14, 165, 233, 0.16); --drv-purple-soft: rgba(124, 58, 237, 0.18); --drv-green-dark: #a7f3d0; /* Erfolgs-Text — im Dark heller */ } /* Header sitzt nicht direkt in .drv-app, sondern davor — eigener Override. */ :root[data-theme="dark"] .drv-header { background: var(--white); border-bottom-color: var(--line); } :root[data-theme="dark"] .drv-header-icon-btn:hover { background: var(--cream-2); color: var(--ink); } :root[data-theme="dark"] .drv-flash.ok { background: rgba(10, 138, 78, 0.18); color: #a7f3d0; } :root[data-theme="dark"] .drv-flash.err { background: rgba(220, 38, 38, 0.18); color: #fca5a5; } /* Tour-Card Cash-Variante: hellgelber Gradient + amber-Text + amber-Submit-Btn sehen im Dark zu hell aus (gelb-on-hellgelb = unleserlich). Außerdem überschreibt .drv-app *-Regel die Text-Color → eigene Specificity nötig. */ :root[data-theme="dark"] .drv-tour-card { background: var(--white); border-color: var(--line); box-shadow: 0 4px 12px -3px rgba(0,0,0,0.4); } :root[data-theme="dark"] .drv-app .drv-tc-cash-alert { background: rgba(234, 179, 8, 0.16); border-bottom-color: rgba(234, 179, 8, 0.35); } :root[data-theme="dark"] .drv-app .drv-tc-cash-alert-text { color: #fde68a; } :root[data-theme="dark"] .drv-app .drv-tc-cash-alert-text strong { color: #fef3c7; } :root[data-theme="dark"] .drv-app .drv-btn-deliver.cash-mode { background: linear-gradient(135deg, #5a4310 0%, #2e2208 100%); box-shadow: 0 4px 12px -3px rgba(0,0,0,0.5); color: #fde68a; } :root[data-theme="dark"] .drv-app .drv-btn-deliver.cash-mode .drv-btn-deliver-amount { background: rgba(253, 230, 138, 0.18); color: #fef3c7; } :root[data-theme="dark"] .drv-app .drv-btn-deliver { color: #fff; } :root[data-theme="dark"] .drv-app .drv-tc-section { border-top-color: var(--line); } /* Empty-States (.drv-tours-empty, .drv-pool-empty) haben hellgrauen BG-Fallback */ :root[data-theme="dark"] .drv-tours-empty, :root[data-theme="dark"] .drv-pool-empty, :root[data-theme="dark"] .drv-recent-empty { background: var(--cream-2); color: var(--text-soft); } /* Produkt-Modal Radio/Checkbox-Control im Dark-Mode: --line ist auf Modal-BG zu dezent → User-Wunsch heller Border via --text-muted (#6b6b6b im Dark). */ :root[data-theme="dark"] .sf-opt-control { border: 2px solid var(--text-muted); }