/* =====================================================================
GastroLive – Beige/Braun Theme (modern, animiert, ohne Bild-Icons)
===================================================================== */
:root {
--beige-50: #FBF6EF;
--beige-100: #F5ECDD;
--beige-200: #ECDFC8;
--beige-300: #E0CDB0;
--braun-300: #C7A17A;
--braun-400: #A9744F;
--braun-500: #8A5A3B;
--braun-600: #6F4E37; /* Kaffee */
--braun-700: #543A29;
--braun-800: #3B2C23; /* Text */
--gold: #C08552;
--gruen: #4E7B52;
--rot: #B4442F;
--gelb: #C9902B;
--linie: #E4D6BF;
--schatten: 0 12px 30px rgba(84, 58, 41, .16);
--schatten-sm: 0 4px 14px rgba(84, 58, 41, .12);
--grad-braun: linear-gradient(135deg, #8A5A3B 0%, #543A29 100%);
--grad-gold: linear-gradient(135deg, #C08552 0%, #A9744F 100%);
--radius: 14px;
}
* { box-sizing: border-box; }
/* Scrollleisten ausblenden (Scrollen bleibt möglich) */
html { scrollbar-width: none; -ms-overflow-style: none; }
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
margin: 0;
font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
color: var(--braun-800);
background:
radial-gradient(1200px 600px at 100% -10%, rgba(192,133,82,.18), transparent 60%),
radial-gradient(900px 500px at -10% 110%, rgba(111,78,55,.14), transparent 55%),
var(--beige-100);
min-height: 100vh;
-webkit-tap-highlight-color: transparent;
}
a { color: var(--braun-600); text-decoration: none; }
h1, h2, h3, h4 { letter-spacing: -.02em; margin: 0 0 .4rem; }
/* ---------- Kopfzeile ---------- */
.kopf {
position: sticky; top: 0; z-index: 50;
background: rgba(251,246,239,.78);
-webkit-backdrop-filter: blur(18px) saturate(1.6);
backdrop-filter: blur(18px) saturate(1.6);
color: var(--braun-800);
border-bottom: 1px solid rgba(228,214,191,.7);
}
.kopf-innen {
max-width: 1180px; margin: 0 auto; padding: .7rem 1rem;
display: flex; align-items: center; gap: 1rem;
}
.marke { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; color: var(--braun-800); }
.marke-logo { height: 34px; width: auto; display: block; }
.marke .logo {
width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
background: var(--grad-gold); color: #fff;
display: grid; place-items: center; font-weight: 900; font-size: 1.1rem;
box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); overflow: hidden;
}
.marke .logo img { width: 100%; height: 100%; display: block; }
.marke small { display: block; font-weight: 500; font-size: .68rem; opacity: .7; letter-spacing: .02em; color: var(--braun-500); }
.kopf-nav { display: flex; gap: .25rem; margin-left: auto; flex-wrap: wrap; }
.kopf-nav a {
color: var(--braun-600); padding: .5rem .85rem; border-radius: 10px;
font-weight: 600; font-size: .92rem; position: relative;
transition: background .18s, color .18s;
}
.kopf-nav a:hover { background: rgba(169,142,107,.14); color: var(--braun-800); }
.kopf-nav a.aktiv { background: rgba(169,142,107,.2); color: var(--braun-800); }
.kopf-nav a .zaehler {
position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
padding: 0 5px; border-radius: 999px; background: var(--rot); color: #fff;
font-size: .68rem; font-weight: 800; display: grid; place-items: center;
animation: puls 1.6s infinite;
}
.kopf-user { display: flex; align-items: center; gap: .5rem; margin-left: .2rem; }
/* ---------- Konto-Menü (iOS Popover) ---------- */
.konto { position: relative; }
.avatar {
width: 36px; height: 36px; border-radius: 50%; background: var(--grad-gold);
color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .8rem;
box-shadow: inset 0 0 0 2px rgba(255,255,255,.3);
border: none; cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.avatar:hover { transform: translateY(-1px); }
.avatar:active { transform: scale(.94); }
.konto-menu {
position: absolute; top: calc(100% + .55rem); right: 0; z-index: 60;
width: 232px; padding: .5rem;
background: rgba(255,255,255,.86);
-webkit-backdrop-filter: blur(20px) saturate(1.6);
backdrop-filter: blur(20px) saturate(1.6);
border: 1px solid rgba(255,255,255,.6);
border-radius: 18px;
box-shadow: 0 16px 40px rgba(59,44,35,.22);
opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: top right;
pointer-events: none; transition: opacity .18s, transform .2s cubic-bezier(.2,.9,.3,1.2);
}
.konto-menu.auf { opacity: 1; transform: none; pointer-events: auto; }
.konto-kopf {
display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem .7rem;
border-bottom: 1px solid var(--linie); margin-bottom: .4rem;
}
.konto-avatar {
width: 42px; height: 42px; border-radius: 50%; background: var(--grad-gold); color: #fff;
display: grid; place-items: center; font-weight: 800; font-size: .95rem; flex: 0 0 auto;
box-shadow: inset 0 0 0 2px rgba(255,255,255,.3);
}
.konto-info { display: flex; flex-direction: column; min-width: 0; }
.konto-name { font-size: 1rem; color: var(--braun-800); line-height: 1.2; }
.konto-rolle { font-size: .82rem; color: var(--braun-500); font-weight: 600; }
.konto-item {
display: flex; align-items: center; gap: .65rem; width: 100%;
padding: .68rem .6rem; border-radius: 11px; border: none; background: none;
color: var(--braun-700); font-weight: 600; font-size: .95rem; cursor: pointer;
text-align: left; transition: background .15s;
}
.konto-item:hover { background: rgba(169,142,107,.14); }
.konto-item svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--braun-500); }
.konto-item.aktiv { color: var(--gruen); cursor: default; }
.konto-item.aktiv svg { color: var(--gruen); }
.konto-abmelden { color: var(--rot); }
.konto-abmelden svg { color: var(--rot); }
/* ---------- Layout ---------- */
.inhalt { max-width: 1180px; margin: 0 auto; padding: 1.2rem 1rem 4rem; }
.seiten-titel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.seiten-titel h1 { font-size: 1.5rem; }
.seiten-titel p { margin: .1rem 0 0; color: var(--braun-500); font-size: .9rem; }
/* ---------- Karten ---------- */
.karte {
background: var(--beige-50);
border: 1px solid var(--linie);
border-radius: var(--radius);
box-shadow: var(--schatten-sm);
padding: 1.1rem 1.2rem;
animation: auf .4s ease both;
}
.karte + .karte { margin-top: 1rem; }
.karte-titel { font-size: 1.05rem; font-weight: 800; margin-bottom: .8rem; display:flex; align-items:center; gap:.5rem; }
.karte-titel::before { content:""; width: 6px; height: 20px; border-radius: 2px; background: var(--grad-gold); display:inline-block; }
.gitter { display: grid; gap: 1rem; }
.gitter.k2 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gitter.k3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gitter.k4 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
/* ---------- Statistik-Kacheln ---------- */
.stat { background: var(--beige-50); border:1px solid var(--linie); border-radius: var(--radius);
padding: 1.1rem 1.2rem; box-shadow: var(--schatten-sm); position: relative; overflow: hidden; animation: auf .4s ease both; }
.stat::after { content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px;
border-radius:50%; background: var(--grad-gold); opacity:.12; }
.stat .wert { font-size: 1.9rem; font-weight: 900; color: var(--braun-700); line-height:1.1; }
.stat .label { color: var(--braun-500); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat.gruen .wert { color: var(--gruen); }
.stat-ico { position:absolute; right:.95rem; top:.95rem; width:40px; height:40px; border-radius:10px;
display:grid; place-items:center; background: var(--grad-gold); box-shadow: var(--schatten-sm); z-index:1; }
.stat-ico svg { width:22px; height:22px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.stat.gruen .stat-ico { background: linear-gradient(135deg, #5C8F61, #3F6644); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
font-weight: 700; font-size: .95rem; border: none; cursor: pointer;
padding: .6rem 1.1rem; border-radius: 10px; color: #fff; background: var(--grad-braun);
box-shadow: 0 8px 18px rgba(84,58,41,.24); transition: transform .08s, filter .18s, box-shadow .18s;
text-decoration: none;
}
.btn:hover { filter: brightness(1.07); box-shadow: 0 10px 22px rgba(84,58,41,.3); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.gold { background: var(--grad-gold); }
.btn.gruen { background: linear-gradient(135deg, #5b8f60, #3f6b45); box-shadow: 0 8px 18px rgba(63,107,69,.28); }
.btn.rot { background: linear-gradient(135deg, #c1573f, #9c3421); box-shadow: 0 8px 18px rgba(156,52,33,.28); }
.btn.hell { background: var(--beige-200); color: var(--braun-700); box-shadow: none; border:1px solid var(--linie); }
.btn.hell:hover { background: var(--beige-300); }
.btn.klein { padding: .38rem .7rem; font-size: .84rem; border-radius: 8px; }
.btn.gross { padding: .85rem 1.4rem; font-size: 1.05rem; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* ---------- Formulare ---------- */
label.feld { display: block; margin-bottom: .8rem; }
label.feld > span { display: block; font-weight: 700; font-size: .84rem; margin-bottom: .3rem; color: var(--braun-600); }
input, select, textarea {
width: 100%; font: inherit; color: var(--braun-800);
background: #fff; border: 1.5px solid var(--linie); border-radius: 9px;
padding: .6rem .8rem; transition: border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--braun-400);
box-shadow: 0 0 0 3px rgba(169,116,79,.18);
}
.reihe { display: flex; gap: .8rem; flex-wrap: wrap; }
.reihe > * { flex: 1; min-width: 140px; }
.schalter { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.schalter input { width: auto; }
.ios-toggle { display: flex; align-items: center; gap: .7rem; font-weight: 600; cursor: pointer;
margin: .6rem 0; color: var(--braun-800); }
.ios-toggle .ios-toggle-text { flex: 1; }
.ios-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ios-toggle-slider { position: relative; flex: 0 0 auto; width: 46px; height: 28px; border-radius: 999px;
background: var(--beige-300); transition: background .2s; }
.ios-toggle-slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(59,44,35,.3); transition: transform .2s; }
.ios-toggle input:checked + .ios-toggle-slider { background: var(--gruen); }
.ios-toggle input:checked + .ios-toggle-slider::after { transform: translateX(18px); }
.ios-toggle input:focus-visible + .ios-toggle-slider { outline: 2px solid var(--braun-400); outline-offset: 2px; }
/* Umschalter im Konto-Menü */
.konto-toggle { cursor: pointer; }
.konto-toggle [data-ben-label] { flex: 1; }
.konto-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.konto-toggle .ios-toggle-slider { margin-left: auto; }
.konto-toggle input:checked + .ios-toggle-slider { background: var(--gruen); }
.konto-toggle input:checked + .ios-toggle-slider::after { transform: translateX(18px); }
.konto-toggle input:disabled + .ios-toggle-slider { opacity: .5; }
/* Benachrichtigungs-Status (Konto-Menü) */
.konto-status { cursor: default; }
.konto-status .ben-badge { margin-left: .1rem; }
.ben-badge {
margin-left: auto; padding: .12rem .5rem; border-radius: 999px;
font-size: .72rem; font-weight: 700; white-space: nowrap;
background: var(--beige-200); color: var(--braun-500);
}
.ben-badge.ben-aktiv { color: var(--gruen); background: rgba(78,123,82,.16); }
.ben-badge.ben-blockiert { color: var(--rot); background: rgba(180,68,47,.14); }
/* Umschalter-Zeile in iOS-Listen */
.ios-toggle-row { cursor: pointer; }
.ios-toggle-row input { position: absolute; opacity: 0; width: 0; height: 0; }
.ios-toggle-row .ios-toggle-slider { margin-left: auto; flex: 0 0 auto; }
.ios-toggle-row input:checked + .ios-toggle-slider { background: var(--gruen); }
.ios-toggle-row input:checked + .ios-toggle-slider::after { transform: translateX(18px); }
.ios-toggle-row input:disabled + .ios-toggle-slider { opacity: .5; }
/* ---------- Tabellen ---------- */
.tabelle { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabelle th { text-align: left; color: var(--braun-500); font-size: .76rem; text-transform: uppercase;
letter-spacing: .04em; padding: .5rem .6rem; border-bottom: 2px solid var(--linie); }
.tabelle td { padding: .6rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle tr:last-child td { border-bottom: none; }
.tabelle tr { transition: background .15s; }
.tabelle tbody tr:hover { background: var(--beige-100); }
/* ---------- Abzeichen ---------- */
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 800;
background: var(--beige-200); color: var(--braun-700); }
.badge.gruen { background: rgba(78,123,82,.16); color: var(--gruen); }
.badge.rot { background: rgba(180,68,47,.14); color: var(--rot); }
.badge.gold { background: rgba(192,133,82,.18); color: var(--gold); }
.badge.grau { background: #e9e2d5; color: #7c6b57; }
.badge.ios-badge-icon { display: inline-flex; align-items: center; gap: .18rem; vertical-align: middle;
padding: .12rem .45rem; font-size: .66rem; }
.badge.ios-badge-icon svg { width: 10px; height: 10px; flex: 0 0 auto; }
.ios-loeschen { justify-content: center; gap: .45rem; background: rgba(214,69,69,.12);
background-image: none; color: var(--rot); box-shadow: none; }
.ios-loeschen:active { background: rgba(214,69,69,.22); }
/* ---------- Tisch-Kacheln ---------- */
.tisch-kachel {
display: flex; flex-direction: column; gap: .3rem; text-align: left;
background: var(--beige-50); border: 1px solid var(--linie); border-radius: var(--radius);
padding: 1rem; box-shadow: var(--schatten-sm); cursor: pointer; position: relative; overflow: hidden;
transition: transform .12s, box-shadow .18s; animation: auf .35s ease both;
}
.tisch-kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.tisch-kachel .nr { font-size: 1.25rem; font-weight: 900; color: var(--braun-700); }
.tisch-kachel .info { font-size: .82rem; color: var(--braun-500); }
.tisch-kachel.belegt { border-color: var(--braun-400); }
.tisch-kachel.belegt::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background: var(--grad-gold); }
.tisch-kachel .summe { font-weight: 800; color: var(--braun-600); }
/* ---------- Menü / Produktauswahl ---------- */
.produkt-btn {
text-align: left; background: var(--beige-50); border: 1px solid var(--linie);
border-radius: 11px; padding: .7rem .85rem; cursor: pointer; transition: transform .1s, border-color .15s, box-shadow .15s;
display: flex; flex-direction: column; gap: .15rem;
}
.produkt-btn:hover { border-color: var(--braun-400); box-shadow: var(--schatten-sm); transform: translateY(-2px); }
.produkt-btn:active { transform: scale(.97); }
.produkt-btn .p-name { font-weight: 700; }
.produkt-btn .p-preis { color: var(--gold); font-weight: 800; font-size: .9rem; }
.kat-reiter { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .9rem; }
.kat-reiter button {
width: auto; background: var(--beige-200); border: 1px solid var(--linie); color: var(--braun-700);
border-radius: 999px; padding: .4rem .95rem; font-weight: 700; cursor: pointer; transition: all .15s;
}
.kat-reiter button.aktiv { background: var(--grad-braun); color: #fff; border-color: transparent; }
/* ---------- Kategorie-Tabs (horizontal scrollbar) ---------- */
.kat-tabs-wrap { position: relative; margin-bottom: 1rem; }
.kat-tabs {
display: flex; gap: .5rem; overflow-x: auto; scroll-behavior: smooth;
padding: .2rem .1rem .4rem; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.kat-tab {
flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: .5rem;
background: var(--beige-50); border: 1px solid var(--linie); color: var(--braun-700);
border-radius: 999px; padding: .5rem 1.05rem; font-weight: 700; font-size: .92rem;
cursor: pointer; white-space: nowrap; font-family: inherit; transition: all .16s;
box-shadow: var(--schatten-sm);
}
.kat-tab:hover { border-color: var(--braun-300); }
.kat-tab.aktiv { background: var(--grad-braun); color: #fff; border-color: transparent; }
.kat-tab .kat-tab-zahl {
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: .72rem; font-weight: 800;
display: grid; place-items: center; background: var(--beige-200); color: var(--braun-700);
}
.kat-tab.aktiv .kat-tab-zahl { background: rgba(255,255,255,.24); color: #fff; }
.kat-tab.neu { background: var(--grad-gold); color: #fff; border-color: transparent; }
.kat-tab.neu .kat-tab-plus { font-size: 1.15rem; line-height: 1; }
/* Vollbreite Tabs (Einstellungen) */
.kat-tabs--voll { display: flex; width: 100%; gap: .5rem; }
.kat-tabs--voll .kat-tab { flex: 1; justify-content: center; text-align: center; border-radius: 12px; gap: .45rem; }
.tab-ico { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-ico { width: 17px; height: 17px; flex: 0 0 auto; margin-right: .4rem; vertical-align: -3px; }
/* ---------- iOS-Stil Einstellungen ---------- */
/* Segmented Control */
.ios-seg {
display: flex; gap: .25rem; padding: .28rem; margin: 0 0 1.4rem;
background: var(--beige-200); border-radius: 12px;
}
.ios-seg-btn {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
padding: .5rem .7rem; border: none; background: transparent; cursor: pointer;
font: inherit; font-weight: 700; font-size: .92rem; color: var(--braun-600);
border-radius: 9px; transition: background .18s, color .18s, box-shadow .18s;
}
.ios-seg-btn svg { width: 17px; height: 17px; }
.ios-seg-btn.aktiv {
background: var(--beige-50); color: var(--braun-800);
box-shadow: 0 1px 3px rgba(59,44,35,.14), 0 0 0 .5px rgba(59,44,35,.04);
}
a.ios-seg-btn { text-decoration: none; }
/* Umsatz-Filterleiste */
.umsatz-filter { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.umsatz-filter .ios-seg { flex: 1 1 260px; margin: 0; }
.umsatz-filter .umsatz-kellner-form { flex: 1 1 100%; margin: 0; }
/* Benutzerdefinierter Zeitraum */
.umsatz-custom { margin: -.2rem 0 1.2rem; }
/* Sektions-Überschrift */
.ios-sektion {
padding: 0 1rem .45rem; margin-top: 1.3rem;
font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--braun-500);
}
/* Inset-Liste */
.ios-list {
background: var(--beige-50); border: 1px solid var(--linie);
border-radius: 14px; overflow: hidden;
}
.ios-row {
display: flex; align-items: center; gap: .8rem; width: 100%;
padding: .8rem 1rem; min-height: 52px; text-align: left;
background: transparent; border: none; font: inherit; color: var(--braun-800);
}
.ios-row + .ios-row { border-top: 1px solid var(--linie); }
.ios-row-text { display: flex; flex-direction: column; gap: .12rem; flex: 1; min-width: 0; }
.ios-row-label { font-weight: 700; font-size: .96rem; color: var(--braun-800); }
.ios-row-sub { font-size: .8rem; color: var(--braun-500); }
.ios-rolle { display: inline-flex; align-items: center; gap: .3rem; }
.ios-rolle svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ios-row-wert { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; color: var(--braun-600); }
.ios-row-aktionen { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.ios-preis { margin-left: auto; font-weight: 800; color: var(--braun-600); white-space: nowrap; }
.ios-preis + .ios-row-aktionen { margin-left: .6rem; }
.ios-row--inaktiv .ios-row-label { color: var(--braun-500); }
.ios-row--inaktiv .ios-preis { opacity: .55; }
/* Protokoll-Zeilen (iOS-Liste) */
.prot-row { align-items: flex-start; }
.prot-punkt {
width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
margin-top: .34rem; background: var(--braun-300);
}
.prot-punkt.rot { background: var(--rot); }
.prot-punkt.gruen { background: var(--gruen); }
.prot-punkt.gold { background: var(--gold); }
.prot-row .ios-row-label { font-size: .9rem; word-break: break-word; }
.prot-meta { color: var(--braun-400); font-size: .78rem; }
/* Tippbare Aktions-Zeile */
.ios-row--aktion { cursor: pointer; color: var(--braun-700); }
.ios-row--aktion:active, .ios-row:active { background: var(--beige-200); }
.ios-plus {
width: 26px; height: 26px; flex: 0 0 auto; display: grid; place-items: center;
border-radius: 50%; background: var(--grad-gold); color: #fff;
}
.ios-plus svg { width: 16px; height: 16px; }
/* Icon-Buttons in Zeilen */
.ios-icon-btn {
width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer;
border: 1px solid var(--linie); border-radius: 9px; background: var(--beige-50); color: var(--braun-600);
transition: background .15s, color .15s, border-color .15s;
}
.ios-icon-btn svg { width: 17px; height: 17px; }
.ios-icon-btn:active { background: var(--beige-200); }
.ios-icon-btn.rot { color: var(--rot); background: rgba(214,69,69,.12); border-color: rgba(214,69,69,.35); }
.ios-icon-btn.rot:active { background: rgba(214,69,69,.22); }
.ios-row-aktionen form { display: inline-flex; margin: 0; }
/* Stepper */
.ios-stepper {
display: inline-flex; align-items: center; margin-left: auto;
background: var(--beige-200); border-radius: 9px; overflow: hidden;
}
.ios-step {
width: 40px; height: 34px; display: grid; place-items: center; cursor: pointer;
border: none; background: transparent; color: var(--braun-700);
transition: background .12s;
}
.ios-step:active { background: var(--beige-300, #E4D6BF); }
.ios-step svg { width: 18px; height: 18px; }
.ios-step-wert { min-width: 34px; text-align: center; font-weight: 800; color: var(--braun-800); }
/* Select in Zeile (ohne native Optik) */
.ios-row-wert select {
-webkit-appearance: none; appearance: none; border: none; background: transparent;
font: inherit; font-weight: 600; color: var(--braun-600); text-align: right;
padding-right: .1rem; cursor: pointer;
}
.ios-chevron { width: 16px; height: 16px; color: var(--braun-400, #A98E6B); flex: 0 0 auto; }
/* Kompakter Zurück-Button (Pfeil + Text, eigene Zeile) */
.seiten-titel--zurueck { flex-direction: row; align-items: center; gap: 1rem; flex-wrap: wrap; }
.seiten-titel--zurueck .ios-zurueck { order: 2; margin-left: auto; }
.ios-zurueck {
display: inline-flex; align-items: center; gap: .3rem;
padding: .3rem .2rem; color: var(--braun-500); font-weight: 600;
font-size: .9rem; background: none; border: none;
}
.ios-zurueck svg { width: 18px; height: 18px; }
.ios-zurueck:active { color: var(--braun-700); }
/* Erfolgsseite nach dem Kassieren */
.erfolg-seite { text-align: center; padding-top: 2.5rem; }
.erfolg-kreis {
width: 56px; height: 56px; border-radius: 50%; margin: 0 auto .9rem;
display: flex; align-items: center; justify-content: center;
background: var(--gruen, #4E7B52); color: #fff;
}
.erfolg-kreis svg { width: 28px; height: 28px; }
.erfolg-seite h1 { margin: 0; font-size: 1.5rem; }
.erfolg-tisch { color: var(--braun-400); margin: .2rem 0 1.8rem; font-size: .95rem; }
.erfolg-liste { text-align: left; }
.erfolg-zahlart { display: inline-flex; align-items: center; gap: .35rem; }
.erfolg-zahlart svg { width: 18px; height: 18px; color: var(--braun-500); }
/* Produktsuche in der Bestellaufnahme */
.produkt-suche-wrap {
position: relative; margin-bottom: .7rem;
}
.produkt-suche-wrap svg {
position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
width: 18px; height: 18px; color: var(--braun-400); pointer-events: none;
}
.produkt-suche-wrap input {
width: 100%; padding: .7rem .9rem .7rem 2.5rem;
border: 1px solid var(--linie, #E4D6BF); border-radius: var(--radius, 14px);
background: var(--beige-50, #FBF6EF); color: var(--braun-700);
font-size: .95rem; font-family: inherit;
}
.produkt-suche-wrap input:focus {
outline: none; border-color: var(--braun-300); background: #fff;
}
/* Mengen-Zeile im Produkt-Modal */
.menge-zeile {
display: flex; align-items: center; justify-content: space-between;
padding: .2rem 0 .9rem; font-weight: 600; color: var(--braun-700);
}
/* Auswahllisten & Eingaben in iOS-Zeilen */
.ios-feld-row { gap: .8rem; }
.ios-label-icon { display: inline-flex; align-items: center; gap: .45rem; }
.ios-label-icon svg { width: 18px; height: 18px; color: var(--braun-400); flex: 0 0 auto; }
/* Feld-Zeile mit voller Breite (Label links, Dropdown füllt den Rest) */
.ios-feld-row--voll { flex-direction: row; align-items: center; gap: .8rem; }
.ios-feld-row--voll .ios-row-label { flex: 0 0 auto; }
.ios-feld-row--voll .ios-select {
min-width: 0; max-width: none; flex: 1 1 auto; text-align: left;
}
.ios-select {
flex: 0 0 auto; min-width: 55%; max-width: 62%; text-align: right;
padding: .5rem 2rem .5rem .8rem; border: 1px solid var(--linie);
border-radius: 10px; background: var(--beige-50); color: var(--braun-700);
font-size: .95rem; font-family: inherit; font-weight: 600;
appearance: none; -webkit-appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right .6rem center; background-size: 16px;
}
.ios-select:focus { outline: none; border-color: var(--braun-300); background-color: #fff; }
.ios-input {
width: 100%; padding: .6rem .8rem; border: 1px solid var(--linie);
border-radius: 10px; background: var(--beige-50); color: var(--braun-700);
font-size: .95rem; font-family: inherit;
}
.ios-input:focus { outline: none; border-color: var(--braun-300); background: #fff; }
.ios-input::placeholder { color: var(--braun-400); opacity: 1; }
/* Tisch-Status-Punkt in iOS-Liste */
.ios-tisch-punkt { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ios-tisch-punkt.frei { background: var(--braun-300, #C9B18E); }
.ios-tisch-punkt.belegt { background: var(--gruen); box-shadow: 0 0 0 3px rgba(78,123,82,.15); }
.ios-row--belegt .ios-row-label { font-weight: 800; }
/* Tisch-Status-Label rechts */
.ios-status {
margin-left: auto; font-size: .8rem; font-weight: 700; padding: .2rem .6rem;
border-radius: 999px; white-space: nowrap;
display: inline-flex; align-items: center; gap: .3rem;
}
.ios-status svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ios-status.frei { color: var(--braun-500); background: var(--beige-200); }
.ios-status.besetzt { color: var(--gruen); background: rgba(78,123,82,.14); }
/* Bestell-Positionen im iOS-Stil */
.ios-pos-menge { font-weight: 900; color: var(--braun-600); min-width: 30px; flex: 0 0 auto; }
.ios-pos--storniert { opacity: .5; text-decoration: line-through; }
.ios-pos--bezahlt { opacity: .6; }
.ios-summe-row { background: var(--beige-100, #F6EEE1); }
.ios-summe-gross { font-size: 1.15rem; }
/* Strukturierte Positionszeile */
.pos-liste .ios-pos { align-items: center; gap: .8rem; padding: .7rem .9rem; }
.pos-menge-chip {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: 12px; border: none;
background: var(--grad-braun, var(--braun-600)); color: #fff;
font-weight: 800; font-size: 1.2rem; line-height: 1; box-shadow: var(--schatten-sm);
cursor: pointer; position: relative; transition: transform .1s ease;
}
.pos-menge-chip:active { transform: scale(.94); }
.pos-menge-chip::after {
content: ""; position: absolute; right: -2px; bottom: -2px;
width: 15px; height: 15px; border-radius: 50%;
background: var(--gold); border: 2px solid var(--beige-50, #fff);
background-image: url("data:image/svg+xml;utf8,");
background-size: 11px 11px; background-repeat: no-repeat; background-position: center;
}
.pos-menge-chip small { font-size: .68rem; font-weight: 700; opacity: .85; align-self: center; margin-left: 1px; }
.pos-info { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.pos-name { font-weight: 700; color: var(--braun-800); display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.pos-unterzeile { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.pos-unterzeile:empty { display: none; }
.pos-status-mini {
display: inline-flex; align-items: center; gap: .28rem; font-size: .7rem; font-weight: 700;
padding: .12rem .5rem; border-radius: 999px; letter-spacing: .01em;
background: var(--beige-200); color: var(--braun-500);
}
.pos-status-mini svg { width: 12px; height: 12px; flex: 0 0 auto; }
.pos-status-mini.gruen { color: var(--gruen); background: rgba(78,123,82,.15); }
.pos-status-mini.rot { color: var(--rot); background: rgba(180,68,47,.14); }
.pos-status-mini.gold { color: var(--gold); background: rgba(192,133,82,.18); }
.pos-status-mini.neutral { color: var(--braun-500); background: var(--beige-200); }
.pos-notiz-mini {
display: inline-flex; align-items: center; gap: .28rem;
font-size: .78rem; color: var(--gold); font-weight: 600;
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pos-notiz-mini svg { width: 12px; height: 12px; flex: 0 0 auto; }
.pos-rechts {
margin-left: auto; flex: 0 0 auto; display: flex; flex-direction: column;
align-items: flex-end; gap: .4rem;
}
.pos-preis { font-weight: 800; color: var(--braun-700); white-space: nowrap; font-size: 1.05rem; }
.pos-preis-klein { font-size: .82rem; color: var(--braun-400); white-space: nowrap; }
.pos-aktionen { display: flex; gap: .35rem; }
.ios-icon-btn.info { color: var(--gold); }
.ios-pos--storniert .pos-menge-chip { background: var(--braun-400); text-decoration: none; }
.ios-pos--bezahlt .pos-menge-chip { background: var(--gruen); }
/* Positions-Detail-Modal */
.pinfo-list { text-align: left; margin-top: .3rem; }
.pinfo-status-badge {
display: inline-block; padding: .18rem .6rem; border-radius: 999px;
font-size: .8rem; font-weight: 700;
background: var(--beige-200); color: var(--braun-600);
}
.pinfo-status-badge.bezahlt { background: rgba(78,123,82,.16); color: var(--gruen); }
.pinfo-status-badge.storniert { background: rgba(180,68,47,.14); color: var(--rot); }
.pinfo-status-badge.bearbeitet { background: rgba(192,133,82,.18); color: var(--gold); }
/* Verlauf-Timeline im Detail-Modal */
.pos-verlauf { text-align: left; padding: .2rem .1rem; }
.verlauf-item { position: relative; display: flex; gap: .7rem; padding: 0 0 1rem; }
.verlauf-item:last-child { padding-bottom: 0; }
.verlauf-icon {
flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
display: grid; place-items: center; z-index: 1;
background: var(--beige-200, #ecd9bd); color: var(--braun-600);
box-shadow: 0 0 0 3px var(--beige-50, #fff);
}
.verlauf-icon svg { width: 16px; height: 16px; }
.verlauf-item::before {
content: ""; position: absolute; left: 14px; top: 30px; bottom: -.2rem;
width: 2px; background: var(--beige-300, #e8dcc6);
}
.verlauf-item:last-child::before { display: none; }
.verlauf-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding-top: .1rem; flex: 1; }
.verlauf-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.verlauf-titel { font-weight: 700; color: var(--braun-800); font-size: .95rem; }
.verlauf-zeit {
font-size: .74rem; color: var(--braun-500); font-weight: 600; white-space: nowrap;
background: var(--beige-100, #f6eee1); padding: .12rem .45rem; border-radius: 999px;
}
.verlauf-wer {
display: inline-flex; align-items: center; gap: .3rem;
font-size: .8rem; color: var(--braun-500);
}
.verlauf-wer svg { width: 13px; height: 13px; flex: 0 0 auto; }
.verlauf-aend { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .1rem; }
.verlauf-detail {
font-size: .82rem; color: var(--braun-600);
background: var(--beige-100, #f6eee1); border-radius: 8px; padding: .28rem .55rem;
}
.verlauf-menge {
display: inline-flex; align-items: center; gap: .4rem;
padding: .25rem .6rem; border-radius: 8px;
background: var(--beige-100, #f6eee1); font-size: .82rem; font-weight: 700;
}
.verlauf-menge .vm-label { color: var(--braun-400); font-weight: 600; font-size: .74rem; }
.verlauf-menge .vm-alt { color: var(--braun-400); text-decoration: line-through; }
.verlauf-menge .vm-neu { color: var(--gold); font-size: 1rem; }
.verlauf-menge svg { width: 14px; height: 14px; color: var(--braun-400); }
.verlauf-item.art-erfasst .verlauf-icon { background: rgba(78,123,82,.16); color: var(--gruen); }
.verlauf-item.art-bearbeitet .verlauf-icon { background: rgba(192,133,82,.18); color: var(--gold); }
.verlauf-item.art-storniert .verlauf-icon { background: rgba(180,68,47,.14); color: var(--rot); }
.verlauf-item.art-storniert .verlauf-detail { background: rgba(180,68,47,.1); color: var(--rot); }
.ios-check { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--gruen); cursor: pointer; }
.ios-row-wert input { -webkit-appearance: none; appearance: none; border: none; background: transparent;
font: inherit; font-weight: 600; color: var(--braun-700); }
/* Kellnerruf-Zeile im iOS-Stil */
.ios-ruf-glocke {
width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(180,68,47,.12); color: var(--rot);
}
.ios-ruf-glocke svg { width: 18px; height: 18px; }
.ios-leer-zeile { gap: .55rem; color: var(--braun-400, #A98E6B); }
/* iOS-Leerzustand (zentriert mit Icon) */
.ios-leer {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: .35rem; padding: 2.6rem 1.2rem;
}
.ios-leer-kreis {
width: 64px; height: 64px; border-radius: 50%; margin-bottom: .5rem;
display: inline-flex; align-items: center; justify-content: center;
background: var(--beige-100, #F3E9DA); color: var(--braun-400, #A98E6B);
}
.ios-leer-kreis svg { width: 30px; height: 30px; }
.ios-leer-titel { margin: 0; font-weight: 800; font-size: 1.05rem; color: var(--braun-700); }
.ios-leer-text { margin: 0; font-size: .88rem; color: var(--braun-500); max-width: 280px; }
/* Tisch-Gastlink (einzeilig, gekuerzt) */
.tisch-link {
display: block; max-width: 100%; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
color: var(--gold); text-decoration: none;
}
.tisch-link:hover { text-decoration: underline; }
.ios-icon-btn.gruen { color: var(--gruen); background: rgba(78,123,82,.14); border-color: rgba(78,123,82,.35); }
.ios-icon-btn.gruen:active { background: rgba(78,123,82,.24); }
/* Listen-Avatar (Initialen) */
.ios-ava {
width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 800; font-size: .82rem; letter-spacing: .02em;
background: var(--braun-300); color: #fff;
}
.ios-ava.gold { background: var(--grad-gold, var(--gold)); }
.ios-row--inaktiv .ios-ava { opacity: .5; }
.ios-speichern {
margin-top: 1.1rem; width: 100%; justify-content: center; gap: .45rem;
background: var(--grad-gold); background-image: var(--grad-gold); color: #fff;
box-shadow: var(--schatten-sm);
border-radius: 12px; padding: .85rem 1rem; font-size: 1rem; font-weight: 700;
letter-spacing: .01em; transition: opacity .15s, transform .06s;
}
.ios-speichern:not(:disabled):active { transform: scale(.98); opacity: .92; }
.ios-speichern:disabled { opacity: .4; cursor: default; }
.ios-hinweis { color: var(--braun-500); font-size: .82rem; margin: .55rem 1rem 0; }
/* Benachrichtigungs-Status */
.ios-ben-btn { margin-left: auto; flex: 0 0 auto; }
.ios-ben-aktiv {
margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem;
color: var(--gruen); font-weight: 700; font-size: .9rem;
}
.ios-ben-aktiv svg { width: 16px; height: 16px; }
/* ---------- Einstellungen: Kopf mit Logo + Name ---------- */
.einst-kopf { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.einst-logo { height: 60px; width: auto; flex: 0 0 auto; }
.einst-name { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: .3rem; }
.einst-name-label { color: var(--braun-500); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.einst-name-reihe { display: flex; gap: .6rem; align-items: center; }
.einst-name-reihe input {
flex: 1; padding: .6rem .8rem; border: 1px solid var(--linie); border-radius: 10px;
background: var(--beige-50); font-size: 1.1rem; font-weight: 700; color: var(--braun-800); font-family: inherit;
}
.einst-name-reihe input:focus { outline: none; border-color: var(--braun-300); }
/* ---------- Warenkorb / Bestellliste ---------- */
.pos-zeile { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px dashed var(--linie); animation: auf .3s ease both; }
.pos-zeile:last-child { border-bottom: none; }
.pos-zeile.storniert { opacity: .5; text-decoration: line-through; }
.pos-zeile.bezahlt-pos { opacity: .6; }
.pos-menge { font-weight: 900; color: var(--braun-600); min-width: 34px; }
.pos-name { flex: 1; font-weight: 600; }
.pos-name small { display: block; font-weight: 500; color: var(--braun-400); }
.pos-name small.pos-zeit { font-size: .72rem; color: var(--braun-400); }
.pos-preis { font-weight: 800; color: var(--braun-700); }
.summe-zeile { display: flex; justify-content: space-between; align-items: baseline; margin-top: .8rem;
padding-top: .8rem; border-top: 2px solid var(--linie); }
.summe-zeile .gross { font-size: 1.6rem; font-weight: 900; color: var(--braun-700); }
/* ---------- Rufe / Benachrichtigungen ---------- */
.ruf-karte { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 11px;
background: linear-gradient(135deg, #fff, var(--beige-100)); border: 1px solid var(--braun-300);
box-shadow: var(--schatten-sm); animation: eintreten .4s ease both; }
.ruf-karte .glocke { width: 42px; height: 42px; border-radius: 10px; background: var(--grad-gold); color:#fff;
display: grid; place-items: center; font-weight: 900; animation: schaukeln 1.2s ease-in-out infinite; }
.ruf-karte .txt { flex: 1; }
.ruf-karte .txt b { display: block; }
.ruf-karte .txt small { color: var(--braun-500); }
/* ---------- Toasts (iOS-Stil) ---------- */
.toasts {
position: fixed; top: calc(env(safe-area-inset-top) + .8rem); left: 50%; transform: translateX(-50%);
z-index: 1000; display: flex; flex-direction: column; gap: .55rem;
width: min(430px, calc(100% - 1.6rem));
}
.toast {
display: flex; align-items: center; gap: .7rem; padding: .7rem .75rem; border-radius: 16px;
color: var(--braun-800); background: rgba(255, 255, 255, .82);
backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
box-shadow: 0 12px 32px rgba(59, 44, 35, .18); border: 1px solid rgba(255, 255, 255, .55);
animation: toastRein .4s cubic-bezier(.2, .9, .3, 1.25) both; font-weight: 600;
transition: opacity .3s ease, transform .3s ease;
}
.toast .toast-icon {
width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; color: #fff;
}
.toast .toast-icon svg { width: 18px; height: 18px; }
.toast.success .toast-icon { background: var(--gruen); }
.toast.danger .toast-icon { background: var(--rot); }
.toast.warning .toast-icon { background: #d3a13c; }
.toast.info .toast-icon { background: var(--gold); }
.toast .txt { flex: 1; font-size: .92rem; line-height: 1.3; color: var(--braun-800); }
.toast .zu {
margin-left: auto; flex: 0 0 auto; background: rgba(120, 90, 60, .1); border: none;
color: var(--braun-500); width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
font-weight: 700; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.toast .zu:hover { background: rgba(120, 90, 60, .18); }
@keyframes toastRein { from { opacity: 0; transform: translateY(-16px) scale(.96); } to { opacity: 1; transform: none; } }
/* ---------- Modal ---------- */
.modal-hg { position: fixed; inset: 0; background: rgba(59,44,35,.5); backdrop-filter: blur(3px);
display: none; align-items: center; justify-content: center; z-index: 900; padding: 1rem; animation: auf .2s ease; }
.modal-hg.auf { display: flex; }
.modal { background: var(--beige-50); border-radius: 16px; box-shadow: var(--schatten); width: 100%; max-width: 460px;
padding: 1.3rem; animation: hoch .28s ease both; max-height: 90vh; overflow: auto; }
.modal h3 { margin-bottom: 1rem; }
/* QR-Code-Popup */
.modal-qr { max-width: 360px; text-align: center; }
.modal-qr h3 { margin-bottom: .4rem; }
.qr-bild {
background: #fff; border-radius: 14px; padding: .9rem;
box-shadow: inset 0 0 0 1px var(--beige-200); margin: .4rem auto .2rem;
display: flex; align-items: center; justify-content: center;
}
.qr-bild img { width: 100%; max-width: 240px; height: auto; display: block; image-rendering: pixelated; }
/* iOS-Stil Modal (zentriertes Icon, Titel, Untertitel) */
.ios-modal { text-align: center; border-radius: 20px; }
.ios-modal-icon {
width: 54px; height: 54px; border-radius: 50%; margin: .2rem auto 1rem;
display: flex; align-items: center; justify-content: center;
background: var(--beige-200); color: var(--braun-500);
}
.ios-modal-icon.rot { background: rgba(180,68,47,.12); color: var(--rot); }
.ios-modal-icon svg { width: 26px; height: 26px; }
.ios-modal-titel { margin: 0 0 .2rem; font-size: 1.2rem; }
.ios-modal-sub { color: var(--braun-500); margin: 0 0 1.1rem; font-size: .92rem; }
.ios-modal .feld { text-align: left; }
.ios-modal .reihe .btn { flex: 1; justify-content: center; }
/* ---------- Login (iOS-Stil) ---------- */
.ios-login { min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
align-items: center; padding: 2rem 1.1rem; gap: 1.4rem; }
.ios-login-kopf { text-align: center; }
.ios-login-titel { font-size: 1.6rem; font-weight: 800; color: var(--braun-800); margin: .8rem 0 .3rem; }
.ios-login-tagline { color: var(--braun-500); margin: 0 auto; font-size: .95rem; max-width: 320px; line-height: 1.4; }
.ios-login-form { width: 100%; max-width: 400px; }
.login-logo { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
.ios-login-hinweis { display: flex; align-items: center; gap: .6rem;
border-radius: 14px; padding: .8rem .95rem; font-size: .92rem; font-weight: 600;
margin-bottom: 1rem; text-align: left; line-height: 1.3; }
.ios-login-hinweis svg { width: 20px; height: 20px; flex: 0 0 auto; }
.ios-login-hinweis.fehler { background: rgba(214,69,69,.12); color: #C0392B; }
.ios-login-hinweis.info { background: rgba(192,133,82,.12); color: var(--braun-700); }
.ios-gruppe { background: var(--beige-50); border: 1px solid var(--linie);
border-radius: 14px; overflow: hidden; box-shadow: var(--schatten-sm); }
.ios-zeile { position: relative; }
.ios-zeile + .ios-zeile::before { content: ""; position: absolute; top: 0; left: .95rem; right: 0;
height: 1px; background: var(--linie); }
.ios-feld { width: 100%; border: none; background: transparent; border-radius: 0;
padding: .95rem .95rem; font-size: 1.02rem; color: var(--braun-800); }
.ios-feld:focus { outline: none; box-shadow: none; background: rgba(255,255,255,.6); }
.ios-feld::placeholder { color: var(--braun-400); opacity: 1; }
.ios-login-btn { width: 100%; margin-top: 1.2rem; border: none; cursor: pointer;
padding: 1rem; border-radius: 14px; font-size: 1.05rem; font-weight: 700;
color: #fff; background: var(--grad-gold); box-shadow: var(--schatten-sm);
transition: transform .12s ease, opacity .12s ease; }
.ios-login-btn:hover { opacity: .95; }
.ios-login-btn:active { transform: scale(.98); }
/* ---------- Speisekarte (Gast) ---------- */
.willkommen {
position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
padding: 2rem 1.4rem calc(2rem + env(safe-area-inset-bottom));
color: var(--beige-50); text-align: center;
background:
radial-gradient(130% 100% at 50% -10%, rgba(231,184,119,.42), transparent 60%),
var(--grad-braun);
animation: wkAuf .45s ease both;
}
.willkommen.zu { animation: wkZu .5s ease forwards; }
.willkommen-inhalt { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 430px; }
.willkommen-logo {
width: 250px; max-width: 78%; height: auto; background: var(--beige-50);
padding: 1rem 1.35rem; border-radius: 20px; box-shadow: 0 18px 44px rgba(0,0,0,.32);
animation: wkPop .6s .05s ease both;
}
.willkommen-titel { font-size: 1.9rem; margin: .5rem 0 0; animation: wkUp .55s .18s ease both; }
.willkommen-text { margin: 0; opacity: .92; line-height: 1.55; font-size: 1rem; animation: wkUp .55s .28s ease both; }
.willkommen-btn {
display: inline-flex; align-items: center; gap: .5rem; margin-top: .6rem;
background: var(--grad-gold); color: #fff; border: none; border-radius: 999px;
padding: .9rem 1.7rem; font-weight: 800; font-size: 1.02rem; cursor: pointer;
box-shadow: 0 12px 28px rgba(0,0,0,.28); animation: wkUp .55s .38s ease both;
transition: transform .12s ease, box-shadow .12s ease;
}
.willkommen-btn svg { width: 20px; height: 20px; }
.willkommen-btn:active { transform: scale(.96); }
.willkommen-gruss { font-size: .86rem; opacity: .82; animation: wkUp .55s .48s ease both; }
.willkommen-herz { color: #E7B877; display: inline-block; animation: puls 1.8s ease-in-out infinite; }
@keyframes wkAuf { from { opacity: 0; } to { opacity: 1; } }
@keyframes wkZu { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes wkPop { from { opacity: 0; transform: scale(.86) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes wkUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.gast-kopf {
position: relative; overflow: hidden; text-align: center; color: var(--beige-50);
padding: 1.25rem 1rem 1.1rem;
background:
radial-gradient(120% 120% at 50% -25%, rgba(231,184,119,.38), transparent 60%),
var(--grad-braun);
border-radius: 0 0 22px 22px; box-shadow: 0 10px 24px rgba(59,44,35,.16);
}
.gast-kopf::after {
content: ""; position: absolute; left: 50%; bottom: .55rem; transform: translateX(-50%);
width: 40px; height: 3px; border-radius: 999px; background: var(--grad-gold);
}
.gast-kopf h1 { font-size: 1.8rem; }
.gast-kopf p {
opacity: .92; margin: 0 0 .35rem; font-weight: 600; font-size: .74rem;
letter-spacing: .16em; text-transform: uppercase;
}
.gast-logo {
display: block; width: 176px; max-width: 60%; height: auto; margin: 0 auto .6rem;
background: var(--beige-50); padding: .6rem .9rem; border-radius: 14px;
box-shadow: 0 8px 20px rgba(59,44,35,.24);
}
.gast-inhalt { padding-top: 1rem; padding-bottom: 144px; }
/* Gast-Speisekarte (iOS) */
.gast-chips { position: sticky; top: 0; z-index: 30; flex-wrap: nowrap; overflow-x: auto;
-webkit-overflow-scrolling: touch; gap: .5rem; padding: .6rem 0; margin: 0 0 .4rem;
background: rgba(251,246,239,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
scrollbar-width: none; }
.gast-chips::-webkit-scrollbar { display: none; }
.gast-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem;
background: var(--beige-50); border: 1px solid var(--linie); color: var(--braun-700);
border-radius: 999px; padding: .45rem .9rem; font-weight: 600; font-size: .9rem; cursor: pointer;
white-space: nowrap; transition: background .15s, color .15s, box-shadow .15s; }
.gast-chip svg { width: 16px; height: 16px; flex: 0 0 auto; }
.gast-chip.aktiv { background: var(--grad-gold); color: #fff; border-color: transparent;
box-shadow: var(--schatten-sm); }
/* Kategorie-Überblick (Karten) */
.kat-uebersicht { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: .3rem; }
.kat-karte {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
padding: 1.3rem .8rem; background: var(--beige-50); border: 1px solid var(--linie);
border-radius: 18px; box-shadow: var(--schatten-sm); cursor: pointer; text-align: center;
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.kat-karte:hover { transform: translateY(-2px); box-shadow: var(--schatten); border-color: var(--braun-300); }
.kat-karte:active { transform: scale(.97); }
.kat-karte-ico {
width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; color: var(--gold);
background: linear-gradient(135deg, rgba(231,184,119,.22), rgba(192,133,82,.14));
box-shadow: inset 0 0 0 1px rgba(192,133,82,.18);
}
.kat-karte-ico svg { width: 28px; height: 28px; }
.kat-karte-name { font-weight: 600; font-size: .88rem; color: var(--braun-800); }
.kat-karte-anzahl { font-size: .8rem; color: var(--braun-500); }
/* Menü-Suche (Admin) */
.menue-suche {
display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem;
background: var(--beige-50); border: 1px solid var(--linie); border-radius: 12px;
padding: 0 .8rem; box-shadow: var(--schatten-sm);
}
.menue-suche > svg { width: 20px; height: 20px; color: var(--braun-400); flex: 0 0 auto; }
.menue-suche input {
flex: 1; border: none; background: transparent; padding: .75rem 0; font-size: 1rem;
color: var(--braun-800); border-radius: 0;
}
.menue-suche input:focus { outline: none; box-shadow: none; }
.menue-suche input::-webkit-search-cancel-button { display: none; }
.menue-suche-x {
border: none; background: transparent; color: var(--braun-400); cursor: pointer;
display: grid; place-items: center; padding: .3rem; width: auto;
}
.menue-suche-x svg { width: 18px; height: 18px; }
/* Allergen-Auswahl (Admin-Produktformular) */
.allergen-wahl { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.allergen-chip { cursor: pointer; }
.allergen-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.allergen-chip span {
display: inline-block; padding: .4rem .7rem; border-radius: 999px; font-size: .82rem; font-weight: 600;
background: var(--beige-100); border: 1px solid var(--linie); color: var(--braun-700);
transition: background .15s, color .15s, border-color .15s;
}
.allergen-chip input:checked + span { background: var(--grad-gold); color: #fff; border-color: transparent; }
.allergen-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(192,133,82,.3); }
/* Allergene auf der Gast-Speisekarte */
.gast-allergene { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.gast-allergene i {
font-style: normal; font-size: .68rem; font-weight: 800; line-height: 1;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: 5px;
display: inline-flex; align-items: center; justify-content: center;
color: var(--braun-600); background: var(--beige-200); border: 1px solid var(--linie);
}
/* Zahlart-Liste (Kellner-Kasse) */
.zahlart-liste { display: flex; flex-direction: column; gap: .5rem; }
.zahlart-zeile {
display: flex; align-items: center; justify-content: space-between;
padding: .7rem .9rem; border-radius: 12px; background: var(--beige-100);
border: 1px solid var(--linie); font-weight: 600; color: var(--braun-700);
}
.zahlart-betrag { font-weight: 900; color: var(--gold); }
/* Reservierungen (Kellner) */
.res-zeile { gap: .7rem; }
.res-zeit {
flex: 0 0 auto; width: 54px; text-align: center; display: flex; flex-direction: column;
padding: .35rem 0; border-radius: 12px; background: var(--beige-200); border: 1px solid var(--linie);
}
.res-tag { font-size: .72rem; font-weight: 700; color: var(--braun-500); }
.res-uhr { font-size: 1rem; font-weight: 900; color: var(--braun-800); }
.res-personen { font-size: .72rem; font-weight: 800; letter-spacing: .02em;
text-transform: uppercase; color: var(--gold); }
.res-ersteller { font-size: .74rem; color: var(--braun-400); margin-top: .15rem; }
.res-leer { justify-content: center; gap: .55rem; color: var(--braun-400); padding: 1.2rem 1rem; }
.res-leer-ico svg { width: 26px; height: 26px; color: var(--braun-300); }
.ios-icon-btn.gruen { color: var(--gruen); }
/* Berichte (Admin) */
.berichte-filter { margin: 0 0 1rem; }
.berichte-filter .ios-row-wert { margin-left: auto; flex: 1 1 auto; justify-content: flex-end; }
.berichte-filter .ios-row-wert select { width: 100%; }
/* Trend-Diagramm im iOS-Stil */
.trend-diagramm {
display: flex; align-items: flex-end; gap: .5rem; height: 168px; padding: 1rem .9rem .8rem;
}
.trend-saeule {
flex: 1; height: 100%; display: flex; flex-direction: column;
justify-content: flex-end; align-items: center; gap: .3rem;
}
.trend-wert { font-size: .72rem; font-weight: 700; color: var(--braun-500); }
.trend-balken {
width: 100%; max-width: 34px; min-height: 4px; border-radius: 8px 8px 0 0;
background: var(--grad-gold); background-image: var(--grad-gold);
box-shadow: var(--schatten-sm); animation: auf .5s ease both;
}
.trend-tag { font-size: .72rem; color: var(--braun-400); }
.zahlart-ico {
flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; margin-right: .1rem;
display: grid; place-items: center; background: var(--beige-200); color: var(--braun-600);
}
.zahlart-ico svg { width: 17px; height: 17px; }
.berichte-custom { margin: .7rem 0 1rem; }
.stat-klick { cursor: pointer; border: none; font: inherit; text-align: inherit; }
.stat-klick:active { transform: scale(.98); }
.stat-mehr { display: inline-block; margin-left: .3rem; color: var(--gold); font-weight: 800; }
.bericht-storno { color: var(--rot); font-weight: 700; }
.bericht-storno-zeile .storno-ico {
width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center;
color: var(--rot); background: rgba(180,68,47,.12);
}
.bericht-storno-zeile .storno-ico svg { width: 18px; height: 18px; }
.bestseller-zeile .bestseller-rang {
width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; margin-right: .1rem;
display: grid; place-items: center; font-weight: 800; font-size: .95rem;
color: var(--braun-600); background: var(--beige-200);
}
.bestseller-zeile .bestseller-rang.rang-1 { color: #fff; background: var(--grad-gold); background-image: var(--grad-gold); box-shadow: var(--schatten-sm); }
.bestseller-zeile .bestseller-rang.rang-2 { color: var(--braun-700); background: var(--beige-300, #e8dcc6); }
.bestseller-zeile .bestseller-rang.rang-3 { color: var(--braun-700); background: var(--beige-300, #e8dcc6); }
.bericht-kellner .kellner-ico {
width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; margin-right: .1rem;
display: grid; place-items: center;
}
.bericht-kellner .kellner-ico svg { width: 18px; height: 18px; }
.bericht-kellner .kellner-ico.rolle-admin { color: var(--gold); background: rgba(192,133,82,.16); }
.bericht-kellner .kellner-ico.rolle-kellner { color: var(--gruen); background: rgba(78,123,82,.14); }
/* Tischverlauf */
.tv-karte {
background: var(--beige-50, #fff); border-radius: 16px; box-shadow: var(--schatten-sm);
margin-bottom: .7rem; overflow: hidden;
}
.tv-kopf {
display: flex; align-items: center; gap: .7rem;
padding: .7rem .9rem; cursor: pointer; list-style: none;
}
.tv-kopf::-webkit-details-marker { display: none; }
.tv-kopf:hover { background: var(--beige-100, #f6eee1); }
.tv-tisch-ico {
flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
background: var(--beige-200); color: var(--braun-600);
}
.tv-tisch-ico svg { width: 21px; height: 21px; }
.tv-tisch-ico.ist-storno { color: var(--rot); background: rgba(180,68,47,.12); }
.tv-kopf-text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; flex: 1; }
.tv-tisch-zeile { display: flex; align-items: center; gap: .35rem; }
.tv-tisch { font-weight: 800; font-size: 1.02rem; color: var(--braun-800); }
.tv-flag { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; }
.tv-flag svg { width: 11px; height: 11px; }
.tv-flag.gold { color: var(--gold); background: rgba(192,133,82,.18); }
.tv-flag.rot { color: var(--rot); background: rgba(180,68,47,.14); }
.tv-sub { font-size: .77rem; color: var(--braun-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-zeit { font-size: .78rem; color: var(--braun-400); }
.tv-kopf-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex: 0 0 auto; }
.tv-summe-mini { font-weight: 800; color: var(--braun-800); white-space: nowrap; font-size: 1rem; }
.tv-chevron { width: 18px; height: 18px; color: var(--braun-400); flex: 0 0 auto; transition: transform .2s ease; }
.tv-karte[open] .tv-chevron { transform: rotate(180deg); }
.tv-karte[open] .tv-kopf { border-bottom: 1px solid var(--beige-200); }
.tv-body { padding: .8rem 1rem 1rem; }
.tv-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 .55rem; }
.tv-chip {
display: inline-flex; align-items: center; gap: .3rem; font-size: .76rem; font-weight: 700;
padding: .18rem .55rem; border-radius: 999px; background: var(--beige-200); color: var(--braun-600);
}
.tv-chip svg { width: 13px; height: 13px; }
.tv-chip.gold { color: var(--gold); background: rgba(192,133,82,.16); }
.tv-chip.rot { color: var(--rot); background: rgba(180,68,47,.14); }
.tv-positionen { margin: .3rem 0 .6rem; }
.tv-pos { align-items: flex-start; gap: .6rem; }
.tv-menge { font-weight: 800; color: var(--braun-600); min-width: 30px; flex: 0 0 auto; padding-top: .1rem; }
.tv-pos-unter { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.tv-pos-unter:empty { display: none; }
.tv-pos-info { display: block; font-size: .74rem; color: var(--braun-400); margin-top: .1rem; }
.tv-notiz { font-size: .76rem; color: var(--gold); }
.tv-pos--storniert .ios-row-label { text-decoration: line-through; opacity: .6; }
.tv-fuss { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .2rem; }
.tv-kassiert { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--braun-600); font-weight: 600; }
.tv-kassiert svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--braun-400); }
.tv-kein { color: var(--braun-400); font-weight: 500; }
.tv-summe { font-weight: 800; color: var(--braun-800); font-size: 1.05rem; white-space: nowrap; }
/* PWA-Installation (Login) */
.pwa-install-btn {
margin: 1rem auto 0; display: inline-flex; align-items: center; gap: .5rem;
padding: .7rem 1.2rem; border: none; border-radius: 12px; cursor: pointer;
background: var(--grad-gold); background-image: var(--grad-gold); color: #fff;
font-weight: 700; font-size: .95rem; box-shadow: var(--schatten-sm);
}
.pwa-install-btn svg { width: 18px; height: 18px; }
.pwa-ios-hinweis {
margin: 1rem auto 0; max-width: 320px; text-align: center;
font-size: .82rem; color: var(--braun-500); line-height: 1.5;
}
.pwa-ios-hinweis svg { width: 15px; height: 15px; vertical-align: -3px; color: var(--gold); }
/* PWA-Splash / Ladescreen (nur installierte App) */
#pwa-splash { display: none; }
html.pwa-splash-an #pwa-splash {
display: flex; position: fixed; inset: 0; z-index: 4000;
align-items: center; justify-content: center;
background: var(--beige-50, #FBF6EF);
transition: opacity .45s ease;
}
html.pwa-splash-an { overflow: hidden; }
#pwa-splash.aus { opacity: 0; pointer-events: none; }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; }
.splash-logo { width: 210px; max-width: 62vw; animation: splash-auf .5s ease both; }
.splash-spinner {
width: 38px; height: 38px; border-radius: 50%;
border: 3px solid rgba(192, 133, 82, .25); border-top-color: var(--gold);
animation: splash-dreh .8s linear infinite;
}
.splash-text { color: var(--braun-500); font-weight: 600; letter-spacing: .02em; margin: 0; }
@keyframes splash-dreh { to { transform: rotate(360deg); } }
@keyframes splash-auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.res-status {
display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
padding: .35rem .7rem; border-radius: 999px; font-size: .78rem; font-weight: 800;
}
.res-status svg { width: 14px; height: 14px; }
.res-status.erledigt { color: var(--gruen); background: rgba(78,123,82,.14); }
.res-status.storniert { color: var(--rot); background: rgba(180,68,47,.14); }
/* "Bearbeitet"-Markierung an einer Position */
.pos-bearbeitet-tag {
display: inline-flex; align-items: center; gap: .25rem;
margin-left: .35rem; padding: .1rem .4rem; border-radius: 6px;
background: rgba(192, 133, 82, .16); color: var(--gold);
font-size: .68rem; font-weight: 700; letter-spacing: .02em;
vertical-align: middle;
}
.pos-bearbeitet-tag svg { width: 11px; height: 11px; }
/* Position-bearbeiten-Modal (iOS-Liste) */
.pos-edit-list { text-align: left; margin: .4rem 0 0; }
.pos-edit-list .ios-stepper { flex: 0 0 auto; }
.pos-notiz-input {
flex: 1; min-width: 0; border: none; background: transparent; text-align: right;
padding: .2rem 0; font: inherit; color: var(--braun-800); box-shadow: none;
}
.pos-notiz-input:focus { outline: none; box-shadow: none; }
.pos-notiz-input::placeholder { color: var(--braun-400); }
/* Küchenbon-Simulation (Beleg-Vorschau) */
.bon-sim-overlay {
position: fixed; inset: 0; z-index: 3000; display: flex;
align-items: center; justify-content: center; padding: 1.2rem;
background: rgba(40, 28, 18, .55); backdrop-filter: blur(3px);
animation: bon-fade .2s ease;
}
@keyframes bon-fade { from { opacity: 0; } to { opacity: 1; } }
.bon-sim-buehne {
width: 100%; max-width: 340px; max-height: 88vh; display: flex;
flex-direction: column;
}
.bon-sim-kopf {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: .7rem; color: #fff;
}
.bon-sim-status {
display: inline-flex; align-items: center; gap: .45rem;
font-weight: 700; font-size: .95rem;
}
.bon-sim-punkt {
width: 9px; height: 9px; border-radius: 50%; background: var(--gruen);
box-shadow: 0 0 0 0 rgba(78, 123, 82, .6); animation: bon-puls 1.4s infinite;
}
@keyframes bon-puls {
0% { box-shadow: 0 0 0 0 rgba(78, 123, 82, .6); }
70% { box-shadow: 0 0 0 8px rgba(78, 123, 82, 0); }
100% { box-shadow: 0 0 0 0 rgba(78, 123, 82, 0); }
}
.bon-sim-zu {
width: 30px; height: 30px; border: none; border-radius: 50%;
background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer;
display: grid; place-items: center; padding: 0;
}
.bon-sim-zu svg { width: 16px; height: 16px; }
.bon-sim-rolle {
overflow-y: auto; display: flex; flex-direction: column; gap: 1rem;
padding: .2rem 0;
}
.bon-beleg {
position: relative; background: #fdfcf7; color: #2b2b2b;
box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
animation: bon-druck .45s cubic-bezier(.2, .8, .2, 1);
}
@keyframes bon-druck {
from { transform: translateY(-14px) scaleY(.9); opacity: 0; }
to { transform: none; opacity: 1; }
}
.bon-zacken { height: 9px; background: #fdfcf7; }
.bon-zacken-oben {
-webkit-mask: radial-gradient(6px at 6px 100%, #0000 98%, #000) 0 0/12px 100%;
mask: radial-gradient(6px at 6px 100%, #0000 98%, #000) 0 0/12px 100%;
}
.bon-zacken-unten {
-webkit-mask: radial-gradient(6px at 6px 0, #0000 98%, #000) 0 0/12px 100%;
mask: radial-gradient(6px at 6px 0, #0000 98%, #000) 0 0/12px 100%;
}
.bon-inhalt {
padding: .3rem 1.1rem .5rem;
font-family: "Courier New", ui-monospace, monospace;
font-size: .86rem; line-height: 1.5;
}
.bon-logo { display: block; width: 150px; margin: .5rem auto .2rem; }
.bon-station-tag {
text-align: center; font-weight: 700; letter-spacing: .1em;
font-size: .8rem; color: #444; text-transform: uppercase;
}
.bon-doppellinie {
border-top: 3px double #333; margin: .45rem 0 .3rem;
}
.bon-titel {
text-align: center; font-weight: 700; letter-spacing: .08em;
font-size: 1.05rem; margin: .1rem 0 .35rem; text-transform: uppercase;
}
.bon-tisch-label {
text-align: center; font-size: .72rem; letter-spacing: .35em;
color: #666; margin-bottom: -.1rem;
}
.bon-tisch-nr {
text-align: center; font-weight: 800; line-height: 1;
font-size: 3.4rem; letter-spacing: .02em; color: #1c1c1c;
margin: .05rem 0 .3rem;
}
.bon-meta { text-align: center; font-size: .78rem; color: #555; }
.bon-info {
display: flex; justify-content: space-between; gap: 1rem; font-size: .84rem;
}
.bon-info span:first-child { color: #666; }
.bon-info span:last-child { font-weight: 700; }
.bon-trenner {
border-top: 1px dashed #999; margin: .5rem 0;
}
.bon-zeile { display: flex; gap: .5rem; align-items: baseline; }
.bon-menge { font-weight: 700; min-width: 1.8rem; }
.bon-name { flex: 1; }
.bon-notiz { display: block; font-size: .76rem; color: #777; padding-left: .2rem; }
.bon-hinweis {
margin: .25rem 0 .1rem; padding: .3rem .5rem; border-radius: 6px;
background: #f3ead9; color: #7a5a1e; font-weight: 700; font-size: .8rem;
text-align: center; letter-spacing: .02em;
}
.bon-fuss { text-align: center; font-size: .78rem; color: #666; letter-spacing: .05em; }
/* Mengenwechsel gross hervorheben */
.bon-mengenwechsel {
display: flex; align-items: center; justify-content: center; gap: .8rem;
margin: .3rem 0;
}
.bon-mw-box {
display: flex; flex-direction: column; align-items: center;
min-width: 78px; padding: .35rem .5rem; border-radius: 10px;
border: 2px solid #cfc4b0;
}
.bon-mw-label { font-size: .68rem; letter-spacing: .2em; color: #777; }
.bon-mw-zahl { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.bon-mw-alt { border-color: #d8cdbb; }
.bon-mw-alt .bon-mw-zahl { color: #999; text-decoration: line-through; }
.bon-mw-neu { border-color: var(--rot); background: rgba(180, 68, 47, .06); }
.bon-mw-neu .bon-mw-label { color: var(--rot); }
.bon-mw-neu .bon-mw-zahl { color: var(--rot); }
.bon-mw-pfeil { font-size: 1.8rem; font-weight: 800; color: #555; }
/* Storno-Akzent */
.bon-art-storno .bon-sim-punkt { background: var(--rot); box-shadow: none; animation: none; }
.bon-beleg.bon-art-storno { outline: 2px solid var(--rot); outline-offset: -2px; }
.bon-art-storno .bon-titel { color: var(--rot); }
.bon-art-storno .bon-hinweis { background: rgba(180, 68, 47, .12); color: var(--rot); }
/* Tages-Gruppen der Reservierungen */
.res-tag-kopf {
display: flex; align-items: center; gap: .5rem;
padding: 0 1rem .45rem; margin-top: 1.3rem;
}
.res-tag-label { font-size: .74rem; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--braun-500); }
.res-tag-anzahl {
min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px;
background: var(--beige-300); color: var(--braun-700); font-size: .7rem; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
}
.res-tabs { overflow-x: auto; scrollbar-width: none; margin-bottom: .4rem; }
.res-tabs::-webkit-scrollbar { display: none; }
.res-tabs .ios-seg-btn { white-space: nowrap; }
/* iOS-Hinzufügen-Button (Akzent + rundes Plus) */
.ios-add {
display: inline-flex; align-items: center; gap: .4rem; background: none; border: none;
color: var(--braun-600); font-weight: 800; font-size: .98rem; cursor: pointer; padding: .3rem .2rem;
}
.ios-add-plus {
display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
background: var(--grad-gold); color: #fff; font-size: 1.15rem; line-height: 1; font-weight: 700;
box-shadow: var(--schatten-sm);
}
.ios-add:active .ios-add-plus { transform: scale(.92); }
.gast-sektion { display: flex; align-items: center; gap: .4rem; }
.gast-sektion svg { width: 15px; height: 15px; flex: 0 0 auto; }
.gast-pos-ico { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center;
border-radius: 12px; color: var(--gold);
background: linear-gradient(135deg, rgba(231,184,119,.22), rgba(192,133,82,.14));
box-shadow: inset 0 0 0 1px rgba(192,133,82,.18); }
.gast-pos-ico svg { width: 24px; height: 24px; opacity: .9; }
.gast-pos-bild { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 12px; overflow: hidden;
background: var(--beige-200); }
.gast-pos-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.produkt-bild-vorschau { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 .6rem;
font-size: .82rem; color: var(--braun-500); }
.produkt-bild-vorschau img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover;
border: 1px solid var(--linie); }
.gast-preis { color: var(--gold); font-weight: 900; }
.ruf-kellner { flex: 0 0 auto; }
.ruf-leiste .btn { border-radius: 14px; box-shadow: var(--schatten-sm); font-weight: 700; }
.ruf-leiste .btn.gross { padding: .8rem 1rem; font-size: 1rem; }
.ruf-leiste .btn svg { flex: 0 0 auto; }
.ruf-leiste .btn:active { transform: scale(.97); }
.ruf-leiste { position: sticky; bottom: calc(126px + env(safe-area-inset-bottom)); z-index: 46; display: flex; gap: .6rem; padding: .8rem 1rem;
background: rgba(251,246,239,.92); backdrop-filter: blur(8px); border-top: 1px solid var(--linie); }
.ruf-gesperrt { position: sticky; bottom: calc(126px + env(safe-area-inset-bottom)); z-index: 46; display: flex; align-items: center; gap: .6rem;
padding: .9rem 1rem; font-size: .9rem; font-weight: 600;
color: var(--braun-600); background: rgba(251,246,239,.96); backdrop-filter: blur(8px);
border-top: 1px solid var(--linie); }
.ruf-gesperrt svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--braun-500); }
/* Angemeldetes Personal sieht die Tab-Leiste – Ruf-Leiste darüber anheben */
@media (max-width: 720px) {
body[data-angemeldet="1"] .ruf-leiste,
body[data-angemeldet="1"] .ruf-gesperrt { bottom: calc(60px + env(safe-area-inset-bottom)); }
}
.speise-pos { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--linie); }
.speise-pos:last-child { border-bottom: none; }
.speise-pos .s-name { font-weight: 700; }
.speise-pos .s-besch { color: var(--braun-500); font-size: .85rem; }
.speise-pos .s-preis { font-weight: 900; color: var(--gold); white-space: nowrap; }
/* ---------- Gast-Footer (fixierte Leiste) ---------- */
.gast-barfuss {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
color: var(--beige-50);
background:
radial-gradient(120% 160% at 50% 140%, rgba(231,184,119,.38), transparent 60%),
var(--grad-braun);
border-radius: 26px 26px 0 0;
box-shadow: 0 -14px 30px rgba(59,44,35,.22);
}
.gast-barfuss::before {
content: ""; position: absolute; left: 50%; top: .55rem; transform: translateX(-50%);
width: 46px; height: 3px; border-radius: 999px; background: var(--grad-gold);
}
.gast-barfuss-innen {
max-width: 640px; margin: .5rem auto 0; display: flex; flex-direction: column;
align-items: stretch; gap: .55rem;
}
.gast-dank {
margin: 0; font-size: .84rem; font-weight: 600; letter-spacing: .01em;
color: var(--beige-100);
}
.gast-dank-herz { color: #E7B877; display: inline-block; animation: puls 1.8s ease-in-out infinite; }
.gast-barfuss-top {
display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%;
}
.gast-social { display: flex; gap: .4rem; flex: 0 0 auto; }
.social-btn {
width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
color: var(--beige-50); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.social-btn svg { width: 17px; height: 17px; }
.social-btn:hover { background: var(--grad-gold); color: #fff; border-color: transparent; }
.social-btn:active { transform: scale(.92); }
.gast-footer-links {
display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; width: 100%;
}
.gast-footer-link {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: var(--beige-50);
border-radius: 14px; padding: .5rem .3rem; font-weight: 700; font-size: .72rem; cursor: pointer;
text-align: center; line-height: 1.1;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.gast-footer-link svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--braun-300); }
.gast-footer-link:hover { background: var(--grad-gold); color: #fff; border-color: transparent; }
.gast-footer-link:hover svg { color: #fff; }
.gast-footer-link:active { transform: scale(.96); }
/* Gast-Sheets (Allergene / Impressum / Datenschutz) */
.gast-sheet .gast-sheet-sub { color: var(--braun-500); font-size: .88rem; margin: -.4rem 0 1rem; }
.gast-sheet .gast-sheet-text { color: var(--braun-700); font-size: .95rem; line-height: 1.55; margin-bottom: 1.2rem; }
.gast-sheet .btn.block { width: 100%; justify-content: center; }
/* Öffnungszeiten & Kontakt */
.oeffnung-box {
display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem;
background: linear-gradient(135deg, rgba(231,184,119,.18), rgba(192,133,82,.1));
border: 1px solid var(--linie); border-radius: 14px; padding: .9rem 1rem;
}
.oeffnung-box svg { width: 30px; height: 30px; flex: 0 0 auto; color: var(--gold); }
.oeffnung-box strong { display: block; color: var(--braun-800); font-size: 1rem; }
.oeffnung-box span { color: var(--braun-500); font-size: .92rem; }
.kontakt-liste { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.2rem; }
.kontakt-zeile {
display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem;
background: var(--beige-100); border: 1px solid var(--linie); border-radius: 12px;
color: var(--braun-700); font-weight: 600; font-size: .92rem;
}
.kontakt-zeile svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--gold); }
.kontakt-zeile:active { transform: scale(.98); }
/* Rechtstexte (Impressum / Datenschutz) */
.rechtstext { color: var(--braun-700); font-size: .92rem; line-height: 1.55; margin-bottom: 1.2rem; }
.rechtstext h4 { margin: 1rem 0 .25rem; font-size: .95rem; color: var(--braun-800); }
.rechtstext h4:first-child { margin-top: 0; }
.rechtstext p { margin: 0 0 .5rem; }
.rechtstext a { color: var(--braun-600); text-decoration: underline; word-break: break-word; }
.rechtstext-hinweis { margin-top: .8rem; font-size: .8rem; color: var(--braun-400); font-style: italic; }
.recht-tabs { margin-bottom: 1rem; }
.recht-panel { max-height: 60vh; overflow-y: auto; scrollbar-width: none; }
.recht-panel::-webkit-scrollbar { display: none; }
.allergen-liste {
list-style: none; margin: 0 0 1.2rem; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
}
.allergen-liste li {
display: flex; align-items: center; gap: .55rem; font-size: .9rem; font-weight: 600;
color: var(--braun-700); background: var(--beige-100); border: 1px solid var(--linie);
border-radius: 11px; padding: .55rem .7rem;
}
.allergen-liste li span {
width: 24px; height: 24px; flex: 0 0 auto; border-radius: 7px; display: grid; place-items: center;
font-weight: 900; font-size: .78rem; color: #fff; background: var(--grad-gold);
}
@media (max-width: 420px) { .allergen-liste { grid-template-columns: 1fr; } }
/* ---------- Fehlerseite ---------- */
.fehler-wrap { min-height: 80vh; display: grid; place-items: center; text-align: center; }
.fehler-code { font-size: 5rem; font-weight: 900; color: var(--braun-300); line-height: 1; }
.leer { text-align: center; color: var(--braun-400); padding: 2rem 1rem; font-weight: 600; }
/* ---------- Animationen ---------- */
@keyframes auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hoch { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes eintreten { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes puls { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes schaukeln { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes blitz { 0% { background: var(--beige-50); } 30% { background: rgba(192,133,82,.28); } 100% { background: var(--beige-50); } }
.blitz { animation: blitz 1.2s ease; }
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* ---------- Fußzeilen-Navigation (mobil) ---------- */
.tabbar { display: none; }
.modal-hg--sheet { align-items: flex-end; padding: 0; }
.modal--sheet {
max-width: 640px; width: 100%; border-radius: 20px 20px 0 0;
padding: .8rem 1rem calc(1rem + env(safe-area-inset-bottom));
animation: sheetHoch .3s ease both;
}
.sheet-griff { width: 44px; height: 5px; border-radius: 999px; background: var(--braun-300); margin: 0 auto .9rem; }
.sheet-link {
display: flex; align-items: center; justify-content: flex-start; gap: .75rem;
padding: .85rem 1rem; border-radius: 11px; font-weight: 700; color: var(--braun-700);
border: 1px solid var(--linie); margin-bottom: .5rem; background: var(--beige-50);
}
.sheet-link .sheet-ico {
width: 24px; height: 24px; flex: 0 0 auto; color: var(--braun-500);
display: inline-flex; align-items: center; justify-content: center;
}
.sheet-link .sheet-ico svg { width: 21px; height: 21px; }
.sheet-link.aktiv { background: var(--beige-200); border-color: var(--braun-300); }
.sheet-link.aktiv .sheet-ico { color: var(--braun-700); }
.sheet-link .sheet-zahl {
min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--rot);
color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center;
margin-left: auto;
}
.sheet-link.abmelden { color: #fff; background: linear-gradient(135deg, #c1573f, #9c3421); border: none; justify-content: center; margin-top: .4rem; }
.sheet-link.abmelden .sheet-ico { color: #fff; }
@keyframes sheetHoch { from { transform: translateY(100%); } to { transform: none; } }
/* ---------- Responsive ---------- */
@media (max-width: 720px) {
body[data-angemeldet="1"] { padding-bottom: 68px; }
.kopf-nav { display: none; }
.tabbar {
display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
background: rgba(251,246,239,.82); -webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);
box-shadow: 0 -1px 12px rgba(59,44,35,.06);
padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom));
border-top: .5px solid rgba(84,58,41,.16);
}
.tabbar a, .tabbar button {
flex: 1; background: none; border: none; color: var(--braun-400);
display: flex; flex-direction: column; align-items: center; gap: .18rem;
font-size: .64rem; font-weight: 600; padding: .42rem .2rem .3rem; border-radius: 12px;
cursor: pointer; position: relative; text-decoration: none; font-family: inherit;
transition: color .18s;
}
.tabbar .tb-ico {
width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round; transition: transform .18s;
}
.tabbar circle.tb-ico, .tabbar .tb-ico circle { fill: currentColor; stroke: none; }
.tabbar a.aktiv, .tabbar button.aktiv {
color: var(--gold); background: none; box-shadow: none;
}
.tabbar a.aktiv .tb-ico, .tabbar button.aktiv .tb-ico { stroke: var(--gold); transform: none; }
.tabbar a.aktiv circle.tb-ico, .tabbar a.aktiv .tb-ico circle { fill: var(--gold); }
.tabbar a:active, .tabbar button:active { opacity: .5; }
.tabbar .tb-zahl {
position: absolute; top: .18rem; left: 50%; margin-left: 6px;
min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--rot);
color: #fff; font-size: .62rem; font-weight: 800; display: grid; place-items: center;
box-shadow: 0 0 0 2px rgba(251,246,239,.9); animation: puls 1.6s infinite;
}
}
/* ---------- Responsive (Feinschliff) ---------- */
@media (max-width: 720px) {
.kopf-innen { flex-wrap: wrap; padding: .6rem .8rem; gap: .6rem; }
.marke { order: 1; }
.kopf-user { order: 2; margin-left: auto; }
.kopf-nav {
order: 3; margin-left: 0; width: 100%;
flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
gap: .3rem; padding-bottom: .2rem;
scrollbar-width: none;
}
.kopf-nav::-webkit-scrollbar { display: none; }
.kopf-nav a { white-space: nowrap; flex: 0 0 auto; }
.gitter { grid-template-columns: 1fr !important; }
.karte[style*="sticky"] { position: static !important; }
/* Tabellen werden zu gestapelten Karten */
.tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
.tabelle thead { display: none; }
.tabelle tr {
border: 1px solid var(--linie); border-radius: 11px; background: var(--beige-50);
padding: .5rem .85rem; margin-bottom: .7rem; box-shadow: var(--schatten-sm);
}
.tabelle tbody tr:hover { background: var(--beige-50); }
.tabelle td {
border: none; padding: .4rem 0; display: flex; align-items: center; gap: 1rem;
justify-content: space-between; text-align: right; border-bottom: 1px dashed var(--linie);
}
.tabelle td:last-child { border-bottom: none; }
.tabelle td::before {
content: attr(data-label); font-weight: 700; color: var(--braun-500);
font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
text-align: left; flex: 0 0 auto;
}
.tabelle td[data-label=""]::before, .tabelle td:not([data-label])::before { content: none; }
.tabelle td[data-label="Aktionen"] { flex-wrap: wrap; justify-content: flex-end; white-space: normal !important; }
.tabelle td[data-label="Aktionen"] .btn { flex: 0 0 auto; }
.tabelle td[data-label="Gast-Link (QR)"] { flex-direction: column; align-items: flex-start; text-align: left; }
.tabelle td[data-label="Details"] { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (max-width: 640px) {
.kopf-nav a { padding: .45rem .7rem; font-size: .86rem; }
.marke small { display: none; }
.seiten-titel h1 { font-size: 1.25rem; }
.kopf-user .btn.klein { padding: .3rem .55rem; font-size: .8rem; }
}