/* ============================================================ GAESTE-LEISTE am Tisch (Runde 1 Tisch-Freigabe, 19.09.2026) Umsetzung der abgenommenen Studie design/studies/tisch-freigabe (Bilder 7, 8, 8b, 9; Notizen "Entschieden (19.09.)" 17-27). Praefix gk- wie in der Studie; die Regeln sind die der Studie, nur von "Telefonrahmen" auf die echte Seite umgestellt (position:fixed statt absolute, Hoehe der Leiste als --gk-leiste-h auf ). Laedt NUR die Tisch-Seite (index.html unter karte.sheno.de), nicht die WordPress-Karte und nicht das Dashboard. Masse und Farben nur ueber Token aus design/core/approved-tokens.css (liegt im Pages-ZIP unter design/core/), Knoepfe "Meine Bestellung" und "Bestellung abschicken" ueber den Knopfvertrag (design/core/button-contract.css). Keine Schatten. Die Zeilen im Fenster sind 1:1 die Zeilen des Kellner-Bestellfensters (modules/work/gastro_bar/bestellfenster.css, .sd-bestellfenster__zeile*), hier als gk-zeile*. ============================================================ */ /* ---------- Ruf-Farben: feste Auswahl aus sechs Token (hell lesbar mit --action-text) ---------- */ .gk-ruf.is-farbe-blau{--ruf-farbe:var(--info)} .gk-ruf.is-farbe-rot{--ruf-farbe:var(--danger)} .gk-ruf.is-farbe-gruen{--ruf-farbe:var(--success)} .gk-ruf.is-farbe-bernstein{--ruf-farbe:var(--warning)} .gk-ruf.is-farbe-schwarz{--ruf-farbe:var(--action)} .gk-ruf.is-farbe-grau{--ruf-farbe:var(--faint)} .gk-leiste svg.ikon,.gk-blatt svg.ikon,.gk-sperre svg{fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round} /* ---------- Die Seite haelt unten so viel Platz frei, wie die Leiste hoch ist ---------- */ :root{--gk-leiste-h:calc(var(--control-h-touch) + var(--space-3) * 2 + env(safe-area-inset-bottom));--gk-gruen:var(--success);--gk-ablauf:5s} body.gk-mit-leiste .sk{padding-bottom:calc(var(--gk-leiste-h) + var(--space-4))} body.gk-blatt-offen{overflow:hidden} /* ---------- Sperr-Flaeche (gesperrt / voll): unter dem Kopf der Karte, die Karte bleibt lesbar ---------- */ .gk-sperre{display:grid;justify-items:center;gap:var(--space-3);margin:var(--space-4);padding:var(--space-6) var(--space-4);border-radius:var(--radius);background:var(--warning-surface);color:var(--warning);text-align:center} .gk-sperre__kreis{display:grid;place-items:center;width:calc(var(--space-8) + var(--space-5));height:calc(var(--space-8) + var(--space-5));border-radius:50%;background:var(--surface);color:var(--warning)} .gk-sperre__kreis svg{width:var(--space-7);height:var(--space-7)} .sk .gk-sperre h2{margin:0;color:inherit;font-family:Montserrat,var(--font-family);font-size:var(--font-h2);font-weight:900;letter-spacing:-.01em;line-height:1.2;text-transform:uppercase} .gk-sperre p{max-width:30ch;margin:0;color:inherit;font-family:var(--font-family);font-size:var(--font-body);line-height:1.5} .gk-sperre p b{font-weight:var(--weight-bold)} /* ---------- Leiste unten: fast durchsichtiges Milchglas, zweistoeckig ---------- OBEN "Meine Bestellung" in voller Breite (erst ab dem ersten Produkt oder wenn schon bestellt wurde), DARUNTER die Ruf-Knoepfe (wischbar, wenn sie nicht passen). Gesperrt und voll: nur die Rufe. Beim Herunterscrollen gleitet sie weg, beim Hochscrollen und beim Hinzufuegen wieder hinein. */ .gk-leiste{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:minmax(0,1fr);gap:0;box-sizing:border-box;padding:var(--space-3) var(--space-3) calc(var(--space-3) + env(safe-area-inset-bottom));border-top:0;background:var(--surface);background:color-mix(in srgb,var(--surface) 70%,transparent);color:var(--ink);font-family:Montserrat,var(--font-family);transition:transform var(--motion-slow) var(--motion-ease)} @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ /* kein Strich oben, nur ein Hauch Flaeche (14 %) und ganz leichte Unschaerfe - die Produkte dahinter bleiben klar */ .gk-leiste{background:color-mix(in srgb,var(--surface) 14%,transparent);-webkit-backdrop-filter:blur(var(--space-1));backdrop-filter:blur(var(--space-1))} } .gk-leiste>*{width:100%;max-width:var(--content-max);margin-inline:auto} /* Eingeklappt: ganz aus dem Bild */ .gk-leiste.is-weg{transform:translateY(calc(100% + 1px))} /* "Meine Bestellung": schwarz, 1rem fett, volle Breite, Pillenform aus dem Knopfvertrag, GENAU so hoch wie die Ruf-Knoepfe (--control-h-touch), Plus vorn in der Symbolgroesse der Rufe. Leer der Name, mit Korb "4 Produkte · 19,00 €". */ .gk-leiste .gk-meine.sheno-button{display:flex;justify-content:center;align-items:center;gap:var(--space-1);box-sizing:border-box;width:100%;min-width:0;height:var(--control-h-touch);min-height:var(--control-h-touch);margin:0;padding:0 var(--space-4);border-color:var(--action);background:var(--action);color:var(--action-text);font-family:Montserrat,var(--font-family);font-size:1rem;font-weight:var(--weight-bold);white-space:nowrap;transition:transform var(--motion-fast)} .gk-leiste .gk-meine.sheno-button.is-angekommen{transform:scale(1.04)} .gk-meine>span{min-width:0;overflow:hidden;text-overflow:ellipsis} .gk-meine>svg{flex:none;width:var(--space-5);height:var(--space-5)} .gk-meine__summe::before{content:"· "} .gk-meine__summe[hidden]{display:none} /* Fach: Aufklappen ueber die Zeilenhoehe 0fr -> 1fr; zu ist es wirklich 0 hoch (Leiste = nur Rufe). */ .gk-meinefach{display:grid;grid-template-rows:1fr;min-width:0;transition:grid-template-rows var(--motion-slow) var(--motion-ease),opacity var(--motion-slow) var(--motion-ease),visibility 0s} .gk-meinefach__innen{display:flow-root;min-width:0;min-height:0} .gk-leiste .gk-meinefach .gk-meine.sheno-button{margin-bottom:var(--space-2)} .gk-meinefach.is-zu,.gk-meinefach.is-gleitet{overflow:hidden} .gk-meinefach.is-zu .gk-meinefach__innen,.gk-meinefach.is-gleitet .gk-meinefach__innen{overflow:hidden} .gk-meinefach.is-zu{grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows var(--motion-slow) var(--motion-ease),opacity var(--motion-slow) var(--motion-ease),visibility 0s linear var(--motion-slow)} /* Fenster offen: der obere Knopf ist ausgeblendet, nur die Ruf-Reihe bleibt */ .gk-leiste.is-blatt-offen .gk-meinefach{display:none} /* Ruf-Reihe: jeder Knopf mindestens ein Drittel der Breite; passt es nicht, wird die Reihe wischbar (rechter Rand blendet aus = hier geht es weiter; am Ende kein Ausblenden). */ .gk-reihe{display:flex;align-items:center;gap:var(--space-2);min-width:0;margin-block:calc(var(--space-1) * -1);padding:var(--space-1);box-sizing:border-box;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,var(--ink) calc(100% - var(--space-7)),transparent);mask-image:linear-gradient(to right,var(--ink) calc(100% - var(--space-7)),transparent)} .gk-leiste>.gk-reihe{width:calc(100% + var(--space-1) * 2);max-width:calc(var(--content-max) + var(--space-1) * 2);margin-inline:calc(var(--space-1) * -1)} @media(min-width:1008px){.gk-leiste>.gk-reihe{margin-inline:auto}} .gk-reihe::-webkit-scrollbar{display:none} .gk-reihe.is-ende{-webkit-mask-image:none;mask-image:none} .gk-reihe[hidden]{display:none} .gk-reihe>.gk-ruf{flex:1 0 calc((100% - var(--space-2) * 2) / 3);scroll-snap-align:start} .gk-ruf{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);box-sizing:border-box;min-width:0;min-height:var(--control-h-touch);margin:0;padding:0 var(--space-3);border:0;border-radius:var(--control-h-touch);background:var(--ruf-farbe,var(--faint));color:var(--action-text);font:inherit;font-size:var(--font-body);font-weight:800;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent} .gk-ruf svg{flex:none;width:var(--space-5);height:var(--space-5)} .gk-ruf:focus-visible,.gk-knopf:focus-visible,.gk-meine:focus-visible{outline:var(--focus-ring) solid var(--field-focus);outline-offset:var(--focus-ring)} /* Ruf ohne Pop-up: aktiv = die Flaeche pulsiert sanft in ihrer Farbe (Richtung --ink, die Schrift bleibt lesbar); solange ein Ruf laeuft oder die Sperre nach dem Zuruecknehmen laeuft, sind die anderen gesperrt. */ .gk-ruf.is-aktiv{outline:var(--focus-ring) solid var(--ruf-farbe);outline-offset:var(--focus-ring);animation:gk-ruf-puls 1.8s ease-in-out infinite} @keyframes gk-ruf-puls{0%,100%{background:var(--ruf-farbe)}50%{background:color-mix(in srgb,var(--ruf-farbe) 72%,var(--ink))}} .gk-ruf[aria-disabled="true"]{opacity:.45;cursor:default} .gk-ruf[aria-busy="true"]{cursor:progress} /* Statuszeile "kommt gleich" auf eigener heller Unterlage - lesbar ueber den Produkten */ .gk-rufstatus{justify-self:start;width:auto;max-width:100%;box-sizing:border-box;margin:var(--space-1) 0 0;padding:calc(var(--space-1) / 2) var(--space-2);border-radius:var(--radius-control);background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--mut);font-family:var(--font-family);font-size:var(--font-caption);font-weight:var(--weight-bold);line-height:1.3} .gk-rufstatus[hidden]{display:none} .gk-rufstatus b{color:var(--ink)} @media(min-width:1008px){.gk-rufstatus{margin-left:calc((100% - var(--content-max)) / 2)}} /* ---------- Flug: das angetippte Produkt fliegt verkleinert in "Meine Bestellung" (1:1 .sd-bestellfenster__flieger) ---------- */ .gk-flieger{position:fixed;left:var(--x0);top:var(--y0);z-index:60;display:grid;place-items:center;box-sizing:border-box;width:var(--space-8);height:var(--space-8);overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);color:var(--mut);pointer-events:none;transition:transform .45s var(--motion-ease),opacity .45s var(--motion-ease)} .gk-flieger img{width:100%;height:100%;object-fit:contain} .gk-flieger svg{width:var(--space-6);height:var(--space-6);fill:none;stroke:currentColor;stroke-width:var(--icon-stroke)} .gk-flieger.is-fliegt{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:0} /* ---------- Fenster "Meine Bestellung": von unten, direkt ueber der Leiste (die Ruf-Reihe bleibt bedienbar) ---------- */ .gk-abdunkeln[hidden],.gk-blatt[hidden]{display:none} .gk-abdunkeln{position:fixed;inset:0 0 var(--gk-leiste-h);z-index:38;background:color-mix(in srgb,var(--login-background) 55%,transparent)} .gk-blatt{position:fixed;left:0;right:0;bottom:var(--gk-leiste-h);z-index:39;display:grid;align-content:start;gap:var(--space-3);box-sizing:border-box;width:100%;max-width:var(--content-max);max-height:calc(94dvh - var(--gk-leiste-h));margin-inline:auto;overflow:auto;overscroll-behavior:contain;padding:var(--space-5) var(--space-4) var(--space-4);border-radius:var(--radius-dialog) var(--radius-dialog) 0 0;background:var(--surface);color:var(--ink);font-family:Montserrat,var(--font-family)} .gk-blatt:focus{outline:0} .gk-blatt h3{margin:0;font-size:var(--font-h1);font-weight:900;letter-spacing:-.02em;text-transform:uppercase} .gk-blatt h4{margin:var(--space-1) 0 0;color:var(--mut);font-size:var(--font-caption);font-weight:800;letter-spacing:.12em;text-transform:uppercase} .gk-blatt h4[hidden]{display:none} /* GRUEN = neu im Korb (noch nicht abgeschickt), SCHWARZ = schon bestellt */ .gk-blatt h4.gk-korb__kopf{color:var(--gk-gruen)} /* Zeilen: 1:1 .sd-bestellfenster__zeile* (Korb: nach links wischen = Loeschen); Menge fett vorn */ .gk-liste{display:grid;margin:0;padding:0;list-style:none} .gk-liste:empty{display:none} .gk-zeile{position:relative;overflow:hidden;border-top:1px solid var(--line)} .gk-zeile:first-child{border-top:0} .gk-zeile__loeschen{position:absolute;top:0;right:0;bottom:0;width:calc(var(--space-8) * 2);border:0;background:var(--danger);color:var(--action-text);font:inherit;font-family:var(--font-family);font-size:var(--font-small);font-weight:var(--weight-bold);cursor:pointer} .gk-zeile__inhalt{position:relative;display:flex;align-items:center;gap:var(--space-3);box-sizing:border-box;width:100%;min-height:calc(var(--control-h-touch) + var(--space-1));margin:0;padding:var(--space-1) 0;border:0;background:var(--surface);color:var(--ink);font:inherit;font-family:var(--font-family);font-size:1rem;font-weight:var(--weight-bold);text-align:left;touch-action:pan-y;transition:transform var(--motion-normal) var(--motion-ease),color var(--motion-slow) var(--motion-ease)} button.gk-zeile__inhalt{cursor:pointer;-webkit-tap-highlight-color:transparent} .gk-zeile.is-gewischt .gk-zeile__inhalt{transform:translateX(calc(var(--space-8) * -2))} .gk-zeile__text{min-width:0;overflow-wrap:anywhere} .gk-zeile__preis{margin-left:auto;white-space:nowrap} .gk-zeile__inhalt:focus-visible,.gk-zeile__loeschen:focus-visible{outline:var(--focus-ring) solid var(--field-focus);outline-offset:calc(var(--focus-ring) * -1)} .gk-korb .gk-zeile__inhalt{color:var(--gk-gruen)} .gk-bestellt .gk-zeile__inhalt{color:var(--ink);cursor:default;transition:transform var(--motion-normal) var(--motion-ease),color calc(var(--motion-slow) * 1.5) var(--motion-ease)} .gk-bestellt .is-kommt .gk-zeile__inhalt{color:var(--gk-gruen)} .gk-von{margin-left:var(--space-1);color:var(--mut);font-size:var(--font-small);font-weight:var(--weight-medium);white-space:nowrap} /* "Bestellung abschicken" in zwei Schritten, ohne Pop-up. 1. Tippen -> .is-bestaetigen: gruen (--success mit --action-text), Schild-Symbol, "Jetzt verbindlich bestellen · 9,50 €"; unten im Knopf laeuft ein Balken in --gk-ablauf (5 s) ab; darunter leise "zurueck in 5 s" und "Abbrechen". 2. Tippen -> abschicken (.is-sendet), dann .is-fertig: Haken zeichnet sich, "Bestellt". */ .gk-blatt .gk-abschicken.sheno-button{position:relative;gap:var(--space-2);width:100%;min-height:var(--control-h-lg);padding:0 var(--space-4);overflow:hidden;border-color:var(--action);background:var(--action);color:var(--action-text);font-family:Montserrat,var(--font-family);font-size:1rem;font-weight:var(--weight-bold);white-space:normal;line-height:1.25;text-wrap:balance;transition:background-color var(--motion-normal) var(--motion-ease),border-color var(--motion-normal) var(--motion-ease)} .gk-blatt .gk-abschicken[hidden]{display:none} .gk-abschicken__symbol{display:none;flex:none;width:var(--space-5);height:var(--space-5)} .gk-abschicken__symbol svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round} .gk-abschicken__haken{display:none;stroke-width:2.4} .gk-blatt .gk-abschicken.is-bestaetigen,.gk-blatt .gk-abschicken.is-sendet,.gk-blatt .gk-abschicken.is-fertig{border-color:var(--success);background:var(--success);color:var(--action-text)} .gk-abschicken.is-sendet{cursor:progress} .gk-abschicken.is-bestaetigen .gk-abschicken__symbol,.gk-abschicken.is-sendet .gk-abschicken__symbol,.gk-abschicken.is-fertig .gk-abschicken__symbol{display:block} .gk-abschicken.is-fertig .gk-abschicken__schild{display:none} .gk-abschicken.is-fertig .gk-abschicken__haken{display:block} .gk-abschicken__haken path{stroke-dasharray:1;stroke-dashoffset:1} .gk-abschicken.is-fertig .gk-abschicken__haken path{animation:gk-haken var(--motion-slow) var(--motion-ease) forwards} @keyframes gk-haken{to{stroke-dashoffset:0}} .gk-abschicken.is-fertig{animation:gk-bestellt var(--motion-slow) var(--motion-ease)} @keyframes gk-bestellt{50%{transform:scale(1.03)}} .gk-abschicken::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--space-1);background:currentColor;opacity:0;transform-origin:left center} .gk-abschicken.is-bestaetigen::after{opacity:.45;animation:gk-ablauf var(--gk-ablauf) linear forwards} @keyframes gk-ablauf{from{transform:scaleX(1)}to{transform:scaleX(0)}} .gk-bestaetigen{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:calc(var(--space-2) * -1)} .gk-bestaetigen[hidden]{display:none} .gk-bestaetigen__zeit{min-width:0;color:var(--mut);font-family:var(--font-family);font-size:var(--font-small);font-weight:var(--weight-medium)} .gk-bestaetigen .gk-knopf{flex:none} .gk-fehler{margin:0;color:var(--danger);font-family:var(--font-family);font-size:var(--font-small);font-weight:var(--weight-bold);line-height:1.45} .gk-fehler[hidden]{display:none} .gk-summen{display:grid;margin:0} .gk-summen div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) 0;border-top:1px solid var(--line);font-size:var(--font-body);font-weight:800} .gk-summen dt,.gk-summen dd{margin:0} .gk-summen .is-tisch{font-size:var(--font-h2);font-weight:900} .gk-blatt__hinweis{margin:0;color:var(--faint);font-family:var(--font-family);font-size:var(--font-small);line-height:1.45} .gk-knopf{box-sizing:border-box;min-width:0;min-height:var(--control-h-touch);margin:0;padding:0 var(--space-4);border:1px solid var(--line);border-radius:var(--control-h-touch);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--font-body);font-weight:800;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent} .gk-schliessen.gk-knopf{width:100%;min-height:var(--control-h-lg)} .visually-hidden.gk-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Erfolg: Zeilen gleiten per FLIP (Inline-Transform aus gast-leiste.js); Neues blendet nach dem Gleiten ein */ .gk-blatt .is-einblenden{animation:gk-einblenden var(--motion-slow) var(--motion-ease) var(--motion-slow) both} @keyframes gk-einblenden{from{opacity:0}} @media(hover:hover){ .gk-knopf:hover{background:var(--soft)} } @media (prefers-reduced-motion:reduce){ .gk-ruf.is-aktiv{animation:none;background:color-mix(in srgb,var(--ruf-farbe) 72%,var(--ink))} .gk-leiste .gk-meine.sheno-button,.gk-leiste,.gk-meinefach,.gk-meinefach.is-zu{transition:none} .gk-blatt .gk-abschicken.sheno-button,.gk-zeile__inhalt,.gk-bestellt .gk-zeile__inhalt{transition:none} .gk-abschicken.is-fertig,.gk-abschicken.is-fertig .gk-abschicken__haken path,.gk-blatt .is-einblenden{animation:none} .gk-abschicken__haken path{stroke-dashoffset:0} .gk-abschicken.is-bestaetigen::after{animation:none;opacity:0} }