:root {
/* Warme, helle Palette statt des dunklen Kasse-Looks — Terrakotta/Oliv als Anklang an
griechische Taverne + Sonne, tiefes Ägäis-Blau für Logo/Akzente, viel Weißraum. */
--djk-cream: #faf5ec;
--djk-cream-soft: #f3ead9;
--djk-card: #ffffff;
--djk-ink: #2e281f;
--djk-ink-soft: #5b5245;
--djk-gray: #8f8574;
--djk-border: #eae1cf;
--djk-terracotta: #dd6b3a;
--djk-terracotta-dark: #c2582c;
--djk-aegean: #1d5c73;
--djk-aegean-dark: #143f4f;
--djk-yellow: #dd6b3a;
--djk-yellow-dark: #c2582c;
--djk-danger: #d64545;
--djk-success: #3f8f5c;
--djk-olive: #8a9a5b;
--radius: 14px;
--radius-sm: 10px;
--shadow: 0 10px 28px rgba(46, 40, 31, 0.1);
--shadow-sm: 0 4px 14px rgba(46, 40, 31, 0.07);
}
* { box-sizing: border-box; }
/* Kein "padding: 0" hier — shop.css wird jetzt zusammen mit style.css geladen (index.php,
warenkorb.php, checkout.php teilen sich den Haupt-Header/Footer), das würde sonst den
Bottom-Nav-Abstand von style.css (body { padding-bottom: ... } bei ≤780px) überschreiben. */
html, body { margin: 0; }
body {
font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--djk-cream);
color: var(--djk-ink);
min-height: 100vh;
line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
.shop-container { max-width: 1140px; margin: 0 auto; padding: 0 10px; }
/* Header */
.shop-header { position: sticky; top: 0; z-index: 50; background: rgba(250, 245, 236, 0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--djk-border); }
.shop-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 14px; max-width: 1140px; margin: 0 auto; }
.shop-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; color: var(--djk-ink); line-height: 1; }
.shop-brand-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--djk-aegean); color: #fff; font-weight: 900; }
.shop-brand-badge-img { object-fit: cover; }
.shop-brand small { font-weight: 600; color: var(--djk-ink-soft); font-size: 0.72rem; }
.shop-nav { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 600; }
.shop-nav a { display: inline-flex; align-items: center; gap: 6px; color: #ffffff; line-height: 1.6; }
.shop-nav a:hover { color: var(--djk-terracotta); }
.shop-nav a .icon { width: 18px; height: 18px; }
.shop-nav a.shop-nav-icon, .shop-nav a.shop-cart-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; justify-content: center; padding: 0; border: 2px solid var(--djk-terracotta); color: var(--djk-terracotta); background: transparent; }
.shop-nav a.shop-nav-icon:hover, .shop-nav a.shop-cart-btn:hover { background: rgba(221, 107, 58, 0.12); color: var(--djk-terracotta); }
.shop-nav a.shop-nav-icon .icon, .shop-nav a.shop-cart-btn .icon { width: 19px; height: 19px; }
.shop-btn-cta { background: var(--djk-terracotta); color: #fff; border-radius: 999px; padding: 9px 18px; font-weight: 700; }
.shop-btn-cta:hover { background: var(--djk-terracotta-dark); color: #fff; }
.shop-cart-badge { position: absolute; top: -5px; right: -5px; background: var(--djk-danger); color: #fff; border-radius: 50%; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800; padding: 0 4px; }
/* Bottom app-style tab bar (Handy) — mirrors djk-abenberg.com/assets/css/style.css .bottom-nav */
.shop-bottom-nav {
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 60;
background: rgb(255 255 255 / 55%);
backdrop-filter: blur(10px);
border-top: 1px solid var(--djk-border);
padding: 6px max(8px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right, 0px));
}
.shop-bottom-nav-inner { display: flex; align-items: center; }
.shop-bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; color: var(--djk-gray); font-size: 0.65rem; font-weight: 600; padding: 6px 4px; border-radius: 5px; text-align: center; }
.shop-bottom-nav a:hover { text-decoration: none; }
.shop-bottom-nav a .icon { width: 22px; height: 22px; }
.shop-bottom-nav a.active { color: var(--djk-terracotta); }
.shop-bottom-nav-icon-wrap { position: relative; display: inline-flex; }
.shop-bottom-nav-icon-wrap .shop-cart-badge { top: -6px; right: -8px; }
@media (max-width: 780px) {
.shop-nav { display: none !important; }
.shop-bottom-nav { display: block; }
body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
.shop-footer { display: none; }
}
/* Hero */
.shop-hero { padding: 40px 16px 12px; }
.shop-hero-inner { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; }
.shop-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--djk-cream-soft); color: var(--djk-terracotta-dark); border-radius: 999px; padding: 7px 16px; font-size: 0.8rem; font-weight: 800; margin-bottom: 16px; }
.shop-hero-badge .icon { width: 16px; height: 16px; }
.shop-hero h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.15; margin: 0 0 14px; color: var(--djk-ink); }
.shop-hero h1 span { color: var(--djk-terracotta); }
.shop-hero p { color: var(--djk-ink-soft); max-width: 480px; margin: 0 0 26px; font-size: 1rem; }
.shop-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; }
.shop-hero-features { display: flex; gap: 26px; flex-wrap: wrap; }
.shop-hero-feature { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; font-weight: 700; color: var(--djk-ink-soft); }
.shop-hero-feature .icon { width: 20px; height: 20px; color: var(--djk-terracotta); flex-shrink: 0; }
.shop-hero-visual { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4/3.4; background: linear-gradient(135deg, var(--djk-aegean) 0%, #2b7f97 55%, var(--djk-terracotta) 130%); box-shadow: var(--shadow); }
.shop-hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.shop-hero-visual .icon { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; color: rgba(255,255,255,0.55); }
.shop-hero-badge-float { position: absolute; bottom: 18px; left: 18px; background: rgba(255,255,255,0.94); border-radius: var(--radius-sm); padding: 10px 16px; box-shadow: var(--shadow-sm); font-weight: 800; font-size: 0.85rem; color: var(--djk-ink); display: flex; align-items: center; gap: 8px; }
.shop-hero-badge-float .icon { width: 18px; height: 18px; color: var(--djk-terracotta); }
@media (max-width: 780px) {
.shop-hero-inner { grid-template-columns: 1fr; }
.shop-hero-visual { aspect-ratio: 16/10; order: -1; }
}
/* Buttons */
.shop-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 13px 24px; font-weight: 700; font-size: 0.94rem; border: 2px solid transparent; cursor: pointer; transition: 0.15s ease; }
.shop-btn-primary { background: var(--djk-terracotta); color: #fff; }
.shop-btn-primary:hover { background: var(--djk-terracotta-dark); }
.shop-btn-outline { border-color: var(--djk-border); color: var(--djk-ink); background: var(--djk-card); }
.shop-btn-outline:hover { border-color: var(--djk-terracotta); color: var(--djk-terracotta); }
.shop-btn-block { width: 100%; }
.shop-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Section titles */
.shop-section { padding: 26px 16px; }
.shop-section-title { font-size: 1.5rem; margin: 0 0 18px; font-weight: 800; }
.shop-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.shop-section-head .shop-section-title { margin: 0; }
.shop-section-sub { color: var(--djk-gray); font-size: 0.85rem; }
/* Beliebt-heute Karussell */
.shop-popular-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.shop-popular-row::-webkit-scrollbar { height: 6px; }
.shop-popular-row::-webkit-scrollbar-thumb { background: var(--djk-border); border-radius: 999px; }
.shop-popular-card { flex: 0 0 220px; scroll-snap-align: start; }
/* Kategorie-Icon-Reihe */
.shop-kategorie-chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 14px; margin-bottom: 8px; }
.shop-kategorie-chip {
display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0;
width: 92px; padding: 12px 8px; border-radius: var(--radius-sm); border: 1px solid var(--djk-border);
background: var(--djk-card); font-size: 0.74rem; font-weight: 700; cursor: pointer; text-align: center;
color: var(--djk-ink-soft); box-shadow: var(--shadow-sm);
}
.shop-kategorie-chip-icon { width: 44px; height: 44px; border-radius: 8px; background: var(--djk-cream-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.shop-kategorie-chip-icon img { width: 100%; height: 100%; object-fit: cover; }
.shop-kategorie-chip-icon .icon { width: 22px; height: 22px; color: var(--djk-terracotta); }
.shop-kategorie-chip.active { border-color: var(--djk-terracotta); color: var(--djk-terracotta-dark); background: var(--djk-cream-soft); }
.shop-kategorie-chip span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
/* Product grid */
.shop-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
/* Karte nach der Vorgabe des Wirts: weiss, ohne Rahmen, kleine Ecken. Die Kante entsteht
allein aus dem Schatten — deshalb hebt der Zeiger sie staerker an, wo vorher der Rahmen
die Farbe wechselte. */
.shop-product-card { background: #ffffff; border-radius: 5px; overflow: hidden; display: flex; flex-direction: column; cursor: pointer; transition: 0.25s ease; box-shadow: var(--shadow-sm); }
.shop-product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.shop-product-photo { aspect-ratio: 4/3; background: var(--djk-cream-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.shop-product-photo img { width: 100%; height: 100%; object-fit: cover; }
.shop-product-photo .icon { width: 36px; height: 36px; color: var(--djk-gray); }
/* Gericht ohne Foto: eine warme Flaeche aus der Hausfarbe mit einem ruhigen Zeichen statt der
grauen Kamera. Vier Stellungen wechseln sich nach der Produkt-ID ab (siehe index.php,
shop_foto_platzhalter) — sonst steht zwanzigmal dasselbe Bild nebeneinander. */
.shop-foto-leer {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.shop-foto-leer .icon {
width: 42%;
height: 42%;
color: #ffffff;
opacity: .85;
stroke-width: 1.2;
filter: drop-shadow(0 1px 2px rgba(46, 40, 31, .18));
}
.shop-foto-leer-0 { background: linear-gradient(140deg, #f0e2c9 0%, #e2cda6 100%); }
.shop-foto-leer-1 { background: linear-gradient(140deg, #f7d9c6 0%, #eeb18d 100%); }
.shop-foto-leer-2 { background: linear-gradient(140deg, #e3ecd9 0%, #c6d6ab 100%); }
.shop-foto-leer-3 { background: linear-gradient(140deg, #dce9ef 0%, #b6cfda 100%); }
.shop-product-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.shop-product-nummer { color: var(--djk-gray); font-size: 0.7rem; font-weight: 700; }
.shop-product-name { font-weight: 700; font-size: 0.95rem; color: var(--djk-ink); }
/* Beschreibung auf der Karte: höchstens zwei Zeilen, sonst schieben lange Sätze den Preis
aus dem Bild und die Kacheln stehen ungleich hoch. Vollständig steht sie im Bestell-Dialog. */
.shop-product-beschreibung {
font-size: 0.78rem;
line-height: 1.35;
color: var(--djk-ink-soft);
margin-top: 2px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.shop-product-allergene {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: .04em;
color: var(--djk-ink-soft);
opacity: .75;
margin-top: 3px;
}
.shop-product-price { margin-top: auto; color: var(--djk-terracotta-dark); font-weight: 800; }
/* Im Bestell-Dialog ist Platz — dort steht die Beschreibung ganz und die Allergene ausgeschrieben. */
.shop-picker-beschreibung {
margin: -6px 0 10px;
font-size: 0.9rem;
line-height: 1.45;
color: var(--djk-ink-soft);
}
.shop-picker-allergene {
margin: 0 0 14px;
padding: 9px 12px;
background: var(--djk-cream);
border: 1px solid var(--djk-border);
border-radius: 10px;
font-size: 0.78rem;
line-height: 1.45;
color: var(--djk-ink-soft);
}
/* Modal (Extra-picker + Warenkorb-Drawer) */
.shop-modal-overlay { position: fixed; inset: 0; background: rgba(46, 40, 31, 0.45); display: none; align-items: flex-end; justify-content: center; z-index: 200; }
.shop-modal-overlay.active { display: flex; }
.shop-modal-box { background: var(--djk-card); border: 1px solid var(--djk-border); border-radius: 20px 20px 0 0; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; padding: 22px; position: relative; }
@media (min-width: 640px) {
.shop-modal-overlay { align-items: center; }
.shop-modal-box { border-radius: 20px; margin: 20px; }
}
.shop-modal-close { position: absolute; top: 14px; right: 14px; background: none; border: none; color: var(--djk-gray); font-size: 1.6rem; cursor: pointer; line-height: 1; }
.shop-praefix-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.shop-praefix-tab { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--djk-border); background: var(--djk-cream-soft); font-size: 0.82rem; font-weight: 700; cursor: pointer; color: var(--djk-ink-soft); }
.shop-praefix-tab.active { border-color: var(--djk-terracotta); color: var(--djk-terracotta-dark); background: #fbe4d5; }
.shop-extra-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.shop-extra-item { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--djk-border); font-size: 0.9rem; }
.shop-extra-item input { width: 18px; height: 18px; accent-color: var(--djk-terracotta); }
.shop-extra-item .price { margin-left: auto; color: var(--djk-gray); font-size: 0.8rem; }
/* Ein Extra gehoert immer nur EINEM Praefix: "Ohne Zwiebeln" und "Mehr Zwiebeln" zugleich kann
die Kueche nicht tun. Unter den uebrigen Reitern steht es blass und laesst sich nicht
anklicken, mit der Notiz, wo es schon haengt. */
.shop-extra-item.shop-extra-belegt { opacity: .45; cursor: not-allowed; }
.shop-extra-belegt-label { margin-left: auto; color: var(--djk-gray); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
/* Zusammenfassung der über ALLE Präfix-Tabs gewählten Extras — ohne sie wäre nach einem
Tab-Wechsel nicht mehr sichtbar, was unter dem anderen Präfix schon angehakt ist. */
.shop-extra-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.shop-extra-summary-chip {
background: var(--djk-cream-soft);
border: 1px solid var(--djk-border);
border-radius: 999px;
padding: 4px 11px;
font-size: 0.8rem;
color: var(--djk-ink-soft);
}
.shop-qty-control { display: flex; align-items: center; gap: 12px; margin: 16px 0; }
.shop-qty-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--djk-border); background: var(--djk-cream-soft); color: var(--djk-ink); font-size: 1.1rem; cursor: pointer; }
.shop-qty-value { font-weight: 800; font-size: 1.1rem; min-width: 24px; text-align: center; }
/* Cart */
.shop-cart-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.shop-cart-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--djk-border); }
.shop-cart-item-name { font-weight: 700; }
.shop-cart-item-meta { color: var(--djk-gray); font-size: 0.8rem; margin-top: 2px; }
.shop-cart-item-price { margin-left: auto; font-weight: 700; white-space: nowrap; }
.shop-cart-item-remove { background: none; border: none; color: var(--djk-danger); cursor: pointer; font-size: 0.78rem; margin-top: 4px; }
.shop-cart-total-row { display: flex; justify-content: space-between; font-weight: 800; font-size: 1.15rem; padding: 12px 0; border-top: 2px solid var(--djk-border); }
.shop-empty-cart { text-align: center; color: var(--djk-gray); padding: 40px 20px; }
/* Forms (Checkout) */
.shop-field { margin-bottom: 14px; }
.shop-field label { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; color: var(--djk-ink); }
.shop-field input, .shop-field select, .shop-field textarea {
width: 100%; padding: 11px 13px; background: var(--djk-cream-soft); border: 1px solid var(--djk-border);
border-radius: var(--radius-sm); color: var(--djk-ink); font-size: 0.94rem;
}
.shop-field input:focus, .shop-field select:focus, .shop-field textarea:focus { outline: none; border-color: var(--djk-terracotta); background: #fff; }
.shop-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shop-toggle-group { display: flex; gap: 10px; margin-bottom: 18px; }
.shop-toggle-btn { flex: 1; padding: 14px; border-radius: var(--radius-sm); border: 2px solid var(--djk-border); background: var(--djk-card); text-align: center; cursor: pointer; font-weight: 700; color: var(--djk-ink-soft); }
.shop-toggle-btn.active { border-color: var(--djk-terracotta); background: #fbe4d5; color: var(--djk-terracotta-dark); }
.shop-toggle-btn .icon { display: block; margin: 0 auto 6px; }
.shop-kontakt-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--djk-cream-soft); border: 1px solid var(--djk-border); border-radius: var(--radius-sm); padding: 12px 14px; }
.shop-kontakt-summary-text { font-size: 0.92rem; line-height: 1.5; }
.shop-link-btn { background: none; border: none; padding: 0; color: var(--djk-terracotta); font-weight: 700; font-size: 0.86rem; cursor: pointer; flex-shrink: 0; }
.shop-link-btn:hover { text-decoration: underline; }
.shop-adressen-liste { display: flex; flex-direction: column; gap: 8px; }
.shop-adresse-card { padding: 12px 14px; border: 2px solid var(--djk-border); border-radius: var(--radius-sm); background: var(--djk-card); cursor: pointer; font-size: 0.92rem; color: var(--djk-ink-soft); }
.shop-adresse-card.active { border-color: var(--djk-terracotta); background: #fbe4d5; color: var(--djk-terracotta-dark); font-weight: 700; }
.shop-adresse-card-neu { text-align: center; font-weight: 700; color: var(--djk-terracotta); border-style: dashed; }
.shop-checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 0.86rem; color: var(--djk-ink-soft); cursor: pointer; }
.shop-checkbox-row input:not(.djk-haken):not(.djk-schalter) { width: auto; }
/*
* Das Datumsfeld stand als einziges MITTIG.
*
* Nicht unsere Regel, sondern die von Safari: ein ist dort ein eigenes
* Bedienelement und zentriert seinen Wert. Daneben stehen Vorname, Nachname und Telefon
* linksbuendig — und die Reihe wirkt zerrissen, obwohl im Quelltext alles gleich aussieht.
*
* `appearance: none` nimmt dem Feld das Sonderverhalten, danach greift die normale
* Ausrichtung. Die Hoehe wird ausdruecklich gesetzt: ohne das Sonderverhalten faellt das Feld
* auf iOS etwas niedriger aus als seine Nachbarn.
*/
.shop-field input[type="date"],
.shop-form input[type="date"] {
-webkit-appearance: none;
appearance: none;
text-align: left;
line-height: 1.25;
min-height: 44px;
}
/*
* Die Adress-Suche ist ein Feld wie die anderen und soll auch so stehen: der zusaetzliche
* Abstand darueber liess sie wie einen eigenen Abschnitt wirken, obwohl sie mitten im Formular
* steht.
*/
.shop-address-search-wrap { position: relative; }
.shop-address-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--djk-card); border: 1px solid var(--djk-border); border-radius: var(--radius-sm); margin-top: 4px; max-height: 220px; overflow-y: auto; display: none; z-index: 20; box-shadow: var(--shadow); }
.shop-address-results.active { display: block; }
.shop-address-results div { padding: 10px 14px; font-size: 0.86rem; cursor: pointer; border-bottom: 1px solid var(--djk-border); }
.shop-address-results div:hover { background: var(--djk-cream-soft); }
.shop-alert { border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px; font-size: 0.9rem; }
.shop-alert-error { background: #fdeceb; border: 1px solid var(--djk-danger); color: #a53131; }
.shop-alert-success { background: #eaf6ee; border: 1px solid var(--djk-success); color: #2c6b41; }
.shop-hint { color: var(--djk-gray); font-size: 0.82rem; }
.shop-footer { text-align: center; color: var(--djk-gray); font-size: 0.82rem; padding: 30px 16px; border-top: 1px solid var(--djk-border); margin-top: 20px; }
.icon { width: 22px; height: 22px; }
.icon-xl { width: 40px; height: 40px; color: var(--djk-terracotta); }
.shop-status-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; }
.shop-status-badge-warten { background: #fbe4d5; color: var(--djk-terracotta-dark); }
.shop-status-badge-bestaetigt { background: #e2eef2; color: var(--djk-aegean); }
.shop-status-badge-unterwegs { background: #fbe4d5; color: var(--djk-terracotta-dark); }
.shop-status-badge-fertig { background: #eaf6ee; color: var(--djk-success); }
.shop-status-badge-bezahlt { background: #eaf6ee; color: var(--djk-success); }
/* ==========================================================================
Mobil (Bestellseite wird überwiegend am Handy benutzt)
========================================================================== */
@media (max-width: 640px) {
/* Vorgabe des Wirts: auf dem Handy zaehlt jeder Millimeter Breite — die Kacheln duerfen
bis an den Rand. Den seitlichen Abstand haelt allein noch .shop-container (10px).
ACHTUNG: .shop-section darf in diesem Block nur EINMAL stehen. Es stand hier schon
einmal weiter unten mit 14px — die spaetere Zeile gewann, und diese hier war wirkungslos. */
.shop-section { padding: 20px 0; }
/* Kopfzeile: Markenname kürzen und den Warenkorb auf ein reines Icon
reduzieren — sonst drängeln sich Logo, Navigation und Button in eine Zeile. */
.shop-header-inner { padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px; gap: 10px; }
.shop-brand { font-size: 0.9rem; gap: 8px; min-width: 0; }
.shop-brand > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-brand-badge { width: 34px; height: 34px; font-size: 0.8rem; flex-shrink: 0; }
/* "Geöffnet"/"Geschlossen" ist die wichtigste Information der Kopfzeile und muss auch
auf dem Handy sichtbar bleiben. Der Platz wird nicht in der Breite knapp, sondern nur
in der Höhe: der Name bleibt einzeilig mit Auslassungspunkten, der Status steht
darunter. Deshalb hier block statt none — nur eben kompakter. */
.shop-brand small { display: block; margin-top: 3px; font-size: 0.68rem; line-height: 1.2; }
/* Hero: Bild zuerst, kompaktere Abstände, Buttons über die volle Breite */
.shop-hero { padding: 20px 14px 4px; }
.shop-hero-inner { gap: 22px; }
.shop-hero-visual { aspect-ratio: 16/11; border-radius: 18px; }
.shop-hero p { margin-bottom: 20px; font-size: 0.94rem; }
.shop-hero-actions { gap: 10px; margin-bottom: 22px; }
.shop-hero-actions .shop-btn { flex: 1 1 100%; }
.shop-hero-features { gap: 12px 18px; }
.shop-hero-feature { font-size: 0.8rem; }
.shop-hero-badge-float { bottom: 12px; left: 12px; padding: 8px 12px; font-size: 0.78rem; }
/* Zwei Produkte nebeneinander statt einer breiten Spalte — sonst muss man
für die Karte endlos scrollen. */
.shop-section-title { font-size: 1.25rem; margin-bottom: 14px; }
.shop-section-head { margin-bottom: 14px; }
.shop-section-sub { display: none; }
.shop-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.shop-product-body { padding: 10px 11px 12px; }
.shop-product-name { font-size: 0.87rem; line-height: 1.3; }
.shop-product-price { font-size: 0.95rem; }
.shop-popular-card { flex: 0 0 158px; }
.shop-kategorie-chip { width: 78px; padding: 10px 6px; font-size: 0.7rem; }
.shop-kategorie-chip-icon { width: 38px; height: 38px; }
/* Formulare/Warenkorb: Liefer-Umschalter und Adressfelder untereinander,
damit die Eingabefelder auf schmalen Displays nicht zusammenquetschen. */
.shop-field-grid { grid-template-columns: 1fr; gap: 0; }
.shop-toggle-group { gap: 8px; }
.shop-toggle-btn { padding: 11px 8px; font-size: 0.88rem; }
.shop-modal-box { padding: 18px 16px 22px; max-height: 92vh; }
.shop-cart-total-row { font-size: 1.05rem; }
/* iOS zoomt bei Fokus in Felder unter 16px hinein — das verschiebt das Layout. */
.shop-field input, .shop-field select, .shop-field textarea { font-size: 16px; }
}
/* ==========================================================================
Kabinett / Profil (Login, Registrierung, Konto, Reservierung, Rechnungen/
Käufe/Bierdeckel für Vereinsmitglieder)
========================================================================== */
.shop-dashboard-grid { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .shop-dashboard-grid { grid-template-columns: 1fr; } }
.shop-profile-card { background: var(--djk-card); border: 1px solid var(--djk-border); border-radius: var(--radius); padding: 24px 20px; text-align: center; box-shadow: var(--shadow-sm); }
.shop-photo-circle-wrap { position: relative; width: 96px; height: 96px; margin: 0 auto 14px; }
.shop-photo-circle { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--djk-cream-soft); border: 2px solid var(--djk-border); cursor: pointer; }
.shop-photo-circle img { width: 100%; height: 100%; object-fit: cover; }
.shop-photo-circle-initials { font-size: 1.6rem; font-weight: 800; color: var(--djk-aegean); }
.shop-photo-badge { position: absolute; right: -2px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--djk-terracotta); color: #fff; display: flex; align-items: center; justify-content: center; border: 2px solid var(--djk-card); }
.shop-photo-badge .icon { width: 15px; height: 15px; }
.shop-code-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--djk-cream-soft); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 0.85rem; margin: 8px 0 2px; }
.shop-code-display { font-size: 1.6rem; font-weight: 800; letter-spacing: 3px; color: var(--djk-aegean); }
.shop-info-list {
list-style: none;
margin: 16px 0 0;
padding: 14px 0 0;
border-top: 1px solid var(--djk-border);
text-align: right;
}
.shop-info-list li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 0.85rem; }
.shop-info-list li span:first-child { color: var(--djk-gray); }
.shop-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--djk-border); padding-bottom: 10px; }
.shop-tab-btn { border: none; background: transparent; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; color: var(--djk-ink-soft); cursor: pointer; }
.shop-tab-btn:hover { background: var(--djk-cream-soft); }
.shop-tab-btn.active { background: var(--djk-terracotta); color: #fff; }
.shop-tab-panel { display: none; }
.shop-tab-panel.active { display: block; }
.shop-note-item { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--djk-border); font-size: 0.88rem; }
.shop-note-item:last-child { border-bottom: none; }
.shop-note-item time { color: var(--djk-gray); font-size: 0.78rem; white-space: nowrap; }
.shop-empty-state { color: var(--djk-gray); font-size: 0.88rem; padding: 10px 0; }
.shop-category-select { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; }
.shop-category-option input { position: absolute; opacity: 0; }
.shop-category-option label { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border: 2px solid var(--djk-border); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; font-weight: 700; text-align: center; }
.shop-category-option input:checked + label { border-color: var(--djk-terracotta); background: #fdf1ea; color: var(--djk-terracotta-dark); }
.shop-tag-muted { display: inline-block; background: var(--djk-cream-soft); color: var(--djk-gray); border-radius: 999px; padding: 5px 12px; font-size: 0.78rem; font-weight: 700; }
@media (max-width: 640px) {
.shop-dashboard-grid { gap: 14px; }
.shop-profile-card { padding: 18px 14px; }
.shop-tabs { gap: 4px; }
.shop-tab-btn { padding: 7px 11px; font-size: 0.8rem; }
}
/* Passwort ein-/ausblenden: der Knopf sitzt im Feld, deshalb bekommt das Feld rechts Platz. */
.shop-pw-wrap { position: relative; display: block; }
.shop-pw-wrap input { width: 100%; padding-right: 46px; }
.shop-pw-toggle {
position: absolute;
top: 50%;
right: 6px;
transform: translateY(-50%);
width: 34px;
height: 34px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.shop-pw-toggle:hover { background: rgba(15, 23, 42, 0.06); }
/* Auge als CSS-Maske, damit kein zusaetzliches Icon-Asset noetig ist. */
.shop-pw-toggle::before {
content: '';
width: 20px;
height: 20px;
background: var(--djk-ink-soft, #64748b);
-webkit-mask: var(--pw-eye) center / contain no-repeat;
mask: var(--pw-eye) center / contain no-repeat;
}
.shop-pw-toggle {
--pw-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.shop-pw-toggle.sichtbar {
--pw-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7c1.7 0 3.2.5 4.5 1.2M22 12s-3.6 7-10 7c-1.7 0-3.2-.5-4.5-1.2'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E");
}
/* Einladung, die Website als App zu installieren */
.shop-pwa-banner {
position: fixed;
left: 12px;
right: 12px;
/* Über der unteren Tab-Leiste, nicht darauf — sonst verdeckt die Einladung genau die
Navigation, mit der man sie loswerden würde. 60px ist die Höhe der Leiste, wie sie
auch das body-padding weiter oben ansetzt. */
bottom: calc(72px + env(safe-area-inset-bottom, 0px));
z-index: 60;
display: none;
align-items: center;
gap: 12px;
background: #fff;
border: 1px solid var(--djk-border, #e2e8f0);
border-radius: 14px;
padding: 12px 14px;
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.18);
}
.shop-pwa-banner.aktiv { display: flex; }
.shop-pwa-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.shop-pwa-text { flex: 1 1 auto; min-width: 0; }
.shop-pwa-titel { font-weight: 800; font-size: 0.92rem; line-height: 1.2; }
.shop-pwa-sub { font-size: 0.76rem; color: var(--djk-ink-soft, #64748b); }
.shop-pwa-actions { display: flex; gap: 6px; flex-shrink: 0; }
.shop-pwa-actions .shop-btn { padding: 8px 14px; font-size: 0.8rem; }
.shop-pwa-spaeter { background: none; border: 0; color: var(--djk-ink-soft, #64748b); font-size: 0.78rem; cursor: pointer; padding: 8px 6px; }
/* Ab hier ist die Tab-Leiste ausgeblendet (siehe .shop-bottom-nav), der Platz unten ist frei. */
@media (min-width: 781px) {
.shop-pwa-banner { left: auto; right: 20px; bottom: 20px; max-width: 400px; }
}
/* Hinweis, wenn Pflichtangaben im Profil fehlen (Checkout / Reservierung) */
.shop-hinweis-warn {
background: #fff7ed;
border: 1px solid #fdba74;
border-radius: 12px;
padding: 14px 16px;
margin-top: 8px;
}
.shop-hinweis-warn strong { display: block; margin-bottom: 4px; font-size: 0.94rem; color: #9a3412; }
.shop-hinweis-warn p { margin: 0 0 12px; font-size: 0.84rem; color: #7c2d12; line-height: 1.5; }
/* --- QR-Code der Reservierung -------------------------------------------------------- */
/* Die Zeile in "Meine Reservierungsanfragen" wird anklickbar, sobald ein Code existiert. */
.shop-note-item-qr { cursor: pointer; border-radius: var(--radius-sm); padding: 12px 10px; margin: 0 -10px; transition: background .15s ease; }
.shop-note-item-qr:hover,
.shop-note-item-qr:focus-visible { background: var(--djk-cream-soft); outline: none; }
.shop-qr-hinweis { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--djk-terracotta); font-size: 0.78rem; font-weight: 700; }
.shop-qr-hinweis svg { width: 14px; height: 14px; }
/* Vollbild-Ansicht: heller Hintergrund, damit das Handy den Code hell genug darstellt und
der Scanner in der Kasse ihn zuverlässig erkennt. */
.shop-qr-overlay {
position: fixed; inset: 0; z-index: 1200; display: none;
align-items: center; justify-content: center; padding: 24px;
background: rgba(20, 16, 10, .82); backdrop-filter: blur(3px);
}
.shop-qr-overlay.active { display: flex; }
.shop-qr-box {
background: #ffffff; border-radius: var(--radius-lg, 18px); padding: 26px 22px 20px;
text-align: center; max-width: 420px; width: 100%;
box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.shop-qr-label { font-size: 0.72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--djk-gray); margin-bottom: 14px; }
.shop-qr-bild { display: block; width: 100%; max-width: 320px; aspect-ratio: 1; margin: 0 auto; border: 1px solid var(--djk-border); border-radius: var(--radius-sm); background: #fff; }
.shop-qr-titel { margin-top: 16px; font-size: 1.05rem; font-weight: 800; color: var(--djk-ink, #2e281f); }
.shop-qr-nummer { margin-top: 3px; color: var(--djk-gray); font-size: 0.85rem; font-weight: 700; }
.shop-qr-schliessen { margin-top: 16px; color: var(--djk-gray); font-size: 0.76rem; }
/* QR-Code einer Online-Bestellung in der Bestellverfolgung (Abholung). */
.order-track-qr {
display: flex; align-items: center; justify-content: center; gap: 7px;
margin-top: 10px; padding: 10px 12px; cursor: pointer;
border: 1px dashed var(--djk-terracotta); border-radius: var(--radius-sm);
background: #fdf1ea; transition: background .15s ease;
}
.order-track-qr:hover,
.order-track-qr:focus-visible { background: #fbe6da; outline: none; }
.order-track-qr-text { color: var(--djk-terracotta-dark); font-size: 0.82rem; font-weight: 700; }
/* ---------- Beleg: dasselbe Bon-Aussehen wie in Kasse und Verwaltung ----------
Schmale Spalte, Schreibmaschinenschrift (Beträge stehen dadurch exakt untereinander),
Sternchen-Linien und mittige Kopfzeile. */
.kassenbeleg-box {
background: #ffffff;
color: #1c1c1c;
border: 1px solid #d9d9d9;
border-radius: 6px;
max-width: 360px;
margin: 20px auto;
padding: 18px 16px;
text-align: left;
font-family: 'Courier New', Courier, monospace;
font-size: 0.82rem;
line-height: 1.55;
}
.kassenbeleg-box .beleg-titel {
text-align: center;
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 4px;
}
.beleg-sterne {
overflow: hidden;
white-space: nowrap;
text-align: center;
color: #6b6b6b;
margin: 8px 0;
user-select: none;
}
.beleg-sterne::after {
content: "************************************************************";
letter-spacing: 1px;
}
.beleg-zeile { display: flex; justify-content: space-between; gap: 12px; }
.beleg-zeile > span:last-child { white-space: nowrap; }
.beleg-summe { font-weight: 700; }
.beleg-dank { text-align: center; color: #6b6b6b; margin-top: 6px; }
/* ---------- Meine Bestellungen: Tabelle + Beleg-Fenster ----------
Die Tabelle kommt fertig aus der Kasse (includes/kabinett_render.php), damit der Bon hier
genauso aussieht wie in Kasse und Verwaltung. */
.best-tabelle-wrap {
background: #fff;
border: 1px solid var(--djk-border);
border-radius: var(--radius-sm, 8px);
overflow: hidden;
}
.best-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.best-tabelle th {
text-align: left;
font-size: 0.7rem;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--djk-gray);
font-weight: 800;
padding: 10px 12px;
background: var(--djk-cream-soft, #faf6ef);
border-bottom: 1px solid var(--djk-border);
white-space: nowrap;
}
.best-tabelle td { padding: 11px 12px; border-bottom: 1px solid var(--djk-border); vertical-align: middle; }
.best-tabelle tr:last-child td { border-bottom: 0; }
.best-zeile { cursor: pointer; }
.best-zeile:hover,
.best-zeile:focus-visible { background: var(--djk-cream-soft, #faf6ef); outline: none; }
.best-zelle-datum strong { display: block; font-size: 0.92rem; }
.best-zeit { display: block; color: var(--djk-gray); font-size: 0.76rem; }
.best-art-klein { display: none; color: var(--djk-gray); font-size: 0.76rem; }
.best-zelle-summe { font-weight: 800; white-space: nowrap; }
.best-status {
display: inline-block;
padding: 4px 9px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 800;
line-height: 1.3;
background: #eceae5;
color: #4a4438;
}
.order-status-bestaetigt { background: #e2edfb; color: #1d4f91; }
.order-status-fertig { background: #e0f2e3; color: #1f6b32; }
.order-status-unterwegs { background: #fbe6da; color: var(--djk-terracotta-dark, #a04a22); }
.order-status-storniert { background: #f9e0e0; color: #9b2222; }
.best-tabelle-hinweis { margin: 10px 2px 0; color: var(--djk-gray); font-size: 0.8rem; }
/* ---------- Mitgliedskonto im Reiter "Rechnungen" ----------
Steht über den Kassenbelegen: was auf das Mitglied läuft ("In Rechnung"/"Schließen" an der
Kasse), was davon schon beglichen ist und womit. Offen und bezahlt müssen sich auf einen
Blick unterscheiden — deshalb Farbe statt nur Text. */
.kabinett-block-titel {
margin: 22px 2px 8px;
font-size: 0.78rem;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--djk-gray);
font-weight: 700;
}
.kabinett-block-titel:first-child { margin-top: 0; }
.mk-summe-offen { margin: 0 2px 10px; font-size: 0.95rem; }
.mk-summe-offen strong { color: var(--djk-terracotta-dark, #a04a22); }
.mk-offen { color: var(--djk-terracotta-dark, #a04a22); font-weight: 700; white-space: nowrap; }
.mk-bezahlt { color: #1f6b32; font-weight: 700; }
/* Die Belege liegen versteckt neben der Tabelle und werden beim Antippen kopiert. */
.beleg-vorlage { display: none; }
.beleg-zusatz { padding-left: 14px; color: #6b6b6b; }
.beleg-adresse { color: #6b6b6b; }
.beleg-status-zeile { text-align: center; font-weight: 700; }
.beleg-qr { text-align: center; margin: 10px 0 4px; }
.beleg-qr-bild {
display: block;
width: 190px;
max-width: 100%;
aspect-ratio: 1;
margin: 0 auto 6px;
background: #fff;
}
.beleg-qr-text { color: #6b6b6b; font-size: 0.74rem; line-height: 1.4; }
.shop-beleg-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 1200;
background: rgba(30, 26, 20, .72);
padding: 20px;
overflow-y: auto;
}
.shop-beleg-overlay.active { display: block; }
.shop-beleg-fenster { position: relative; max-width: 400px; margin: 0 auto; }
.shop-beleg-fenster .kassenbeleg-box { margin: 0 auto; }
.shop-beleg-zu {
position: absolute;
top: -14px;
right: -6px;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: #fff;
color: #1c1c1c;
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
z-index: 1;
}
@media (max-width: 480px) {
.best-spalte-art { display: none; }
.best-art-klein { display: block; }
.best-tabelle { font-size: 0.84rem; }
.best-tabelle th,
.best-tabelle td { padding: 9px 8px; }
}
/* Abgelaufener Code: sichtbar, aber erkennbar nicht mehr zum Scannen gedacht. */
.beleg-qr-alt .beleg-qr-bild { opacity: .4; }
/* ---------- Kabinett auf dem Handy: Profil als eigener Punkt ----------
Am Desktop steht die Profilkarte dauerhaft links neben den Reitern. Auf dem Handy stünde sie
in voller Länge über allem — man müsste an ihr vorbeiscrollen, um an die Bestellungen zu
kommen. Dort wird sie deshalb zu einem eigenen Reiter. */
.shop-tab-btn-profil { display: none; }
@media (max-width: 860px) {
.shop-tab-btn-profil { display: inline-block; }
.shop-dashboard-grid.profil-versteckt .shop-profile-card { display: none; }
/* Die Reiterleiste steht im Markup nach der Karte — auf dem Handy gehört sie nach oben,
sonst läge die Leiste beim Profil-Reiter unter der Karte. */
.shop-profile-card { order: 2; }
.shop-tabs {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tab-btn { flex: 0 0 auto; white-space: nowrap; }
}
/* ---------- Kein seitlicher Überlauf im Kabinett ----------
"1fr" ist minmax(auto, 1fr): die Spalte wächst auf die Mindestbreite ihres Inhalts. Die
Bestelltabelle bringt nicht umbrechende Zellen mit, dadurch wurde die Spalte — und mit ihr
die Profilkarte — breiter als das Display. Gedeckelt scrollt stattdessen die Tabelle. */
.shop-dashboard-grid { grid-template-columns: 280px minmax(0, 1fr); }
@media (max-width: 860px) {
.shop-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
}
.best-tabelle-wrap { overflow-x: auto; }
/* Fünf Punkte in der Fußleiste (Start · Warenkorb · Kabinett · Profil · Abmelden): auf schmalen
Geräten wird es sonst zu eng und die Leiste schöbe die Seite seitlich auf. */
.shop-bottom-nav a { min-width: 0; }
@media (max-width: 400px) {
.shop-bottom-nav a { font-size: 0.6rem; padding: 6px 2px; }
.shop-bottom-nav a .icon { width: 20px; height: 20px; }
}
/* Gesperrtes Gericht: steht weiter in der Karte, ist aber grau und nicht anklickbar
(Kasse → Produkte → Schalter "Bestellbar"). */
.shop-product-sperrhinweis { display: none; }
.shop-product-gesperrt { filter: grayscale(1); cursor: not-allowed; }
.shop-product-gesperrt .shop-product-photo,
.shop-product-gesperrt .shop-product-name,
.shop-product-gesperrt .shop-product-price { opacity: .55; }
.shop-product-gesperrt .shop-product-sperrhinweis {
display: block;
margin-top: 4px;
font-size: 0.72rem;
font-weight: 800;
color: var(--djk-danger);
}
/* ---------- Einheitliche Ecken: 5px ----------
Knöpfe, Eingabefelder, Auswahllisten, Textfelder und Reiter der ganzen Bestell-Website.
Runde Elemente mit eigener Aufgabe (Profilfoto, Zähler-Knöpfe, Zahl-Plaketten) bleiben rund —
sie sind als Kreis gemeint und nicht als Knopf mit Ecken. */
.shop-btn,
.home-btn,
.shop-tab-btn,
.shop-tab-btn-profil,
.shop-kat-chip,
.shop-pwa-spaeter,
.shop-field input,
.shop-field select,
.shop-field textarea,
.shop-form input,
.shop-form select,
.shop-form textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea,
.shop-select,
.shop-input,
.shop-picker-tab,
.shop-extra-zeile,
.shop-mode-tab,
.shop-code-badge,
.shop-tag-muted,
.best-status,
.shop-status-badge {
border-radius: 5px;
}
/* Aktion: alter Preis durchgestrichen, neuer Preis hervorgehoben, Eckaufkleber. */
.shop-preis-alt { text-decoration: line-through; color: var(--djk-gray); font-weight: 600; margin-right: 4px; }
.shop-product-card[data-aktion]:not([data-aktion='']) .shop-preis-neu { color: var(--djk-danger); font-weight: 900; }
.shop-product-card[data-aktion]:not([data-aktion='']) { position: relative; }
.shop-product-card[data-aktion]:not([data-aktion=''])::before {
content: attr(data-aktion);
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
background: var(--djk-danger);
color: #fff;
font-size: 0.7rem;
font-weight: 800;
padding: 3px 8px;
border-radius: 5px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
pointer-events: none;
}
.shop-product-gesperrt[data-aktion]:not([data-aktion=''])::before { opacity: .5; }
/* ---------- Meine Aktionen ---------- */
.aktion-karte {
background: #fff;
border: 1px solid var(--djk-border);
border-left: 4px solid var(--djk-terracotta);
border-radius: 5px;
padding: 14px 16px;
margin-bottom: 12px;
cursor: pointer;
}
.aktion-karte:not([data-qr-url]) { cursor: default; }
.aktion-karte-aus { opacity: .55; border-left-color: var(--djk-gray); }
/* ---------- Kassenbeleg im Kabinett ---------- */
/* Gleiches Bild wie an der Kasse: Schreibmaschinenschrift, Logo und Anschrift im Kopf,
Positionstabelle, darunter Summen und Zahlungsarten. Der Gast soll denselben Beleg vor sich
haben wie das Personal — sonst wirkt es wie zwei verschiedene Dokumente. */
.gastbeleg {
font-family: 'Courier New', Courier, monospace;
font-size: 0.88rem;
color: var(--djk-black, #1a1a1a);
background: #fff;
padding: 4px 2px;
}
.gastbeleg-logo {
display: block;
margin: 0 auto 10px;
max-height: 120px;
max-width: 70%;
object-fit: contain;
}
.gastbeleg-betrieb {
text-align: center;
font-weight: 700;
font-size: 0.98rem;
}
.gastbeleg-klein {
text-align: center;
font-size: 0.8rem;
opacity: .75;
}
.gastbeleg-titel {
text-align: center;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
margin: 14px 0 12px;
}
.gastbeleg-kopfzeile {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 0.85rem;
margin-bottom: 2px;
}
.gastbeleg-tabelle {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
margin: 14px 0 10px;
}
.gastbeleg-tabelle th {
text-align: left;
padding: 3px 4px;
border-bottom: 1px solid var(--djk-border, #e2e8f0);
font-weight: 700;
}
.gastbeleg-tabelle td {
padding: 4px;
vertical-align: top;
}
.gastbeleg-tabelle .gb-pos { width: 28px; }
/* Speisenummer aus der Karte — schmale eigene Spalte, damit der Artikelname daneben ruhig
umbrechen darf. Bei Belegen von vor der Umstellung bleibt sie leer. */
.gastbeleg-tabelle .gb-nr { width: 42px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gastbeleg-tabelle .gb-menge { width: 52px; text-align: right; }
.gastbeleg-tabelle .gb-preis { width: 76px; text-align: right; white-space: nowrap; }
.gb-extra { font-size: 0.74rem; opacity: .7; }
.gastbeleg-summen,
.gastbeleg-zahlung {
border-top: 1px solid var(--djk-border, #e2e8f0);
padding-top: 8px;
margin-bottom: 10px;
font-size: 0.85rem;
}
.gb-zeile {
display: flex;
justify-content: space-between;
gap: 10px;
}
.gb-gesamt { font-weight: 700; }
.gb-blass { opacity: .8; }
.gb-ueberschrift { font-weight: 700; margin-bottom: 2px; }
.gastbeleg-fuss {
text-align: center;
font-size: 0.8rem;
margin-top: 12px;
}
/* ---------- Rechnungen im Kabinett ---------- */
/* Gleicher Bon-Charakter wie der Bestellungsbeleg: Schreibmaschinenschrift, Sternchenlinie
als Trenner, Betraege rechtsbuendig und untereinander lesbar. Vorher stand hier eine
Aufzaehlung mit Kassen-Klassen, die es im Stylesheet der Website gar nicht gibt — Datum und
Betrag klebten aneinander. */
.rechnungen-table {
width: 100%;
border-collapse: collapse;
font-family: 'Courier New', Courier, monospace;
font-size: 0.9rem;
background: #fff;
border: 1px solid var(--djk-border);
border-radius: 5px;
overflow: hidden;
}
.rechnungen-table thead th {
text-align: left;
padding: 10px 12px;
background: var(--djk-cream, #faf6ef);
border-bottom: 2px dashed var(--djk-border);
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
font-size: 0.72rem;
}
.rechnungen-table tbody td {
padding: 11px 12px;
border-bottom: 1px dashed var(--djk-border);
vertical-align: top;
}
.rechnungen-table tbody tr:last-child td { border-bottom: none; }
.rechnungen-table tbody tr:hover td { background: var(--djk-cream, #faf6ef); }
/* Betraege: gleiche Ziffernbreite, damit die Spalte wie auf einem Bon untereinander steht. */
.rechnungen-table td:nth-child(3),
.rechnungen-table th:nth-child(3) {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
font-weight: 700;
}
.rechnungen-table td:nth-child(4) { white-space: nowrap; }
@media (max-width: 560px) {
/* Schmales Display: aus jeder Zeile wird ein kleiner Bon, damit nichts seitlich wegläuft. */
.rechnungen-table thead { display: none; }
.rechnungen-table, .rechnungen-table tbody, .rechnungen-table tr, .rechnungen-table td { display: block; width: 100%; }
.rechnungen-table tr {
border-bottom: 2px dashed var(--djk-border);
padding: 6px 0;
}
.rechnungen-table tr:last-child { border-bottom: none; }
.rechnungen-table td { border: none; padding: 3px 12px; }
.rechnungen-table td:nth-child(3) { text-align: left; font-size: 1.05rem; }
}
/* Nicht mehr gueltig: Name und Wert durchgestrichen, damit auf einen Blick klar ist, dass
hier nichts mehr zu holen ist. Der Grund steht in der Fusszeile — die bleibt lesbar. */
.aktion-karte-aus .aktion-name,
.aktion-karte-aus .aktion-wert,
.aktion-karte-aus .aktion-code { text-decoration: line-through; }
.aktion-karte-aus .aktion-benutzt { text-decoration: none; font-weight: 700; }
.aktion-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.aktion-wert { font-size: 1.25rem; font-weight: 900; color: var(--djk-terracotta); white-space: nowrap; }
.aktion-name { font-weight: 700; }
.aktion-ziel { color: var(--djk-ink-soft); font-size: 0.88rem; margin-top: 2px; }
.aktion-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.aktion-code {
background: var(--djk-cream-soft);
border-radius: 5px;
padding: 3px 9px;
font-weight: 800;
letter-spacing: .06em;
}
.aktion-bis, .aktion-einmal { color: var(--djk-gray); font-size: 0.8rem; }
.aktion-einmal { border: 1px solid var(--djk-border); border-radius: 999px; padding: 1px 8px; }
.aktion-fuss { margin-top: 10px; font-size: 0.82rem; font-weight: 700; }
.aktion-qr-hinweis { color: var(--djk-terracotta-dark); }
.aktion-auto { color: var(--djk-success); }
.aktion-benutzt { color: var(--djk-gray); }
/* Aktionen im Warenkorb */
.shop-rabatt-box {
background: var(--djk-cream-soft);
border: 1px solid var(--djk-border);
border-radius: 5px;
padding: 12px 14px;
margin: 14px 0;
}
.shop-rabatt-titel { font-weight: 800; font-size: 0.85rem; margin-bottom: 8px; }
.shop-rabatt-zeile {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 0;
cursor: pointer;
border-top: 1px solid var(--djk-border);
}
.shop-rabatt-zeile:first-of-type { border-top: 0; }
.shop-rabatt-name { flex: 1; font-size: 0.9rem; }
.shop-rabatt-name code { background: #fff; border-radius: 5px; padding: 1px 7px; font-weight: 800; margin-left: 4px; }
.shop-rabatt-name small { color: var(--djk-gray); margin-left: 6px; }
.shop-rabatt-ersparnis { font-weight: 800; color: var(--djk-danger); white-space: nowrap; }
.shop-rabatt-gespart { text-align: right; color: var(--djk-danger); font-weight: 800; font-size: 0.9rem; margin: -6px 0 12px; }
.shop-cart-item-rabatt { color: var(--djk-danger); font-size: 0.78rem; font-weight: 700; margin-top: 3px; }
.shop-cart-item-price .shop-preis-alt { display: block; font-size: 0.8rem; }
.shop-rabatt-hinweis { color: var(--djk-gray); font-size: 0.78rem; margin-bottom: 6px; }
/* Zwei Haken unter den Zahlungsarten: Einwilligung in Neuigkeiten und der Wunsch, gleich ein
Konto anzulegen. Bewusst ruhig gehalten — es sind Angebote, keine Huerden. */
.shop-check-zeile {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
font-size: 0.82rem;
line-height: 1.4;
color: var(--djk-ink-soft);
cursor: pointer;
}
/* Nur noch fuer Kaestchen OHNE das gemeinsame Aussehen aus schalter.css — sonst gewaenne
diese Regel (hoehere Spezifitaet) gegen .djk-haken und der neue Haken bliebe 18 px klein. */
.shop-check-zeile input:not(.djk-haken):not(.djk-schalter) {
width: 18px;
height: 18px;
margin-top: 1px;
flex-shrink: 0;
accent-color: var(--djk-terracotta);
}
/* Bestellknopf als Schieber: von links nach rechts ziehen statt tippen. Ein Knopf laesst sich
im Vorbeigehen ausloesen, ein Schieber nicht — und die letzte Bewegung einer Bestellung darf
ruhig eine bewusste sein. Ohne Zeigergeraet (Tastatur, Vorlesehilfe) bleibt der Knopf darin
ein normaler Knopf: er traegt type="submit" und laesst sich mit Enter ausloesen. */
.shop-slide-btn {
position: relative;
/* Vorgabe des Wirts: Luft nach oben, und unten so viel, dass die App-Leiste am unteren
Rand des Handys den Schieber nicht beruehrt. */
margin-top: 20px;
margin-bottom: 100px;
width: 100%;
height: 62px;
border-radius: 999px;
/* Der Knopf ist von Anfang an farbig — er ist die Hauptsache auf dieser Seite und soll
nicht erst beim Ziehen danach aussehen. Gezogen wird trotzdem: die Fuellung darueber
zeigt, wie weit man ist. */
background: linear-gradient(90deg, var(--djk-terracotta) 0%, var(--djk-terracotta-dark) 100%);
border: none;
box-shadow: var(--shadow-sm);
overflow: hidden;
user-select: none;
touch-action: pan-y;
}
.shop-slide-fuellung {
position: absolute;
inset: 0;
width: 0;
/* Dunkler als der Grund — so ist der Fortschritt zu sehen, ohne dass die Farbe wechselt. */
background: linear-gradient(90deg, var(--djk-terracotta-dark) 0%, #a8481f 100%);
transition: width .18s ease;
/*
* Rundes Ende, weil der Griff rund ist.
*
* Die Fuellung waechst hinter dem Griff her; ihre vordere Kante lief senkrecht und stiess
* damit als gerade Linie an eine runde Scheibe — genau die Kante hat der Wirt angestrichen.
* Links wird ohnehin von der Huelle beschnitten (overflow: hidden), rechts folgt sie jetzt
* der Form des Griffs.
*/
border-radius: 999px;
}
.shop-slide-text {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 0 66px;
color: #fff;
text-align: center;
pointer-events: none;
}
/* Die obere Zeile traegt die Summe — die letzte Zahl vor dem Absenden. */
.shop-slide-kopf {
font-weight: 700;
font-size: 1rem;
line-height: 1.2;
/* Ein sehr langer Name plus Preis darf die Pille nicht sprengen. */
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shop-slide-kopf strong { font-weight: 800; }
.shop-slide-hinweis {
font-size: 0.76rem;
line-height: 1.2;
opacity: .85;
font-weight: 500;
}
.shop-slide-griff {
position: absolute;
top: 6px;
left: 6px;
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--djk-card);
border: none;
box-shadow: var(--shadow-sm);
display: flex;
align-items: center;
justify-content: center;
color: var(--djk-terracotta);
cursor: grab;
transition: left .18s ease;
padding: 0;
}
.shop-slide-griff:active { cursor: grabbing; }
.shop-slide-griff .icon { width: 24px; height: 24px; }
/* Waehrend des Ziehens darf nichts nachfedern, sonst haengt der Griff hinter dem Finger. */
.shop-slide-btn.zieht .shop-slide-fuellung,
.shop-slide-btn.zieht .shop-slide-griff { transition: none; }
/* Der Griff sitzt in der Pille — der Schatten geht nach aussen, damit er wie ein Knopf
darin liegt (siehe die Vorlage des Wirts). */
.shop-slide-griff { box-shadow: 0 2px 6px rgba(46, 40, 31, .35); }
.shop-slide-btn[aria-disabled="true"] { opacity: .55; }
.shop-slide-btn[aria-disabled="true"] .shop-slide-griff { cursor: not-allowed; }
/* ---------- Ein Zeichen in jedem Feld ----------
*
* Jedes Eingabefeld der Website traegt links sein Zeichen: Brief bei der E-Mail, Schloss beim
* Passwort, Uhr bei der Zeit. Der Grund ist nicht Schmuck - auf dem Telefon rutscht die
* Beschriftung beim Tippen oft aus dem Bild (die Tastatur nimmt die halbe Hoehe), und dann steht
* dort ein leeres Kaestchen ohne jeden Hinweis, was hinein soll. Das Zeichen bleibt.
*
* Es ist ausdruecklich KEIN Knopf: `pointer-events: none`, damit ein Tippen darauf ins Feld
* geht und nicht ins Leere.
*
* Die Huelle liegt INNEN, wenn es schon eine gibt (Passwort mit Auge): dessen Knopf sitzt
* rechts, das Zeichen links, beide stoeren sich nicht.
*/
.shop-input-icon { position: relative; display: block; }
.shop-input-icon > .icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--djk-ink-soft, #8a7a63);
opacity: .75;
pointer-events: none;
}
.shop-input-icon > input,
.shop-input-icon > select,
.shop-input-icon > textarea { padding-left: 38px; }
/* Mehrzeiliges Feld: das Zeichen gehoert zur ersten Zeile, nicht in die Mitte des Textblocks. */
.shop-input-icon-oben > .icon { top: 15px; transform: none; }
/* ---------- Mitgliedsausweis in der Kopfzeile ----------
* Der Knopf sieht aus wie die anderen Zeichen der Kopfzeile - er ist nur kein Link, sondern
* oeffnet den Code. Deshalb muessen Rahmen und Grund ausdruecklich zurueckgesetzt werden:
* ein