/* Alt-Rappweiler — öffentliches Design Standard: dunkles Grau-Theme. Hell per . */ :root { --accent: #d92b34; --bg: #16181d; --card: #1f232b; --card2: #272c36; --text: #eceef2; --text2: #c7ccd6; --muted: #9aa1af; --line: #323844; --line-soft: #2a303b; --line-strong: #4a5160; --input-bg: #272c36; --header-bg: rgba(22, 24, 29, .93); --catbar-bg: rgba(22, 24, 29, .93); --accent-soft: rgba(217, 43, 52, .18); --accent-border: rgba(217, 43, 52, .55); --accent-text: #ff8d93; --ok: #4ade80; --warn: #f0a75a; --green: #15803d; --radius: 14px; --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 8px 26px rgba(0, 0, 0, .28); color-scheme: dark; } :root[data-theme="light"] { --bg: #f3f4f6; --card: #ffffff; --card2: #f1f2f4; --text: #1f2430; --text2: #374151; --muted: #6b7280; --line: #e5e7eb; --line-soft: #f1f2f4; --line-strong: #c7cad1; --input-bg: #ffffff; --header-bg: rgba(255, 255, 255, .95); --catbar-bg: rgba(243, 244, 246, .95); --accent-soft: rgba(217, 43, 52, .08); --accent-border: rgba(217, 43, 52, .45); --accent-text: #d92b34; --ok: #15803d; --warn: #b45309; --shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 6px 20px rgba(16, 24, 40, .05); color-scheme: light; } * { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.25; } .container { max-width: 1180px; margin: 0 auto; padding: 0 20px; } /* ------------------------------------------------ Icons */ .ic { width: 20px; height: 20px; flex: 0 0 auto; display: inline-block; vertical-align: -.22em; fill: none; color: inherit; } .ic-sm { width: 15px; height: 15px; } .ic-lg { width: 24px; height: 24px; } .icon-btn-plain { background: none; border: 0; cursor: pointer; color: var(--text); display: inline-flex; align-items: center; justify-content: center; padding: 8px; border-radius: 10px; } .icon-btn-plain:hover { background: var(--card2); } /* ------------------------------------------------ Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; cursor: pointer; font: inherit; font-weight: 600; border-radius: 11px; padding: 11px 20px; line-height: 1.25; text-decoration: none !important; text-align: center; position: relative; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .1s ease, opacity .16s ease; } .btn:focus { outline: none; } .btn:focus-visible { box-shadow: 0 0 0 3px rgba(217, 43, 52, .38); } .btn:active { transform: translateY(1px) scale(.995); } .btn .ic { width: 18px; height: 18px; } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(217, 43, 52, .3); } .btn-primary:hover { background: #e6353e; box-shadow: 0 4px 14px rgba(217, 43, 52, .38); } .btn-primary:active { background: #c2242c; box-shadow: 0 1px 4px rgba(217, 43, 52, .3); } .btn-primary:disabled, .btn-primary[disabled] { background: var(--line-strong); color: var(--muted); cursor: not-allowed; box-shadow: none; transform: none; } .btn-ghost { background: var(--card); color: var(--text); border-color: var(--line); } .btn-ghost:hover { border-color: var(--line-strong); background: var(--card2); } .btn-ghost:active { background: var(--line-soft); } .btn-block { display: flex; width: 100%; } .btn-lg { padding: 15px 24px; font-size: 17px; border-radius: 12px; } /* Ladezustand mit drehendem Ring */ .btn.is-loading { pointer-events: none; color: transparent !important; } .btn.is-loading .ic { visibility: hidden; } .btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: btnSpin .6s linear infinite; } .btn-ghost.is-loading::after { border-color: var(--line-strong); border-top-color: var(--text); } @keyframes btnSpin { to { transform: rotate(360deg); } } /* ------------------------------------------------ Header */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; gap: 14px; height: 66px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; } .brand-mark { width: 34px; height: 34px; } .brand-name { font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -.3px; } .status-chip { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .status-chip .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: 0 0 auto; } .status-chip.open { background: rgba(74, 222, 128, .16); color: #4ade80; } .status-chip.open .dot { animation: livePulse 2s ease-in-out infinite; } .status-chip.closed { background: var(--card2); color: var(--muted); } .status-chip.paused { background: rgba(240, 167, 90, .18); color: var(--warn); } :root[data-theme="light"] .status-chip.open { background: #dcfce7; color: #15803d; } :root[data-theme="light"] .status-chip.paused { background: #fef3c7; color: #92400e; } @keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } .site-nav { margin-left: auto; display: flex; gap: 4px; } .site-nav a { color: var(--text); font-weight: 600; font-size: 15px; padding: 8px 14px; border-radius: 8px; text-decoration: none !important; } .site-nav a:hover { background: var(--bg); } .site-nav a.active { color: var(--accent); background: var(--accent-soft); } :root:not([data-theme="light"]) .site-nav a.active { color: #ff8d93; } .nav-toggle { display: none; margin-left: auto; } .cart-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; border: 0; cursor: pointer; background: var(--accent); color: #fff; -webkit-tap-highlight-color: transparent; box-shadow: 0 2px 8px rgba(217, 43, 52, .3); transition: background-color .16s ease, box-shadow .16s ease, transform .1s ease; } .cart-btn:hover { background: #e6353e; box-shadow: 0 4px 14px rgba(217, 43, 52, .38); } .cart-btn:active { transform: translateY(1px); } .cart-btn .ic { width: 21px; height: 21px; } .cart-count { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; background: #14161b; color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--card); } .theme-btn { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; cursor: pointer; background: var(--card); color: var(--text); border: 1px solid var(--line); -webkit-tap-highlight-color: transparent; transition: border-color .16s ease, background-color .16s ease, transform .1s ease; } .theme-btn:hover { border-color: var(--line-strong); background: var(--card2); } .theme-btn:active { transform: translateY(1px); } .theme-btn .ic { transition: transform .3s ease; } .theme-btn:hover .ic { transform: rotate(18deg); } .theme-ico-sun { display: block; } .theme-ico-moon { display: none; } :root[data-theme="light"] .theme-ico-sun { display: none; } :root[data-theme="light"] .theme-ico-moon { display: block; } /* ------------------------------------------------ Hero */ .hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #23272f 0%, #343945 60%, #23272f 100%); color: #fff; padding: 54px 0 66px; text-align: center; } .hero-circle { position: absolute; left: 50%; bottom: -170px; transform: translateX(-50%); width: 460px; height: 460px; border-radius: 999px; background: radial-gradient(circle at 50% 35%, #e8555d 0%, var(--accent) 60%, #8d1c22 100%); opacity: .16; pointer-events: none; } .hero-inner { position: relative; animation: heroIn .5s ease-out both; } @keyframes heroIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .hero h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -.5px; } .hero-tagline { margin-top: 8px; font-size: 17px; color: #d3d6dd; } /* Info-Leiste unter dem Hero: ordentlich sortierte Kacheln */ .info-strip { position: relative; z-index: 5; margin-top: -34px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; } .info-tile { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-right: 1px solid var(--line); } .info-tile:last-child { border-right: 0; } .info-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; } .info-tile:hover .info-ico .ic { transform: scale(1.12); } .info-ico .ic { transition: transform .2s ease; } .info-text { min-width: 0; } .info-label { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .info-value { display: block; font-weight: 800; font-size: 14.5px; white-space: nowrap; } /* ------------------------------------------------ Suche */ .search-box { position: relative; flex: 0 0 auto; display: flex; align-items: center; } .search-box svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; } .search-box input { width: 210px; margin: 0; padding: 8px 12px 8px 36px; font-size: 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--input-bg); color: var(--text); transition: width .2s, border-color .12s, box-shadow .12s; } .search-box input:focus { width: 260px; } .search-box-lg { max-width: 460px; margin: 18px auto 0; } .search-box-lg input { width: 100%; padding: 13px 16px 13px 44px; font-size: 15.5px; } .search-box-lg input:focus { width: 100%; } .search-box-lg svg { left: 16px; width: 18px; height: 18px; } /* ------------------------------------------------ Kategorie-Leiste */ .cat-bar { position: sticky; top: 66px; z-index: 40; background: var(--catbar-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 10px 0; } .cat-bar-inner { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; align-items: center; } .cat-bar-inner::-webkit-scrollbar { display: none; } .cat-chip { flex: 0 0 auto; background: var(--card); border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 999px; text-decoration: none !important; transition: all .15s; } .cat-chip:hover, .cat-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* ------------------------------------------------ Menü-Layout */ .menu-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; padding: 28px 20px 60px; align-items: start; } .menu-section { margin-bottom: 34px; scroll-margin-top: 130px; } .menu-section h2 { font-size: 24px; margin-bottom: 14px; letter-spacing: -.3px; } .item-list { display: grid; gap: 12px; } .item-card { display: flex; justify-content: space-between; gap: 16px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; cursor: pointer; border: 1px solid transparent; transition: border-color .15s, transform .15s, box-shadow .15s; } .item-card:hover { border-color: var(--accent-border); transform: translateY(-1px); } .item-info { min-width: 0; } .item-info h3 { font-size: 16.5px; margin-bottom: 3px; } .item-desc { color: var(--muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .item-bottom { margin-top: 8px; display: flex; align-items: center; gap: 12px; } .item-price { font-weight: 800; font-size: 15.5px; } .item-allergens { font-size: 12px; color: var(--muted); cursor: help; display: inline-flex; align-items: center; gap: 4px; } .item-media { position: relative; flex: 0 0 auto; } .item-media img { width: 104px; height: 104px; object-fit: cover; border-radius: 10px; background: var(--bg); } .item-add { position: absolute; right: -6px; bottom: -6px; width: 34px; height: 34px; border-radius: 999px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .28); transition: background-color .16s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .16s ease; } .item-add .ic { width: 17px; height: 17px; } .item-card:hover .item-add { background: #e6353e; transform: scale(1.14) rotate(90deg); box-shadow: 0 4px 14px rgba(217, 43, 52, .45); } .item-card:active .item-add { transform: scale(1.02) rotate(90deg); } .menu-note { color: var(--muted); font-size: 13px; margin-top: 10px; } /* ------------------------------------------------ Warenkorb */ .cart-panel { position: sticky; top: 130px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 160px); } .cart-head { display: flex; align-items: center; justify-content: space-between; } .cart-head h3 { font-size: 18px; } .cart-close { display: none; background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--muted); } .cart-lines { overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .cart-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 22px 0; } .cart-line { display: flex; gap: 10px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 10px; } .cart-line:last-child { border-bottom: 0; } .cart-line-body { flex: 1; min-width: 0; } .cart-line-name { font-weight: 700; font-size: 14px; } .cart-line-extras { color: var(--muted); font-size: 12.5px; } .cart-line-price { font-weight: 700; font-size: 14px; white-space: nowrap; } .qty-ctrl { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .qty-ctrl button { width: 28px; height: 28px; border-radius: 9px; border: 1px solid var(--line); background: var(--input-bg); color: var(--text); cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: border-color .14s ease, color .14s ease, background-color .14s ease, transform .1s ease; } .qty-ctrl button:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); } .qty-ctrl button:active { transform: scale(.92); } .qty-ctrl span { min-width: 20px; text-align: center; font-weight: 700; font-size: 14px; } .cart-remove { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 5px; margin-top: 3px; border-radius: 8px; display: inline-flex; transition: color .14s ease, background-color .14s ease; } .cart-remove:hover { color: var(--accent-text); background: var(--accent-soft); } .cart-summary { border-top: 1px solid var(--line); padding-top: 10px; font-size: 14px; display: flex; flex-direction: column; gap: 5px; } .sum-row { display: flex; justify-content: space-between; } .sum-row.muted { color: var(--muted); font-size: 13px; } .sum-row.total { font-weight: 800; font-size: 16px; } .sum-hint { font-size: 12.5px; color: var(--muted); } .sum-hint.warn { color: var(--warn); font-weight: 600; } .mobile-cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--header-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--line); } /* ------------------------------------------------ Modals */ .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(15, 18, 25, .55); display: flex; align-items: center; justify-content: center; padding: 18px; } .modal { position: relative; background: var(--card); border-radius: 16px; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: 0 24px 70px rgba(0, 0, 0, .3); animation: modalIn .18s ease-out; } .modal-wide { max-width: 620px; } @keyframes modalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .modal-close { position: absolute; top: 10px; right: 12px; z-index: 5; width: 36px; height: 36px; border-radius: 999px; border: 0; cursor: pointer; background: var(--bg); color: var(--text); font-size: 21px; line-height: 1; } .modal-close:hover { background: var(--line); } .modal-body { padding: 22px; } .modal-body h2 { font-size: 21px; margin-bottom: 12px; padding-right: 36px; } .modal-item-img { width: 100%; height: 190px; object-fit: cover; border-radius: 12px; margin-bottom: 14px; background: var(--bg); } .modal-item-desc { color: var(--muted); font-size: 14.5px; margin-bottom: 6px; } .modal-allergens { font-size: 12.5px; color: var(--muted); margin-bottom: 12px; } .extras-title { font-weight: 700; font-size: 14px; margin: 14px 0 8px; } .extra-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 7px; cursor: pointer; transition: border-color .12s, background .12s; font-size: 14.5px; } .extra-row:hover { border-color: var(--line-strong); } .extra-row.checked { border-color: var(--accent); background: var(--accent-soft); } .extra-row input { accent-color: var(--accent); width: 17px; height: 17px; } .extra-row .extra-price { margin-left: auto; color: var(--muted); font-weight: 600; white-space: nowrap; } .item-note-label { display: block; font-size: 13.5px; font-weight: 600; margin: 12px 0 6px; } .modal-footer { display: flex; align-items: center; gap: 14px; margin-top: 16px; } .modal-footer .qty-ctrl button { width: 34px; height: 34px; font-size: 18px; } .modal-footer .btn { flex: 1; } /* ------------------------------------------------ Formulare */ label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); } input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="number"], textarea, select { width: 100%; margin-top: 5px; padding: 10px 12px; font: inherit; border: 1px solid var(--line); border-radius: 10px; background: var(--input-bg); color: var(--text); transition: border-color .12s, box-shadow .12s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217, 43, 52, .22); } textarea { resize: vertical; } form label { margin-bottom: 12px; } .form-section { margin-bottom: 18px; } .form-section h3 { font-size: 15px; margin-bottom: 10px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; } .form-grid label { margin-bottom: 0; } .form-grid .span2 { grid-column: span 2; } .type-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .type-btn { padding: 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); font: inherit; font-weight: 700; color: var(--text); cursor: pointer; transition: all .12s; } .type-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } :root:not([data-theme="light"]) .type-btn.active { color: #ff8d93; } .pickup-info { margin-top: 10px; font-size: 14px; color: var(--muted); } .pay-options { display: flex; flex-direction: column; gap: 8px; } .pay-option { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14.5px; } /* Ausgewählte Zahlungsart: per JS gesetzte Klasse statt :has() — läuft in jedem Browser */ .pay-option.checked { border-color: var(--accent); background: var(--accent-soft); } .pay-option input { accent-color: var(--accent); width: 17px; height: 17px; margin: 0; } .pay-option .ic { color: var(--muted); } .pay-option.checked .ic { color: var(--accent-text); } .pay-option, .extra-row, .type-btn { -webkit-tap-highlight-color: transparent; } .type-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .legal-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 13.5px; margin: 14px 0; cursor: pointer; } .legal-check input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; margin-top: 1px; } .delivery-result { margin-top: 8px; font-size: 14px; font-weight: 600; min-height: 20px; } .delivery-result.ok { color: var(--ok); } .delivery-result.fail { color: var(--accent); } :root:not([data-theme="light"]) .delivery-result.fail { color: #ff8d93; } .checkout-summary { background: var(--bg); border-radius: 12px; padding: 14px; font-size: 14px; display: flex; flex-direction: column; gap: 5px; } .order-hint { font-size: 12.5px; color: var(--muted); margin-top: 10px; text-align: center; } .alert { padding: 11px 14px; border-radius: 10px; font-size: 14px; font-weight: 600; margin-bottom: 14px; } .alert-error { background: #fee2e2; color: #b91c1c; } .alert-success { background: #dcfce7; color: var(--green); } /* ------------------------------------------------ Inhaltsseiten */ .page { padding: 36px 20px 60px; } .page h1 { font-size: 30px; margin-bottom: 20px; letter-spacing: -.4px; } .card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; } .card h2 { font-size: 19px; margin: 16px 0 8px; } .card h2:first-child { margin-top: 0; } .card h3 { font-size: 16px; margin: 14px 0 8px; } .card p { margin-bottom: 10px; } .legal-page .card { max-width: 820px; } .pre-line { white-space: pre-line; } .empty-state { color: var(--muted); background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 34px; text-align: center; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } .contact-line { margin-bottom: 10px; } .about-text { color: var(--muted); font-size: 14.5px; margin-top: 14px; } .hours-table { border-collapse: collapse; width: 100%; font-size: 14px; } .hours-table td { padding: 3px 0; vertical-align: top; } .hours-table td:first-child { font-weight: 600; padding-right: 16px; white-space: nowrap; } .gallery-grid { columns: 3 260px; column-gap: 14px; } .gallery-item { break-inside: avoid; margin-bottom: 14px; cursor: zoom-in; background: var(--card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); } .gallery-item img { width: 100%; } .gallery-item figcaption { padding: 9px 12px; font-size: 13px; color: var(--muted); } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10, 12, 16, .92); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 30px; } .lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; } .posts-list { display: flex; flex-direction: column; gap: 18px; max-width: 760px; } .post-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .post-image { width: 100%; max-height: 320px; object-fit: cover; } .post-body { padding: 20px 24px; } .post-date { font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; } .post-body h2 { margin: 4px 0 8px; font-size: 21px; } .post-text { white-space: pre-line; color: var(--text2); } /* ------------------------------------------------ Bestell-Animation (nach dem Absenden) */ .order-anim { position: fixed; inset: 0; z-index: 400; background: var(--bg); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .28s ease; } .order-anim.run { opacity: 1; } .order-anim.leave { opacity: 0; } .order-anim-inner { text-align: center; padding: 20px; width: 100%; max-width: 460px; } .oa-scene { position: relative; height: 96px; margin-bottom: 18px; overflow: hidden; } .oa-scooter { width: 132px; height: 78px; color: var(--accent); position: absolute; top: 8px; left: 50%; margin-left: -66px; } .order-anim.run .oa-scooter { animation: oaRide 1.5s cubic-bezier(.4, 0, .35, 1) forwards; } @keyframes oaRide { 0% { transform: translateX(-160%); opacity: 0; } 22% { transform: translateX(0); opacity: 1; } 62% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(190%); opacity: 0; } } .order-anim.run .oa-wheel { animation: oaSpin .5s linear infinite; transform-origin: center; transform-box: fill-box; } @keyframes oaSpin { to { transform: rotate(360deg); } } .order-anim.run .oa-box { animation: oaBounce .38s ease-in-out 4; transform-origin: center; transform-box: fill-box; } @keyframes oaBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } } .oa-line { position: absolute; height: 3px; border-radius: 2px; background: var(--line-strong); opacity: 0; } .oa-line-1 { width: 46px; top: 28px; left: 6%; } .oa-line-2 { width: 30px; top: 48px; left: 2%; } .oa-line-3 { width: 38px; top: 68px; left: 10%; } .order-anim.run .oa-line { animation: oaSpeed .55s linear infinite; } .order-anim.run .oa-line-2 { animation-delay: .12s; } .order-anim.run .oa-line-3 { animation-delay: .24s; } @keyframes oaSpeed { 0% { transform: translateX(0); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateX(-90px); opacity: 0; } } .oa-text { font-size: 17px; font-weight: 700; color: var(--text); } /* ------------------------------------------------ Bestätigung */ .confirm-card { max-width: 640px; margin: 0 auto; text-align: center; position: relative; overflow: hidden; } .confirm-icon { width: 76px; height: 76px; margin: 6px auto 16px; } .confirm-icon svg { width: 100%; height: 100%; overflow: visible; } .ci-ring { fill: rgba(74, 222, 128, .14); stroke: var(--ok); stroke-width: 4; stroke-dasharray: 202; stroke-dashoffset: 202; animation: ciRing .6s ease-out .05s forwards; } .ci-check { fill: none; stroke: var(--ok); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 46; stroke-dashoffset: 46; animation: ciCheck .4s cubic-bezier(.65, 0, .45, 1) .5s forwards; } @keyframes ciRing { to { stroke-dashoffset: 0; } } @keyframes ciCheck { to { stroke-dashoffset: 0; } } .confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .cf { position: absolute; top: -14px; width: 8px; height: 12px; border-radius: 2px; opacity: 0; animation-name: cfFall; animation-timing-function: ease-in; animation-fill-mode: forwards; } @keyframes cfFall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateY(420px) rotate(540deg); opacity: 0; } } .confirm-sub { color: var(--muted); margin-bottom: 18px; } .confirm-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 20px; } .confirm-meta div { background: var(--bg); border-radius: 10px; padding: 10px; } .confirm-meta span { display: block; font-size: 12px; color: var(--muted); } .confirm-meta strong { font-size: 15px; } .order-table { width: 100%; border-collapse: collapse; text-align: left; margin-bottom: 16px; } .order-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14.5px; } .order-table .qty { white-space: nowrap; color: var(--muted); width: 40px; } .order-table .num { text-align: right; white-space: nowrap; font-weight: 600; } .order-table .total-row td { border-bottom: 0; font-weight: 800; font-size: 16px; } .line-extras { color: var(--muted); font-size: 12.5px; } .confirm-address { margin-bottom: 18px; font-size: 14.5px; display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; } .confirm-address .ic { color: var(--accent-text); } .confirm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* ------------------------------------------------ Footer */ .site-footer { background: #23272f; color: #c9cdd6; margin-top: 20px; } .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 40px 20px 30px; } .site-footer h4 { color: #fff; margin-bottom: 10px; font-size: 15px; } .site-footer a { color: #e3e6ec; } .site-footer .hours-table { color: #c9cdd6; } .footer-note { font-size: 12.5px; color: #8d93a1; margin-top: 12px; } .footer-contact { display: flex; flex-direction: column; gap: 5px; } .footer-contact a { display: inline-flex; align-items: center; gap: 8px; } .contact-with-ic { display: flex; align-items: flex-start; gap: 10px; } .contact-with-ic .ic { color: var(--accent-text); margin-top: 2px; } .footer-bottom { border-top: 1px solid #363b46; padding: 14px 0; font-size: 13px; color: #8d93a1; } /* ------------------------------------------------ Speisekarten-Seite */ .menu-hero { position: relative; overflow: hidden; text-align: center; color: #fff; background: linear-gradient(135deg, #23272f 0%, #343945 60%, #23272f 100%); padding: 46px 20px 42px; } .menu-hero-circle { position: absolute; left: 50%; top: -230px; transform: translateX(-50%); width: 420px; height: 420px; border-radius: 999px; background: var(--accent); opacity: .14; pointer-events: none; } .menu-hero h1 { position: relative; font-size: clamp(26px, 4.5vw, 38px); letter-spacing: -.4px; } .menu-hero p { position: relative; color: #d3d6dd; margin-top: 6px; } .menu-hero .search-box { position: relative; } .menu-card-wrap { padding: 30px 20px 60px; max-width: 860px; } .menu-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 28px; margin-bottom: 20px; } .menu-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .menu-card-ico { width: 44px; height: 44px; border-radius: 999px; flex: 0 0 auto; background: var(--accent-soft); color: var(--accent-text); display: flex; align-items: center; justify-content: center; } .menu-card-head h2 { font-size: 21px; letter-spacing: -.3px; white-space: nowrap; } .menu-card-rule { flex: 1; border-top: 2px dashed var(--line); } .menu-row { padding: 9px 0; border-bottom: 1px solid var(--line-soft); } .menu-row:last-child { border-bottom: 0; } .menu-row-main { display: flex; align-items: baseline; gap: 10px; } .menu-row-name { font-weight: 700; font-size: 15.5px; } .menu-row-dots { flex: 1; border-bottom: 2px dotted var(--line-strong); transform: translateY(-4px); } .menu-row-price { font-weight: 800; color: var(--accent); white-space: nowrap; } :root:not([data-theme="light"]) .menu-row-price { color: #ff8d93; } .menu-row-desc { color: var(--muted); font-size: 13.5px; margin-top: 2px; } .menu-row-allergens { color: #a7adb8; font-size: 11.5px; margin-top: 1px; } .menu-cta { text-align: center; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px; margin-top: 6px; } .menu-cta h3 { font-size: 20px; } .menu-cta p { color: var(--muted); margin: 6px 0 16px; } /* ------------------------------------------------ Anti-Spam (unsichtbares Feld) */ .hp-field { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* ------------------------------------------------ Animationen */ .reveal { transition: opacity .45s ease, transform .45s ease; } .reveal:not(.in) { opacity: 0; transform: translateY(14px); } @keyframes badgePulse { 0% { transform: scale(1); } 45% { transform: scale(1.45); } 100% { transform: scale(1); } } .cart-count.pulse { animation: badgePulse .45s ease; } .add-toast { position: fixed; bottom: 86px; left: 50%; transform: translateX(-50%) translateY(8px); background: #14161b; color: #fff; padding: 11px 22px; border-radius: 999px; font-weight: 700; font-size: 14px; z-index: 300; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); display: flex; align-items: center; gap: 8px; } .add-toast .ic { color: var(--ok); } .add-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal, .reveal:not(.in) { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .hero-inner { animation: none; } .ci-ring, .ci-check { animation: none; stroke-dashoffset: 0; } .oa-scooter, .oa-wheel, .oa-box, .oa-line, .cf, .status-chip.open .dot { animation: none !important; } .item-card:hover .item-add { transform: none; } .btn:active { transform: none; } } /* ------------------------------------------------ Responsiv */ @media (max-width: 1100px) { .menu-layout { grid-template-columns: 1fr; } .cart-panel { display: none; position: fixed; inset: auto 0 0 0; top: auto; z-index: 90; border-radius: 18px 18px 0 0; max-height: 80vh; box-shadow: 0 -12px 40px rgba(0, 0, 0, .25); } .cart-panel.open { display: flex; } .cart-close { display: block; } .mobile-cart-bar[data-active] { display: block; } } @media (min-width: 1101px) { .mobile-cart-bar { display: none !important; } } @media (max-width: 900px) { .info-strip { grid-template-columns: 1fr 1fr; } .info-tile { border-bottom: 1px solid var(--line); } .info-tile:nth-child(2n) { border-right: 0; } .info-tile:nth-last-child(-n+2) { border-bottom: 0; } } @media (max-width: 760px) { .header-inner { gap: 8px; } .status-chip { display: none; } .brand-name { font-size: 17px; white-space: nowrap; } .theme-btn, .cart-btn { width: 42px; height: 42px; } .info-tile { padding: 12px; gap: 9px; } .info-ico { width: 34px; height: 34px; font-size: 15px; } .info-label { font-size: 10px; letter-spacing: .3px; } .info-value { white-space: normal; font-size: 13px; line-height: 1.3; } .search-box input, .search-box input:focus { width: 100%; min-width: 150px; } .search-box { flex: 1 1 160px; } .site-nav { display: none; position: absolute; top: 66px; left: 0; right: 0; background: var(--card); border-bottom: 1px solid var(--line); flex-direction: column; padding: 10px 16px; box-shadow: var(--shadow); } .site-nav.open { display: flex; } .nav-toggle { display: block; } .contact-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; gap: 22px; } .form-grid { grid-template-columns: 1fr; } .form-grid .span2 { grid-column: span 1; } .item-media img { width: 88px; height: 88px; } .cat-bar { top: 66px; } /* Handy-Feinschliff */ .page { padding: 24px 16px 50px; } .page h1 { font-size: 25px; } .card { padding: 18px 16px; } .menu-card { padding: 18px 16px; } .menu-card-wrap { padding: 22px 14px 50px; } .menu-layout { padding: 20px 14px 90px; gap: 18px; } .menu-section h2 { font-size: 21px; } .modal-body { padding: 18px 16px; } .modal-body h2 { font-size: 19px; } .modal { max-height: calc(100vh - 20px); border-radius: 14px; } .modal-backdrop { padding: 10px; align-items: flex-end; } .cart-panel { padding-bottom: calc(18px + env(safe-area-inset-bottom)); } .confirm-meta { grid-template-columns: 1fr 1fr; } .gallery-grid { columns: 1; } .btn { padding: 12px 20px; } input, textarea, select { font-size: 16px; } /* verhindert Auto-Zoom auf iPhones */ }