/* ========================================================================== PLANBAR — gemeinsames Erscheinungsbild (Klon) Alle Farben, Abstaende und Formen haengen an den Variablen in :root. Das Modul "Themes und Branding" schreibt genau diese Variablen um. Wer die Optik aendern will, aendert hier — nicht in den Modulen. ========================================================================== */ /* -------------------------------------------------------------------------- ANGEGLICHEN AN DIE DEMO AM 10.09.2026 (Auftrag Marcel: "passe alles an die Optik von unserer Demo an"). Gemessen, nicht nach Augenmass geschaetzt: die :root-Werte und die Bausteinregeln der laufenden Demo (demo.planbar-system.de, Modul Reservierung und Bestellung) wurden ausgelesen und hier auf die Hausnamen abgebildet. Die Variablennamen bleiben unveraendert, damit jedes Modul und das Themes-Modul weiterlaufen; nur ihre WERTE kommen jetzt aus der Demo. Hinter jedem Wert steht sein Demo-Name, damit die Herkunft nachpruefbar bleibt und niemand spaeter eine Farbe "ungefaehr passend" nachzieht. Die vier Unterschiede, die den Wiedererkennungswert ausmachen: 1. Es gibt KEINE runden Ecken. --pb-radius ist 0. 2. Die Kopfleiste ist dunkel, nicht hell, mit Akzentkante unten. 3. Schatten sind weit und schwach, kein harter Rand darunter. 4. Die Hausschrift ist Zalando Sans, nicht Segoe UI. -------------------------------------------------------------------------- */ /* Die Hausschrift liegt IM Stand und wird nicht aus dem Netz geladen: ein Haus ohne Leitung bekaeme sonst eine andere Schrift als eines mit. Es ist dieselbe Datei wie auf der Webseite und in der Demo. */ @font-face { font-family: "Zalando Sans Var"; src: url("schrift/ZalandoSans-Variable.woff2") format("woff2"); font-weight: 200 900; font-stretch: 75% 125%; font-display: swap; } :root { color-scheme: light; /* --- Flaechen ------------------------------------------------------- */ --pb-papier: #fef7ec; /* Demo --paper */ --pb-flaeche: #fbfaf5; /* Demo --card */ --pb-flaeche-ruhig: #f7edda; /* Demo --paper-2 */ --pb-kraeftig: #171511; /* Demo --dark */ --pb-tief: #00363e; /* Demo --pickle */ /* --- Schrift -------------------------------------------------------- */ --pb-schrift: #171511; /* Demo --ink */ --pb-schrift-leise: rgba(23, 21, 17, .64); /* Demo --ink-faint */ --pb-schrift-hell: #fef7ec; /* Demo --cream */ /* --- Signal --------------------------------------------------------- */ --pb-akzent: #f3562e; /* Demo --accent */ --pb-akzent-hover: #d9431d; /* Demo --accent-hover */ --pb-akzent-tief: #b8371a; /* Demo --accent-ink, Hauptknoepfe */ --pb-akzent-text: #ffffff; --pb-akzent-leise: #ffb09c; /* Demo --rhubarb */ /* --- Zustandsfarben ------------------------------------------------- Die Demo kennt drei Signalfamilien: Matcha fuer Bestaetigtes, Rhabarber mit Kirsche fuer das Laute, Seetang fuer das Gedaempfte. Warn und Stopp tragen in der Demo dieselbe laute Familie; hier bleiben sie unterscheidbar, sonst kann eine Ansicht nicht mehr sagen, ob etwas nachzusehen oder gesperrt ist. Warn ist Seetang auf Papier, Stopp ist Kirsche auf Rhabarber. */ --pb-gut: #00363e; /* Demo --pickle */ --pb-gut-flaeche: #e0ebde; /* Demo --matcha */ --pb-warn: #565438; /* Demo --seaweed */ --pb-warn-flaeche: #f7edda; /* Demo --paper-2 */ --pb-stopp: #531f28; /* Demo --cherry */ --pb-stopp-flaeche: #ffb09c; /* Demo --rhubarb */ --pb-info-flaeche: #fef7ec; /* Demo --paper, Hinweis wie .note */ --pb-info-linie: #bcad96; /* Demo --almond */ /* --- Linien und Form ------------------------------------------------ */ --pb-linie: rgba(18, 41, 29, .14); /* Demo --line */ --pb-linie-stark: rgba(18, 41, 29, .28); /* Demo --line-strong */ --pb-radius: 0; /* Demo: keine runden Ecken */ --pb-schatten: 0 6px 20px -12px rgba(10, 44, 29, .22); /* --shadow-s */ --pb-schatten-weit: 0 14px 40px -18px rgba(10, 44, 29, .28); /* --shadow */ --pb-dichte: 1; /* Themes-Modul skaliert hiermit */ /* --- Typografie ----------------------------------------------------- */ --pb-familie: "Zalando Sans Var", "Zalando Sans", system-ui, "Segoe UI", Arial, sans-serif; --pb-familie-zahl: "Zalando Sans Var", "Zalando Sans", system-ui, "Segoe UI", Arial, sans-serif; --pb-grund: 15px; /* Demo body: 15px */ } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--pb-papier); color: var(--pb-schrift); font-family: var(--pb-familie); font-size: var(--pb-grund); line-height: 1.55; /* Demo body: 1.55 */ font-stretch: 100%; /* die Schrift ist eine Variable */ -webkit-font-smoothing: antialiased; } a { color: var(--pb-akzent); text-decoration: none; } a:hover { text-decoration: underline; } /* ========================================================================== Kopf des Moduls ========================================================================== */ /* Eine Leiste ueber die ganze Breite: Marke, Reiter und Kontext stehen nebeneinander, die Akzentkante schliesst sie nach unten ab. Die MASSE sind die der Demo-Topbar (11px 22px Innenabstand, 24px zwischen den Gruppen, 3px Akzent unten). Die FARBEN sind es seit dem 10.09.2026 abends nicht mehr. Hausentscheid des Inhabers, ueber die Sitzung VOLLSYSTEM weitergegeben, von ICONA umgesetzt: die obere Leiste ist auf JEDER Seite hell, nicht dunkel. Vorbild sind die Klondateien (heller Grund, dunkle Schrift, kraeftige Linie darunter), nicht mehr die Demo-Topbar. Alles, was hier bisher mit Creme auf Dunkel arbeitete (rgba(254,247,236,...)), arbeitet jetzt mit Tinte auf Hell (rgba(23,21,17,...)). Kontraste am 10.09. gerechnet auf dem Grund #fbfaf5: Tinte voll 17,4:1, Tinte 72 % 7,1:1, Tinte 64 % 5,4:1. Der Grund ist die Kartenflaeche, nicht das Papier: so bleibt die Leiste ein eigenes Band ueber dem Inhalt, und die Akzentkante trennt sie. Der Stand davor liegt als pb.css.vor-hellem-kopf-215037 daneben. */ .pb-kopf { background: var(--pb-flaeche); color: var(--pb-schrift); border-bottom: 3px solid var(--pb-akzent); padding: 11px 22px; } /* KEINE Begrenzung der Breite: in der Demo laeuft die Topbar ueber das ganze Fenster, begrenzt ist nur der Inhalt darunter. Mit einer Begrenzung auf 1280 brach die Zeile um, sobald Marke, sieben Reiter und der Kontext nebeneinander standen. */ .pb-kopf-innen { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } /* Marke: Bildmarke, Wortmarke, dann der Bereich als Chip mit duennem Rand. In der Demo steht dort "BACKOFFICE · DEMO". */ .pb-marke { display: flex; align-items: center; gap: 10px; color: var(--pb-schrift); white-space: nowrap; } .pb-marke img { height: 26px; width: auto; display: block; } .pb-marke:hover { text-decoration: none; } .pb-marke:hover .pb-wortmarke { color: var(--pb-akzent); } .pb-wortmarke { font-weight: 900; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; } .pb-modul { font: 700 10.5px/1 var(--pb-familie); letter-spacing: .12em; text-transform: uppercase; border: 1px solid rgba(23, 21, 17, .30); padding: 5px 9px; color: rgba(23, 21, 17, .80); } .pb-kopf-rechts { margin-left: auto; text-align: right; font-size: 11px; color: rgba(23, 21, 17, .72); line-height: 1.45; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; } .pb-kopf-rechts b { color: var(--pb-schrift); } .pb-kopf-lage { text-align: right; white-space: nowrap; } /* Rollenschalter: eine Pille mit duennem Rand auf hellem Grund, der gewaehlte Zustand in Akzentfarbe. Der gedrueckte Zustand traegt den TIEFEN Akzent, aus demselben Grund wie der Zaehler weiter unten: Weiss auf #f3562e erreicht 3,4:1, auf #b8371a 5,8:1, und 10px sind keine grosse Schrift. */ .pb-rollen { display: inline-flex; gap: 4px; } .pb-rolle { font: 700 10px/1 var(--pb-familie); letter-spacing: .12em; text-transform: uppercase; padding: 7px 11px; border: 1px solid rgba(23, 21, 17, .35); background: none; color: rgba(23, 21, 17, .80); cursor: pointer; border-radius: var(--pb-radius); } .pb-rolle:hover { color: var(--pb-schrift); border-color: var(--pb-schrift); } .pb-rolle[aria-pressed="true"] { background: var(--pb-akzent-tief); color: var(--pb-akzent-text); border-color: var(--pb-akzent-tief); } /* ========================================================================== Reiterleiste ========================================================================== */ /* Die Reiter sitzen IN der Kopfleiste: gedaempfte Tinte, der gewaehlte in voller Tinte mit Akzentkante darunter. Kein eigener Grund, kein eigener Rand: die Leiste ist Teil des Kopfes und geht mit ihm hell (Hausentscheid 10.09.2026 abends, "Reiterleiste mit"). KEIN sticky, obwohl die Demo ihre Topbar klebt: dieser Stand traegt oben das Staging-Band, und zwei geklebte Leisten legen sich uebereinander. */ .pb-reiter { flex: 1 1 auto; min-width: 0; } .pb-reiter-innen { display: flex; gap: 2px; flex-wrap: wrap; } .pb-reiter button { appearance: none; background: none; border: 0; cursor: pointer; font: 600 13.5px/1 var(--pb-familie); color: rgba(23, 21, 17, .72); padding: 9px 11px; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; } .pb-reiter button:hover { color: var(--pb-schrift); } .pb-reiter button[aria-selected="true"] { border-bottom-color: var(--pb-akzent); color: var(--pb-schrift); } /* Der Zaehler traegt den TIEFEN Akzent, nicht den hellen: gemessen am 10.09. erreicht Weiss auf #f3562e nur 3,4:1, und 10px sind keine grosse Schrift. Auf #b8371a sind es 5,8:1. Dieselbe Farbfamilie, lesbar. */ .pb-zahl { display: inline-block; min-width: 16px; text-align: center; background: var(--pb-akzent-tief); color: var(--pb-akzent-text); font: 800 10px/16px var(--pb-familie); border-radius: var(--pb-radius); padding: 0 5px; letter-spacing: .04em; } /* Der ruhige Zaehler steht seit dem 10.09. abends auf HELLEM Grund und braucht deshalb einen leichten Tintenton, keine helle Flaeche: die waere auf Hell unsichtbar. Tinte auf dem Zehn-Prozent-Ton: 14,2:1. */ .pb-zahl.ruhig { background: rgba(23, 21, 17, .10); color: var(--pb-schrift); } /* ========================================================================== Grundgerüst ========================================================================== */ .pb-bahn { max-width: 1280px; margin: 0 auto; padding: 26px 22px 64px; } .pb-bahn.schmal { max-width: 900px; } .pb-blatt { display: none; } .pb-blatt.aktiv { display: block; } /* Der Titel des Blattes steht in der Demo gross im Inhalt, nicht in der Leiste: 1.7rem, 800, eng gesetzt, daneben in kleiner Schrift der Beitext. Das ist der Platz, an dem in der Demo "Uebersicht MITARBEITER" steht. */ .pb-kopfzeile { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; } .pb-kopfzeile h2 { margin: 0; font-size: calc(27px * var(--pb-dichte)); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; } .pb-kopfzeile p { margin: 0; color: var(--pb-schrift-leise); font-size: 13px; } .pb-kopfzeile .rechts { margin-left: auto; } /* Bedienelemente in der Kopfzeile stehen NEBENeinander. Ohne diese Regel zieht die allgemeine Formularregel (width: 100%) jedes Auswahlfeld auf die volle Breite, und die Reihe bricht in drei Zeilen um. */ .pb-kopfzeile .rechts select, .pb-kopfzeile .rechts input { width: auto; min-width: 150px; } .pb-kopfzeile .rechts > .pb-werkzeug { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; } /* Die Rollenpille am Titel (Demo: .role-chip). Matcha fuer die Mitarbeitersicht, Rhabarber fuer die Leitung: wer mehr darf, sieht es. */ .pb-rollenpille { align-self: center; font: 800 10px/1 var(--pb-familie); letter-spacing: .12em; text-transform: uppercase; background: var(--pb-gut-flaeche); color: var(--pb-tief); padding: 5px 8px; white-space: nowrap; } .pb-rollenpille:is([data-leitung], .leitung) { background: var(--pb-akzent-leise); color: var(--pb-stopp); } /* ========================================================================== Handlungsreihe In der Demo stehen die Handlungen eines Blattes als Reihe gleich breiter Knoepfe unter den Kennzahlen (.action-btn), der erste gefuellt. Sie sind damit das zweite, was man sieht, und nicht klein an den Rand geschoben. ========================================================================== */ .pb-handlungen { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; } .pb-handlung { flex: 1 1 0; min-width: 200px; appearance: none; cursor: pointer; background: var(--pb-flaeche); border: 1px solid var(--pb-linie-stark); color: var(--pb-schrift); font: 800 14.5px/1.2 var(--pb-familie); padding: 15px 18px; border-radius: var(--pb-radius); min-height: 52px; box-shadow: var(--pb-schatten); text-align: center; } .pb-handlung:hover { border-color: var(--pb-schrift); } .pb-handlung.haupt { background: var(--pb-akzent-tief); border-color: var(--pb-akzent-tief); color: var(--pb-akzent-text); } .pb-handlung.haupt:hover { background: #8f2a12; border-color: #8f2a12; } /* ========================================================================== Karten und Raster ========================================================================== */ .pb-karte { background: var(--pb-flaeche); border: 1px solid var(--pb-linie); border-radius: var(--pb-radius); box-shadow: var(--pb-schatten); padding: calc(14px * var(--pb-dichte)) 16px; margin-bottom: 14px; } .pb-karte > h3 { margin: 0 0 12px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--pb-schrift); font-weight: 800; } .pb-karte > h3 .leise { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--pb-schrift-leise); font-size: 12.5px; margin-left: 8px; } .pb-gitter { display: grid; gap: 12px; } .pb-gitter.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .pb-gitter.g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .pb-gitter.g4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .pb-gitter.g5 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* KPI-Kachel — in der Demo .stat-card: Zahl gross und fett, darunter die Marke in Versalien, alles auf Kartenfarbe mit weitem, schwachem Schatten. */ .pb-kpi { background: var(--pb-flaeche); border: 1px solid var(--pb-linie); border-radius: var(--pb-radius); padding: 14px 16px; box-shadow: var(--pb-schatten); display: flex; flex-direction: column; gap: 2px; } .pb-kpi .marke { font: 700 11px/1.3 var(--pb-familie); letter-spacing: .09em; text-transform: uppercase; color: var(--pb-schrift-leise); } .pb-kpi .wert { font: 800 calc(27px * var(--pb-dichte))/1.1 var(--pb-familie); margin: 0; letter-spacing: -.02em; } /* Der Nenner steht kleiner und leiser als der Zaehler (Demo: .stat-num small). */ .pb-kpi .wert small { font-size: 16px; color: var(--pb-schrift-leise); font-weight: 700; } .pb-kpi-flaeche.stopp .wert small { color: var(--pb-stopp); opacity: .8; } /* Tagesnavigation rechts in der Kopfzeile (Demo: Pfeil, Tag, Pfeil, Datum). */ .pb-tagnav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pb-tagnav .pb-knopf { min-width: 44px; padding: 10px 12px; } .pb-tagnav .tag { text-align: center; line-height: 1.25; } .pb-tagnav .tag b { display: block; font-size: 15px; font-weight: 800; } .pb-tagnav .tag span { font-size: 12px; color: var(--pb-schrift-leise); } .pb-tagnav input[type=date] { width: auto; min-width: 160px; } .pb-kpi .wert.akzent { color: var(--pb-akzent); } .pb-kpi .wert.gut { color: var(--pb-gut); } .pb-kpi .wert.warn { color: var(--pb-warn); } .pb-kpi .wert.stopp { color: var(--pb-stopp); } .pb-kpi .fuss { font-size: 11.5px; color: var(--pb-schrift-leise); font-weight: 600; } /* Die ganze Kachel eingefaerbt, wie in der Demo bei "3/4 Mitarbeiter eingeteilt": Flaeche Rhabarber, Schrift Kirsche, Rand in der Schriftfarbe. Nur fuer die Zahl gedacht, die eine Entscheidung verlangt. */ .pb-kpi-flaeche.stopp { background: var(--pb-stopp-flaeche); border-color: var(--pb-stopp); } .pb-kpi-flaeche.stopp .wert, .pb-kpi-flaeche.stopp .marke, .pb-kpi-flaeche.stopp .fuss { color: var(--pb-stopp); } .pb-kpi-flaeche.gut { background: var(--pb-gut-flaeche); border-color: var(--pb-gut); } .pb-kpi-flaeche.gut .wert, .pb-kpi-flaeche.gut .marke, .pb-kpi-flaeche.gut .fuss { color: var(--pb-gut); } .pb-kpi.dunkel { background: var(--pb-kraeftig); border-color: var(--pb-kraeftig); color: var(--pb-schrift-hell); } .pb-kpi.dunkel .marke, .pb-kpi.dunkel .fuss { color: rgba(254, 247, 236, .66); } /* ========================================================================== Tabellen ========================================================================== */ .pb-tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; } .pb-tabelle th { text-align: left; font: 700 10.5px/1.4 var(--pb-familie); letter-spacing: .09em; text-transform: uppercase; color: var(--pb-schrift-leise); padding: 9px 10px; border-bottom: 1px solid var(--pb-linie-stark); white-space: nowrap; } .pb-tabelle td { padding: 10px; border-bottom: 1px solid var(--pb-linie); vertical-align: middle; } .pb-tabelle tr:last-child td { border-bottom: 0; } .pb-tabelle tbody tr:hover { background: var(--pb-flaeche-ruhig); } .pb-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .pb-tabelle .leise { color: var(--pb-schrift-leise); font-size: 12px; } .pb-tabelle td b { font-weight: 700; } .pb-rollbar { overflow-x: auto; } /* ========================================================================== Marken / Etiketten ========================================================================== */ /* Das Etikett der Demo (.badge): kleiner, fetter, weit gesperrt, ohne Rundung. Matcha fuer Bestaetigtes, Rhabarber fuer das Laute. */ .pb-etikett { display: inline-block; padding: 4px 8px; border-radius: var(--pb-radius); font: 800 10px/1.4 var(--pb-familie); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; background: var(--pb-flaeche-ruhig); color: var(--pb-schrift-leise); border: 1px solid var(--pb-linie); } .pb-etikett.akzent { background: var(--pb-akzent-tief); color: var(--pb-akzent-text); border-color: var(--pb-akzent-tief); } .pb-etikett.gut { background: var(--pb-gut-flaeche); color: var(--pb-gut); border-color: #cfdfca; } .pb-etikett.warn { background: var(--pb-warn-flaeche); color: var(--pb-warn); border-color: var(--pb-info-linie); } .pb-etikett.stopp { background: var(--pb-stopp-flaeche); color: var(--pb-stopp); border-color: var(--pb-stopp); } .pb-etikett.tief { background: var(--pb-tief); color: var(--pb-schrift-hell); border-color: var(--pb-tief); } .pb-etikett.schwarz{ background: var(--pb-kraeftig); color: var(--pb-schrift-hell); border-color: var(--pb-kraeftig); } /* ========================================================================== Knöpfe ========================================================================== */ /* Der Knopf der Demo (.btn): duenner Rand in Linienfarbe, Kartenflaeche, 44 Pixel hoch IMMER und nicht erst am Tablet, beim Ueberfahren wird der Rand zur Schriftfarbe. Der Hauptknopf traegt das dunklere Accent-Ink, damit weisse Schrift darauf sicher lesbar ist. */ .pb-knopf { appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 700 13px/1 var(--pb-familie); padding: 10px 16px; border-radius: var(--pb-radius); min-height: 44px; border: 1px solid var(--pb-linie-stark); background: var(--pb-flaeche); color: var(--pb-schrift); } .pb-knopf:hover { background: var(--pb-flaeche); border-color: var(--pb-schrift); } .pb-knopf.haupt { background: var(--pb-akzent-tief); border-color: var(--pb-akzent-tief); color: var(--pb-akzent-text); } .pb-knopf.haupt:hover { background: #8f2a12; border-color: #8f2a12; } .pb-knopf.klein { font-size: 11px; padding: 6px 11px; min-height: 36px; letter-spacing: .02em; } /* Fingerbedienung. Auf Geraeten ohne Mauszeiger bekommt jeder Knopf eine Trefferflaeche von 44 Pixeln; darunter wird danebengetippt. Erkannt wird das am Zeigegeraet, nicht an der Fensterbreite: ein iPad quer ist so breit wie ein kleiner Rechner. */ @media (pointer: coarse) { /* Der gewoehnliche Knopf ist seit dem Angleich an die Demo ohnehin 44px hoch. Am Finger waechst nur, was kleiner gesetzt ist. */ .pb-knopf.klein { min-height: 44px; padding: 10px 14px; font-size: 12.5px; } .pb-schalter button { min-height: 44px; padding: 10px 15px; } .ue-karte, .hw-bon, .gk, .bon { -webkit-tap-highlight-color: rgba(232, 80, 42, .12); } .gr-tisch { touch-action: none; } } .pb-knopf.leise { border-color: var(--pb-linie-stark); color: var(--pb-schrift-leise); font-weight: 600; } .pb-knopf[disabled] { opacity: .45; cursor: not-allowed; } .pb-knopfreihe { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* Schalterreihe (Filter) */ /* Filterschalter — in der Demo .chip: 40 Pixel hoch, fett, gewaehlt in Tinte auf Creme. */ .pb-schalter { display: inline-flex; flex-wrap: wrap; gap: 6px; } .pb-schalter button { appearance: none; cursor: pointer; background: var(--pb-flaeche); border: 1px solid var(--pb-linie-stark); border-radius: var(--pb-radius); font: 700 12.5px/1 var(--pb-familie); padding: 10px 14px; min-height: 40px; color: var(--pb-schrift); } .pb-schalter button:hover { border-color: var(--pb-schrift); } .pb-schalter button[aria-pressed="true"] { background: var(--pb-kraeftig); color: var(--pb-schrift-hell); border-color: var(--pb-kraeftig); } /* ========================================================================== Formularfelder ========================================================================== */ .pb-feld { margin-bottom: 10px; } .pb-feld > label { display: block; font: 700 9.5px/1.4 var(--pb-familie); letter-spacing: .12em; text-transform: uppercase; color: var(--pb-schrift-leise); margin-bottom: 3px; } .pb-feld > .hinweis { font-size: 11px; color: var(--pb-schrift-leise); margin-top: 3px; } input[type=text], input[type=number], input[type=date], input[type=time], input[type=email], input[type=tel], input[type=search], select, textarea { width: 100%; font: 500 13.5px/1.3 var(--pb-familie); color: var(--pb-schrift); background: var(--pb-flaeche); border: 1px solid var(--pb-linie-stark); border-radius: var(--pb-radius); padding: 10px 11px; min-height: 44px; } textarea { min-height: 70px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--pb-akzent); outline-offset: -1px; } textarea { min-height: 70px; resize: vertical; } input.klein, select.klein { padding: 4px 6px; font-size: 12px; } .pb-eng { max-width: 110px; } /* ========================================================================== Hinweisbänder ========================================================================== */ /* Das Hinweisband der Demo (.note): drei Pixel Kante links auf Papier, kein eingefaerbter Kasten. Nur das Laute (stopp) traegt Flaeche. */ .pb-band { border-left: 3px solid var(--pb-info-linie); background: var(--pb-papier); padding: 11px 14px; border-radius: var(--pb-radius); font-size: 13px; margin-bottom: 14px; } .pb-band.gut { border-left-color: var(--pb-gut); background: var(--pb-gut-flaeche); } .pb-band.warn { border-left-color: var(--pb-warn); background: var(--pb-warn-flaeche); } .pb-band.stopp { border-left-color: var(--pb-stopp); background: var(--pb-stopp-flaeche); color: var(--pb-stopp); } .pb-band.info { border-left-color: var(--pb-akzent); background: var(--pb-info-flaeche); } /* Der Kasten, der eine Entscheidung verlangt: in der Demo ein duenner Akzentrahmen RUNDUM, nicht nur eine Kante links, und darin eine Kopfzeile mit Warnzeichen. Er hebt sich damit von den Hinweisbaendern ab, die man nur liest. */ .pb-kasten { border: 1px solid var(--pb-akzent); background: var(--pb-flaeche); padding: 14px 16px; margin: 0 0 18px; } .pb-kasten > .kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; } .pb-kasten > .kopf b { font-size: 14.5px; font-weight: 800; } .pb-kasten > .kopf .rechts { margin-left: auto; font-size: 12.5px; color: var(--pb-akzent); } .pb-band b { font-weight: 700; } /* ========================================================================== Balken / Fortschritt ========================================================================== */ .pb-balken { height: 8px; background: var(--pb-flaeche-ruhig); border: 1px solid var(--pb-linie); border-radius: 0; overflow: hidden; min-width: 70px; } .pb-balken > span { display: block; height: 100%; background: var(--pb-akzent); } .pb-balken.gut > span { background: var(--pb-gut); } .pb-balken-zeile { display: flex; align-items: center; gap: 8px; } .pb-balken-zeile .wert { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; } /* Ampel */ .pb-ampel { display: flex; height: 10px; border-radius: 0; overflow: hidden; } .pb-ampel i { display: block; height: 100%; } /* ========================================================================== Listen mit Zeitmarke (Diese Woche, Protokoll, Verlauf) ========================================================================== */ .pb-verlauf { list-style: none; margin: 0; padding: 0; } .pb-verlauf li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--pb-linie); font-size: 12.5px; } .pb-verlauf li:last-child { border-bottom: 0; } .pb-verlauf .marke { flex: 0 0 auto; min-width: 66px; font: 700 9.5px/1.6 var(--pb-familie); letter-spacing: .08em; text-transform: uppercase; color: var(--pb-schrift-leise); } /* ========================================================================== Fuß ========================================================================== */ .pb-fuss { border-top: 1px solid var(--pb-linie); margin-top: 24px; padding: 14px 20px 30px; font-size: 11.5px; color: var(--pb-schrift-leise); } .pb-fuss-innen { max-width: 1280px; margin: 0 auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .pb-fuss .rechts { margin-left: auto; } .pb-claim { font: 700 10px/1 var(--pb-familie); letter-spacing: .16em; text-transform: uppercase; } /* schwarzes Band ganz unten (Demo-Warnung) */ .pb-demoband { position: fixed; right: 0; bottom: 0; z-index: 40; background: var(--pb-kraeftig); color: var(--pb-schrift-hell); font: 700 9.5px/1 var(--pb-familie); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; } /* ========================================================================== Hilfsklassen ========================================================================== */ .pb-leise { color: var(--pb-schrift-leise); } .pb-klein { font-size: 11.5px; } .pb-mono { font-family: var(--pb-familie-zahl); font-variant-numeric: tabular-nums; } .pb-rechts { text-align: right; } .pb-mitte { text-align: center; } .pb-zahlen { font-variant-numeric: tabular-nums; } .pb-nowrap { white-space: nowrap; } .pb-abstand { margin-top: 14px; } /* Kein Wert vorhanden. Bewusst leise und ohne Zahl: ein Strich sagt nichts Falsches, eine Null saehe aus wie ein Ergebnis. */ .pb-leer { color: var(--pb-schrift-leise); font-style: italic; } .pb-trenn { border: 0; border-top: 1px solid var(--pb-linie); margin: 14px 0; } .pb-flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pb-wachs { flex: 1 1 auto; } .pb-versteckt { display: none !important; } @media print { .pb-reiter, .pb-rollen, .pb-demoband, .pb-knopf { display: none !important; } body { background: #fff; } .pb-blatt { display: block !important; } } /* ========================================================================== Bonbrett — die Bestelluebersicht des Tages Eine Leiste je Ankunftszeit in PLANBAR-Orange, darin stecken die Bons der Tische, die zu dieser Zeit kommen. Der Bon haengt nicht an der Leiste, er ist von unten hineingeschoben und wird von ihr gehalten: sein oberer Rand verschwindet hinter der Leiste. Deshalb liegt die Leiste in der Stapelung ueber den Bons und die Bonreihe ragt mit negativem Abstand unter sie. Der Papierrand unten ist eine Maske, kein Bild. Deshalb traegt der Bon keinen Rahmen, sondern der Halter darum einen Schlagschatten; ein drop-shadow folgt der Maskenform, ein box-shadow wuerde mit abgeschnitten. ========================================================================== */ .bon-brett { margin-bottom: 30px; } /* 14.09.2026, Ansage Marcel: die Bonleiste feiner. Flacher (7 statt 11 px), kleinere Zeit (17 statt 22 px), leichterer Zaehler, keine Kantenpraegung mehr, nur ein leiser Schatten. Sie bleibt das Hauptelement, tritt aber nicht mehr so wuchtig vor die Bons. */ .bon-leiste { position: relative; z-index: 3; display: flex; align-items: center; gap: 12px; background: var(--pb-akzent); color: var(--pb-akzent-text); padding: 7px 14px; border-radius: 0; box-shadow: 0 2px 5px rgba(20, 17, 15, .18); } .bon-leiste .zeit { font: 800 17px/1 var(--pb-familie); font-stretch: 108%; letter-spacing: -.005em; } .bon-leiste .fuell { flex: 1; } .bon-leiste .zaehler { font: 600 11.5px/1 var(--pb-familie); letter-spacing: .08em; text-transform: uppercase; opacity: .95; } /* --schub: wie tief der Bon in der Leiste steckt. */ .bon-reihe { --schub: 16px; display: flex; flex-wrap: wrap; gap: 16px; padding: 0 8px; margin-top: calc(var(--schub) * -1); } .bon-halter { position: relative; z-index: 1; } /* 14.09.2026 (Ansage Marcel): keine Zickzack-Kante mehr unten am Bon. Der Bon ist eine ruhige Karte mit Rand und leisem Schatten; der Verlauf oben bleibt der Schatten der Leiste auf dem Papier. */ .bon { width: 208px; color: var(--pb-schrift); font-family: var(--pb-familie-zahl); font-size: 12px; line-height: 1.5; padding: calc(16px + 13px) 13px 14px; background: #fffefb linear-gradient(rgba(20, 17, 15, .16), rgba(20, 17, 15, 0) 22px); border: 1px solid var(--pb-linie-stark); border-top: 0; box-shadow: 0 3px 8px rgba(20, 17, 15, .14); } .bon .tisch { font: 800 17px/1.1 var(--pb-familie); font-stretch: 108%; } .bon .gast { font-size: 11.5px; color: var(--pb-schrift-leise); margin-bottom: 9px; } .bon .trenn { border-top: 1px dashed #c9bda6; margin: 0 0 7px; } .bon .gang { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--pb-akzent); margin: 8px 0 2px; font-family: var(--pb-familie); font-weight: 700; } .bon .zeile { display: flex; gap: 7px; align-items: baseline; } .bon .zeile b { min-width: 20px; } .bon .offen { color: var(--pb-warn); font-family: var(--pb-familie); font-size: 11.5px; margin: 6px 0 2px; } .bon .fuss { margin-top: 10px; padding-top: 6px; border-top: 1px dashed #c9bda6; font-size: 10px; color: var(--pb-schrift-leise); display: flex; gap: 6px; align-items: center; } .bon .fuss .rechts { margin-left: auto; } /* Uebergabe an die Kasse: der Knopf sitzt unten auf dem Bon selbst. */ .bon .uebergabe { margin-top: 10px; } .bon .uebergabe .pb-knopf { width: 100%; justify-content: center; font-size: 11.5px; letter-spacing: .04em; padding: 9px 8px; } .bon .schon { margin-top: 10px; padding: 8px; text-align: center; background: var(--pb-gut-flaeche); color: var(--pb-gut); font-family: var(--pb-familie); font-size: 11px; font-weight: 700; letter-spacing: .04em; } @media (max-width: 560px) { .bon { width: 100%; } .bon-reihe { gap: 20px; } } /* ========================================================================== Reservierungskarte — die Uebersicht des Tages Steht bisher nur im Reservierungswerkzeug. Sie wird jetzt auch in der Kachel Service gebraucht, deshalb liegt sie hier und nicht zweimal. Die Farbe links am Rand ist der Stand: erwartet, am Tisch, an der Kasse. ========================================================================== */ .rs-karte { border: 1px solid var(--pb-linie); border-radius: var(--pb-radius); background: var(--pb-flaeche); margin-bottom: 10px; overflow: hidden; } .rs-karte > .kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 9px 12px; background: var(--pb-flaeche-ruhig); border-bottom: 1px solid var(--pb-linie); } .rs-karte > .kopf .zeit { font: 700 16px/1 var(--pb-familie); min-width: 52px; } .rs-karte > .kopf .wachs { flex: 1; } .rs-karte > .leib { padding: 10px 12px; } .rs-karte.erwartet { border-left: 4px solid var(--pb-linie-stark); } .rs-karte.amTisch { border-left: 4px solid var(--pb-gut); } .rs-karte.uebernommen { border-left: 4px solid var(--pb-akzent); } .rs-karte.abgerechnet { opacity: .6; } /* ========================================================================== Uebersicht des Tages — Kopf, Handlungsreihe, offene Speisenauswahl Der Kopf traegt links den Titel mit der Rollenpille und rechts die Tagesnavigation. Darunter vier Kennzahlen, dann die Handlungsreihe, dann der Kasten mit den Personen, die noch nicht gewaehlt haben. Der Kasten ist der einzige Ort in der Uebersicht mit Akzentrahmen: er verlangt eine Entscheidung, alles andere ist Anzeige. ========================================================================== */ .ub-kopf { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .ub-kopf h2 { margin: 0; font-size: 25px; font-weight: 800; font-stretch: 108%; letter-spacing: -.015em; } .ub-kopf .pille { font: 700 9.5px/1 var(--pb-familie); letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px; border-radius: 0; background: var(--pb-flaeche-ruhig); color: var(--pb-schrift-leise); border: 1px solid var(--pb-linie); align-self: center; } .ub-datum { margin-left: auto; display: flex; align-items: center; gap: 8px; } .ub-datum .pfeil { width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; } .ub-datum .tag { text-align: center; min-width: 148px; line-height: 1.25; } .ub-datum .tag b { display: block; font-size: 14px; } .ub-datum .tag small { color: var(--pb-schrift-leise); font-size: 11px; } .ub-datum input { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--pb-linie-stark); border-radius: var(--pb-radius); background: var(--pb-flaeche); color: var(--pb-schrift); } .ub-handlungen { display: grid; gap: 10px; margin: 16px 0 18px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); } .ub-handlungen .pb-knopf { width: 100%; justify-content: center; text-align: center; padding: 13px 12px; font-size: 13.5px; } .ub-offen { border: 2px solid var(--pb-akzent); border-radius: var(--pb-radius); background: var(--pb-flaeche); margin-bottom: 18px; overflow: hidden; } .ub-offen > .kopf { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 9px 14px; background: var(--pb-akzent-leise); border-bottom: 1px solid var(--pb-akzent); } .ub-offen > .kopf b { font-size: 13.5px; color: var(--pb-akzent); } .ub-offen > .kopf .frist { margin-left: auto; font-size: 12px; color: var(--pb-schrift-leise); } .ub-offen > .fuss { padding: 9px 14px; border-top: 1px solid var(--pb-linie); background: var(--pb-flaeche-ruhig); font-size: 12px; color: var(--pb-schrift-leise); line-height: 1.5; } .ub-zeile { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; padding: 12px 14px; border-bottom: 1px solid var(--pb-linie); } .ub-zeile:last-of-type { border-bottom: 0; } .ub-zeile .wer { flex: 1 1 260px; } .ub-zeile .wer b { font-size: 14px; } .ub-zeile .wer .platz { font-size: 12px; color: var(--pb-schrift-leise); margin-top: 2px; } .ub-zeile .tel { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 12.5px; color: var(--pb-akzent); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } .ub-zeile .tel svg { width: 13px; height: 13px; } .ub-zeile .tel.leer { color: var(--pb-schrift-leise); text-decoration: none; } .ub-zeile .rat { flex: 0 1 auto; margin-left: auto; text-align: right; } .ub-zeile .rat .was { font-size: 12.5px; margin-bottom: 6px; } .ub-zeile .rat .was b { font-weight: 700; } .ub-zeile .rat .db { color: var(--pb-schrift-leise); } .ub-zeile .rat .pb-knopfreihe { justify-content: flex-end; } @media (max-width: 620px) { .ub-datum { margin-left: 0; width: 100%; } .ub-zeile .rat { margin-left: 0; text-align: left; } .ub-zeile .rat .pb-knopfreihe { justify-content: flex-start; } } /* ========================================================================== Trenner zwischen Kundenansicht und Arbeitsstand Oben auf einem Modulblatt steht, was der Kunde spaeter sieht. Unten steht die Notiz dazu: Vorgabe, Herkunft, Luecken. Der Trenner muss diese Grenze deutlich ziehen, sonst liest jemand die Notiz als Teil des Produkts. ========================================================================== */ .dr-trenner { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 40px 0 16px; padding-top: 14px; border-top: 2px dashed var(--pb-linie-stark); } .dr-trenner span { font: 700 10px/1 var(--pb-familie); letter-spacing: .16em; text-transform: uppercase; color: var(--pb-schrift-leise); } .dr-trenner small { font-size: 11.5px; color: var(--pb-schrift-leise); } /* ========================================================================== Gaestekartei — wer heute Abend im Haus ist Dieselben Bonleisten wie die Bestelluebersicht, eine je Ankunftszeit. Darin steckt statt des Bons die Kartei des Hauptreservierenden, in der Optik der Kartenreihe aus der PLANBAR-Demo: weisser Grund, weicher Rand, runde Ecken, Symbol im farbigen Quadrat, Merkmalspille rechts oben, Merkmale als Chips, unten der Handlungslink. Die obere Kante traegt die Farbe des Anlasses. Welches Merkmal welche Farbe ergibt, steht als ausdrueckliche Tabelle im Zeichner, nicht als Wortsuche. ========================================================================== */ .gk-reihe { --schub: 18px; display: grid; gap: 16px; padding: 0 6px; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); margin-top: calc(var(--schub) * -1); } .gk { position: relative; z-index: 1; display: flex; flex-direction: column; background: var(--pb-flaeche); border: 1px solid var(--pb-linie); border-top: 4px solid var(--pb-linie-stark); border-radius: 0; padding: calc(18px + 16px) 20px 18px; box-shadow: 0 1px 3px rgba(20, 17, 15, .05); } .gk.gut { border-top-color: var(--pb-gut); } .gk.akzent { border-top-color: var(--pb-akzent); } .gk.warn { border-top-color: var(--pb-warn); } .gk.stopp { border-top-color: var(--pb-stopp); } .gk.feier { border-top-color: var(--pb-tief); } .gk-kopf { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; } .gk-symbol { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 0; background: var(--pb-flaeche-ruhig); color: var(--pb-schrift-leise); display: flex; align-items: center; justify-content: center; } .gk-symbol svg { width: 22px; height: 22px; display: block; } .gk.gut .gk-symbol { background: var(--pb-gut-flaeche); color: var(--pb-gut); } .gk.akzent .gk-symbol { background: var(--pb-akzent-leise); color: var(--pb-akzent); } .gk.warn .gk-symbol { background: var(--pb-warn-flaeche); color: var(--pb-warn); } .gk.stopp .gk-symbol { background: var(--pb-stopp-flaeche); color: var(--pb-stopp); } .gk.feier .gk-symbol { background: #e0ebde; color: var(--pb-tief); } .gk-pille { margin-left: auto; font: 700 10px/1 var(--pb-familie); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 0; white-space: nowrap; background: var(--pb-flaeche-ruhig); color: var(--pb-schrift-leise); border: 1px solid var(--pb-linie); } .gk.gut .gk-pille { background: var(--pb-gut-flaeche); color: var(--pb-gut); border-color: rgba(28, 107, 66, .30); } .gk.akzent .gk-pille { background: var(--pb-akzent-leise); color: var(--pb-akzent); border-color: rgba(232, 80, 42, .30); } .gk.warn .gk-pille { background: var(--pb-warn-flaeche); color: var(--pb-warn); border-color: rgba(180, 84, 26, .30); } .gk.stopp .gk-pille { background: var(--pb-stopp-flaeche); color: var(--pb-stopp); border-color: rgba(179, 45, 28, .30); } .gk.feier .gk-pille { background: #e0ebde; color: var(--pb-tief); border-color: rgba(15, 76, 64, .30); } .gk h4 { margin: 0 0 4px; font-size: 20px; font-weight: 800; font-stretch: 106%; letter-spacing: -.01em; color: var(--pb-schrift); } .gk .platz { font-size: 13.5px; line-height: 1.5; color: var(--pb-schrift-leise); margin-bottom: 12px; } .gk .vermerk { font-size: 12.5px; line-height: 1.5; color: var(--pb-akzent); margin: -8px 0 12px; } .gk .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; } .gk .chip { font-size: 12.5px; line-height: 1.25; padding: 6px 11px; border-radius: 0; background: var(--pb-flaeche-ruhig); color: var(--pb-schrift); } .gk .zahlen { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; } .gk .zahlen div { font-size: 12.5px; color: var(--pb-schrift-leise); } .gk .zahlen b { display: block; font: 700 15px/1.2 var(--pb-familie); color: var(--pb-schrift); } .gk .achtung { font-size: 12.5px; line-height: 1.5; color: var(--pb-stopp); font-weight: 700; margin-bottom: 12px; } .gk .ohne { font-size: 12.5px; line-height: 1.5; color: var(--pb-schrift-leise); margin-bottom: 12px; } .gk .tuer { margin-top: auto; padding-top: 4px; font: 700 13.5px/1 var(--pb-familie); } .gk .tuer a { color: var(--pb-akzent); text-decoration: none; } .gk .tuer a:hover { text-decoration: underline; } @media (max-width: 560px) { .gk-reihe { grid-template-columns: 1fr; } } /* ========================================================================== Gastraum — der Tischeditor im System Derselbe Zeichner wie im Raumplaner der Webseite (pb-raum.js). Die Lage eines Tisches ist zweidimensional in Prozent, nur die Zeichnung ist raeumlich; dadurch bleibt das Verschieben berechenbar. Die Reihenfolge des Malens macht der Zeichner ueber die Standlinie, nicht die CSS: was weiter hinten steht, wird zuerst gemalt. z-index wird deshalb nur fuer die Auswahl gesetzt. ========================================================================== */ .gr-raum { margin-bottom: 0; } .gr-flaeche { position: absolute; inset: 0; } .gr-stueck { position: absolute; transform: translate(-50%, -50%); } .gr-tisch { cursor: grab; } .gr-tisch:active { cursor: grabbing; } .gr-stueck svg { display: block; overflow: visible; } /* Der Zustand faerbt den Boden unter dem Tisch, nicht den Tisch selbst: die Moebel sollen ueberall gleich aussehen. */ .gr-grund { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; } .gr-grund.frei { background: rgba(107, 100, 89, .10); } .gr-grund.erwartet { background: rgba(232, 80, 42, .16); } .gr-grund.amTisch { background: rgba(28, 107, 66, .20); } .gr-grund.uebernommen { background: rgba(232, 80, 42, .30); } .gr-grund.gewaehlt { box-shadow: 0 0 0 3px var(--pb-kraeftig); } .gr-schild { position: absolute; transform: translate(-50%, 0); text-align: center; pointer-events: none; white-space: nowrap; font: 700 11px/1.3 var(--pb-familie); color: var(--pb-schrift); } .gr-schild small { display: block; font-weight: 400; font-size: 10px; color: var(--pb-schrift-leise); } .gr-schild .deck { display: inline-block; margin-left: 3px; color: var(--pb-gut); } /* Der Auswahlkasten steht unter dem Raum, in dem der Tisch liegt. */ .gr-wahl { position: relative; z-index: 5; border: 2px solid var(--pb-kraeftig); border-radius: var(--pb-radius); background: var(--pb-flaeche); margin-top: 10px; overflow: hidden; } .gr-wahl > .kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--pb-kraeftig); color: var(--pb-schrift-hell); } .gr-wahl > .kopf b { font: 800 18px/1 var(--pb-familie); font-stretch: 108%; } .gr-wahl > .kopf small { opacity: .8; font-size: 12px; } .gr-wahl > .kopf .rechts { margin-left: auto; } .gr-wahl > .leib { padding: 12px 14px; } .gr-karte { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .gr-karte button { font: inherit; font-size: 12.5px; line-height: 1.25; padding: 6px 10px; border-radius: 0; cursor: pointer; background: var(--pb-flaeche-ruhig); color: var(--pb-schrift); border: 1px solid var(--pb-linie); } .gr-karte button:hover { border-color: var(--pb-akzent); color: var(--pb-akzent); } .gr-gang { font: 700 9.5px/1 var(--pb-familie); letter-spacing: .14em; text-transform: uppercase; color: var(--pb-schrift-leise); margin: 8px 0 5px; } .gr-bestellung { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .gr-bestellung .pos { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 6px 8px 6px 11px; border-radius: 0; background: var(--pb-akzent-leise); color: var(--pb-schrift); } .gr-bestellung .pos button { border: 0; background: none; cursor: pointer; color: var(--pb-akzent); font: 700 14px/1 var(--pb-familie); padding: 0 2px; } /* ========================================================================== Produktion — Produktionsmengen und Mise en place Zwei Spalten. Links die Portionen je Gericht, nach Gang gebuendelt, jeder Gang mit einem Band in Akzentfarbe und seiner Portionszahl. Rechts die Mengen je Zutat, aufgeteilt nach Posten; jeder Posten ist ein eigenes Blatt und einzeln druckbar. Die Mengen stehen in Akzentfarbe und fett: am Posten wird die Zahl gelesen, nicht der Satz drumherum. ========================================================================== */ .pr-spalten { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; align-items: start; } /* Auf dem iPad auch quer einspaltig: die Zeilen der Mise en place sind lang, und zwei Spalten nebeneinander zwingen zum Umbrechen mitten im Zutatennamen. */ @media (max-width: 1100px) { .pr-spalten { grid-template-columns: 1fr; } } .pr-block { border: 1px solid var(--pb-linie); border-radius: var(--pb-radius); background: var(--pb-flaeche); padding: 14px 16px 16px; } .pr-block > h3 { margin: 0 0 3px; font-size: 15px; font-weight: 800; font-stretch: 106%; letter-spacing: -.005em; text-transform: none; color: var(--pb-schrift); } .pr-block > .unter { font-size: 12px; color: var(--pb-schrift-leise); margin-bottom: 12px; line-height: 1.5; } /* Linke Spalte: Gangband und Gerichte */ .pr-gangband { display: flex; align-items: baseline; gap: 10px; background: var(--pb-akzent); color: var(--pb-akzent-text); padding: 6px 10px; border-radius: 0; margin: 12px 0 6px; } .pr-gangband b { font: 700 10.5px/1 var(--pb-familie); letter-spacing: .14em; text-transform: uppercase; } .pr-gangband .rechts { margin-left: auto; font: 700 10.5px/1 var(--pb-familie); letter-spacing: .1em; text-transform: uppercase; opacity: .92; } .pr-zeile { display: flex; gap: 10px; align-items: baseline; padding: 4px 10px; border-bottom: 1px solid var(--pb-linie); font-size: 13px; } .pr-zeile:last-child { border-bottom: 0; } .pr-zeile .menge { font-weight: 700; color: var(--pb-akzent); min-width: 42px; font-family: var(--pb-familie-zahl); } .pr-zeile .was { flex: 1; } .pr-zeile .quelle { font-size: 11.5px; color: var(--pb-schrift-leise); } /* Rechte Spalte: ein Blatt je Posten */ .pr-posten { border: 1px solid var(--pb-linie); border-radius: var(--pb-radius); background: var(--pb-flaeche); padding: 12px 14px 14px; margin-bottom: 12px; } .pr-posten > .kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; } .pr-posten > .kopf b { font: 700 11px/1 var(--pb-familie); letter-spacing: .16em; text-transform: uppercase; } .pr-posten > .kopf small { color: var(--pb-schrift-leise); font-size: 11.5px; } .pr-posten > .kopf .rechts { margin-left: auto; } .pr-untertitel { font: 700 9.5px/1 var(--pb-familie); letter-spacing: .14em; text-transform: uppercase; color: var(--pb-schrift-leise); margin: 12px 0 4px; } .pr-marke { font-size: 10.5px; color: var(--pb-schrift-leise); border: 1px solid var(--pb-linie); border-radius: 0; padding: 2px 6px; white-space: nowrap; } .pr-marke.eigen { color: var(--pb-tief); border-color: rgba(15, 76, 64, .35); } .pr-fuss { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--pb-linie); } /* Druck: ein Posten allein auf ein Blatt. */ @media print { body.pb-druckt-eins .pb-kopf, body.pb-druckt-eins .pb-fuss, body.pb-druckt-eins .pb-reiter, body.pb-druckt-eins .pr-block > *, body.pb-druckt-eins .dr-trenner ~ * { display: none !important; } body.pb-druckt-eins .pb-druckziel, body.pb-druckt-eins .pb-druckziel * { display: revert !important; } body.pb-druckt-eins .pb-druckziel { border: 0; padding: 0; } body.pb-druckt-eins .pb-druckziel .pr-nurschirm { display: none !important; } .pr-posten { break-inside: avoid; } } /* --- PLANBAR-Anteil --------------------------------------------------- Die Optik des Reglers von der Webseite, hier als Anzeige. Auf der Webseite stellt der Wirt damit ein, wie planbar er wirtschaften will. Hier steht der Griff dort, wo die tatsaechliche planbare Nachfrage steht; er laesst sich nicht anfassen. Unter 60 Prozent traegt die Vorausplanung den Abend nicht mehr allein: die Schiene verliert das Akzentorange und geht ins Gedeckte, das Zeichen im Griff ebenso. Kein Alarmrot, sondern ein Zuruecknehmen der Farbe. Dieselbe Schwelle und dieselbe Begruendung wie im Raumplaner der Webseite. -------------------------------------------------------------------- */ .pa-steuer { display: grid; gap: 5px; } .pa-kicker { display: inline-flex; align-items: center; gap: 9px; font: 700 11px/1 var(--pb-familie); font-stretch: 82%; letter-spacing: .17em; text-transform: uppercase; color: var(--pb-schrift-leise); } .pa-kicker::before { content: ""; width: 9px; height: 9px; flex: none; background: var(--pb-akzent); } .pa-wert { margin: 2px 0 0; font-size: 15px; color: var(--pb-schrift-leise); font-variant-numeric: tabular-nums; } .pa-wert b { font: 820 27px/1 var(--pb-familie); font-stretch: 108%; color: var(--pb-akzent); } .pa-label { font: 700 11.5px/1 var(--pb-familie); font-stretch: 88%; letter-spacing: .12em; text-transform: uppercase; color: var(--pb-schrift); margin-top: 4px; } .pa-schiene { position: relative; height: 26px; width: 100%; min-width: 220px; } .pa-schiene::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 6px; background: var(--pb-linie-stark); } .pa-schiene i { position: absolute; left: 0; top: 10px; height: 6px; background: var(--pb-akzent); } .pa-griff { position: absolute; top: 0; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23f3562e'/%3E%3Cpath fill='%23fef7ec' transform='translate(11.3 8) scale(0.0157)' d='M130 0H358A242 242 0 0 1 600 242V592A123 123 0 0 1 477 715H333V322A64 64 0 0 0 269 258H0V130A130 130 0 0 1 130 0ZM109 322H255V910A110 110 0 0 1 145 1020H72A72 72 0 0 1 0 948V431A109 109 0 0 1 109 322ZM360 749H490A110 110 0 0 1 600 859V908A112 112 0 0 1 488 1020H333V776A27 27 0 0 1 360 749Z'/%3E%3C/svg%3E") center/contain no-repeat; } .pa-ausgabe { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--pb-schrift-leise); } .pa-ausgabe b { font-weight: 760; color: var(--pb-schrift); } .pa-sicherheit { display: block; margin-top: 2px; font-size: 12.5px; color: var(--pb-schrift-leise); } .pa-steuer.ist-knapp .pa-wert b { color: var(--pb-tief); } .pa-steuer.ist-knapp .pa-schiene i { background: var(--pb-linie-stark); } .pa-steuer.ist-knapp .pa-griff { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23c9bda6'/%3E%3Cpath fill='%23fef7ec' transform='translate(11.3 8) scale(0.0157)' d='M130 0H358A242 242 0 0 1 600 242V592A123 123 0 0 1 477 715H333V322A64 64 0 0 0 269 258H0V130A130 130 0 0 1 130 0ZM109 322H255V910A110 110 0 0 1 145 1020H72A72 72 0 0 1 0 948V431A109 109 0 0 1 109 322ZM360 749H490A110 110 0 0 1 600 859V908A112 112 0 0 1 488 1020H333V776A27 27 0 0 1 360 749Z'/%3E%3C/svg%3E") center/contain no-repeat; } .pa-steuer.ist-knapp .pa-sicherheit { color: var(--pb-tief); font-weight: 640; } /* --- Raumwahl: ein Raum je Seite -------------------------------------- */ .gr-wahlleiste { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 0 10px; } .gr-wahlleiste .zaehler { margin-left: auto; font-size: 12.5px; color: var(--pb-schrift-leise); font-variant-numeric: tabular-nums; } /* Nur im Editor faesst man Tische an. */ .gr-tisch { cursor: pointer; } .gr-tisch.beweglich { cursor: grab; } .gr-tisch.beweglich:active { cursor: grabbing; } /* ========================================================================== Buehne — der Gastraum nimmt die ganze Seite Der Fussboden reicht von Rand zu Rand, nicht nur bis zur Textspalte. Die Tische stehen darauf, die Angaben schweben darueber. Ein Tisch darf unter einer Angabe stehen: der Raum ist die Hauptsache, die Zahlen sind Beiwerk. Die Angaben tragen keinen Rahmen und keinen vollen Grund, nur einen Hauch Papier mit Weichzeichner. Ein Kasten waere ein Fremdkoerper auf einem Fussboden. ========================================================================== */ /* Der Boden ist die ganze Seite, nicht nur der Teil unter der Reiterleiste. Deshalb traegt ihn der Koerper und nicht die Buehne: das Muster laeuft hinter Kopf und Reitern durch, bis an den oberen Rand des Fensters. Der Grundton ist der des Kopfbalkens, damit oben und unten dieselbe Flaeche sind und keine Kante entsteht. Die Klasse setzt D.modulblatt, wenn ein Raumplan gezeigt wird, und nimmt sie beim naechsten Modul wieder weg. */ body.pb-raumseite { overflow-x: hidden; background-color: var(--pb-flaeche); background-image: linear-gradient(rgba(20, 17, 15, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 17, 15, .05) 1px, transparent 1px); background-size: 96px 96px; background-position: 0 0; } body.pb-raumseite .pb-kopf, body.pb-raumseite .pb-reiter { background: transparent; } .gr-buehne { position: relative; margin: -26px calc(50% - 50vw) 0; width: 100vw; padding: 26px 0 40px; touch-action: none; } /* Kopf und Plan liegen in derselben Spaltenbreite wie der Rest der Seite. */ .gr-innen { max-width: 1280px; margin: 0 auto; padding: 0 20px; } .gr-kopfzeile { display: grid; gap: 26px 40px; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } @media (max-width: 900px) { .gr-kopfzeile { grid-template-columns: 1fr; } } .gr-titel { display: grid; gap: 10px; justify-items: start; } .gr-titel h2 { margin: 2px 0 0; font-size: clamp(28px, 4vw, 46px); font-weight: 820; font-stretch: 118%; letter-spacing: -.015em; line-height: 1.05; text-transform: uppercase; color: var(--pb-schrift); } .gr-titel p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pb-schrift-leise); max-width: 46ch; } .gr-zaehler { margin: 22px 0 4px; text-align: right; font-size: 14px; letter-spacing: .04em; color: var(--pb-schrift-leise); font-variant-numeric: tabular-nums; } .gr-zaehler b { color: var(--pb-schrift); font-weight: 760; } /* Der Plan selbst: kein Rahmen, kein Grund, nur Flaeche. */ .gr-plan { position: relative; } /* Die Angaben oben rechts: lose Zeilen, keine Kachelreihe. */ .gr-lage { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-end; font-size: 13px; color: var(--pb-schrift-leise); } .gr-lage b { color: var(--pb-schrift); font-weight: 760; } .gr-lage .warn b { color: var(--pb-warn); } @media (max-width: 760px) { .gr-schwebe { position: static; max-width: none; margin: 10px 14px; background: none; backdrop-filter: none; padding: 0; } .gr-schwebe.oben-rechts { text-align: left; } .gr-lage { justify-content: flex-start; } .gr-buehne { min-height: 0; padding-bottom: 14px; } } /* ========================================================================== Eindeck-Uebersicht — was jeder Platz an Gedeck braucht Ein Bogen je Tisch, darin eine Zeile je Platz und darunter die Summe fuer diesen Tisch. Die Platznummer steht als schwarze Marke davor, damit der Service beim Eindecken die Reihe abarbeiten kann, ohne zu suchen. ========================================================================== */ /* Dieselben Leisten wie in der Bestelluebersicht und der Gaestekartei: eine je Ankunftszeit, die Bogen stecken darin. */ .ed-raster { --schub: 18px; display: grid; gap: 16px; padding: 0 6px; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); margin-top: calc(var(--schub) * -1); } @media (max-width: 800px) { .ed-raster { grid-template-columns: 1fr; } } .ed-tisch { position: relative; z-index: 1; border: 1px solid var(--pb-linie); border-radius: 0; background: var(--pb-flaeche); padding: calc(18px + 14px) 16px 16px; box-shadow: 0 1px 3px rgba(20, 17, 15, .05); } .ed-tisch > .kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .ed-tisch > .kopf b { font: 800 16px/1.2 var(--pb-familie); font-stretch: 106%; } .ed-tisch > .kopf .rechts { margin-left: auto; font-size: 12.5px; color: var(--pb-schrift-leise); } .ed-platz { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid var(--pb-linie); font-size: 13px; } .ed-platz:last-of-type { border-bottom: 0; } .ed-platz .nr { flex: 0 0 auto; background: var(--pb-kraeftig); color: var(--pb-schrift-hell); font: 700 9.5px/1 var(--pb-familie); letter-spacing: .1em; text-transform: uppercase; padding: 5px 7px; border-radius: 0; } .ed-platz .wer { flex: 0 0 auto; font-weight: 700; } .ed-platz .teile { flex: 1; color: var(--pb-schrift-leise); line-height: 1.55; } .ed-platz .teile b { color: var(--pb-schrift); font-weight: 700; } .ed-summe { margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--pb-akzent); } .ed-summe .marke { font: 700 9.5px/1 var(--pb-familie); letter-spacing: .14em; text-transform: uppercase; color: var(--pb-akzent); display: block; margin-bottom: 8px; } .ed-chips { display: flex; flex-wrap: wrap; gap: 7px; } .ed-chips span { font-size: 12.5px; padding: 6px 11px; border-radius: 0; border: 1px solid var(--pb-linie); background: var(--pb-flaeche); } .ed-chips span b { font-weight: 700; } /* Die Gesamtsumme des Abends, jede Zeile gegen den Bestand geprueft. */ .ed-bilanz { display: grid; gap: 6px; } .ed-bilanz .zeile { display: flex; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--pb-linie); font-size: 13px; } .ed-bilanz .zeile:last-child { border-bottom: 0; } .ed-bilanz .menge { font-weight: 700; min-width: 52px; text-align: right; font-family: var(--pb-familie-zahl); } .ed-bilanz .was { flex: 1; } .ed-bilanz .stand { font-size: 12px; color: var(--pb-schrift-leise); } .ed-bilanz .zeile.knapp .menge { color: var(--pb-stopp); } .ed-bilanz .zeile.knapp .stand { color: var(--pb-stopp); font-weight: 700; } .ed-bilanz .zeile.unbekannt .stand { color: var(--pb-warn); } /* Die rechte Spalte des Kopfes: Raumwaehler, Werkzeug, PLANBAR-Feld. Rechtsbuendig, damit die Schalterreihe an der Seite steht und nicht in der Mitte haengt. */ .gr-rechts { display: grid; gap: 10px; justify-items: end; } .gr-rechts > * { max-width: 100%; } .gr-rechts .pb-schalter, .gr-rechts .pb-knopfreihe { justify-content: flex-end; flex-wrap: wrap; } @media (max-width: 900px) { .gr-rechts { justify-items: start; } .gr-rechts .pb-schalter, .gr-rechts .pb-knopfreihe { justify-content: flex-start; } } /* Der PLANBAR-Balken unter dem Plan. Linksbuendig und in Lesebreite, nicht ueber die ganze Seite: eine Kennzahl liest sich nicht besser, wenn sie einen Meter breit ist. */ .gr-unten { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--pb-linie); } .gr-unten .pa-steuer { max-width: 460px; } /* ========================================================================== Uebersicht auf Bonleisten — knapp oben, ausfuehrlich erst auf Klick Eine Leiste je Ankunftszeit, darin eine Karte je Tisch mit dem Noetigsten: Tisch, Gast, Personen, Summe, Stand. Alles Weitere erscheint erst, wenn die Karte angeklickt wird, und dann unter der Leiste, nicht in ihr. Der Grund: eine Ansicht, die alles gleichzeitig zeigt, zeigt nichts. ========================================================================== */ .ue-reihe { --schub: 18px; display: grid; gap: 14px; padding: 0 6px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); margin-top: calc(var(--schub) * -1); } .ue-karte { position: relative; z-index: 1; display: block; width: 100%; text-align: left; font: inherit; cursor: pointer; background: var(--pb-flaeche); border: 1px solid var(--pb-linie); border-top: 4px solid var(--pb-linie-stark); border-radius: 0; padding: calc(18px + 12px) 15px 14px; box-shadow: 0 1px 3px rgba(20, 17, 15, .05); } .ue-karte:hover { border-color: var(--pb-akzent); } .ue-karte.erwartet { border-top-color: var(--pb-linie-stark); } .ue-karte.amTisch { border-top-color: var(--pb-gut); } .ue-karte.uebernommen { border-top-color: var(--pb-akzent); } .ue-karte.offen { border-top-color: var(--pb-warn); } .ue-karte.gewaehlt { border-color: var(--pb-kraeftig); box-shadow: 0 0 0 2px var(--pb-kraeftig); } .ue-karte .zeile1 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; } .ue-karte .tisch { font: 800 19px/1 var(--pb-familie); font-stretch: 106%; } .ue-karte .stand { margin-left: auto; font: 700 9px/1 var(--pb-familie); letter-spacing: .1em; text-transform: uppercase; color: var(--pb-schrift-leise); white-space: nowrap; } .ue-karte.amTisch .stand { color: var(--pb-gut); } .ue-karte.uebernommen .stand { color: var(--pb-akzent); } .ue-karte.offen .stand { color: var(--pb-warn); } .ue-karte .gast { font-size: 13.5px; font-weight: 700; line-height: 1.35; } .ue-karte .klein { font-size: 12px; color: var(--pb-schrift-leise); margin-top: 3px; } .ue-karte .mahnung { font-size: 12px; color: var(--pb-warn); font-weight: 700; margin-top: 5px; } /* Der aufgeklappte Tisch. Steht unter der Leiste, nicht in ihr. */ .ue-tafel { border: 2px solid var(--pb-kraeftig); border-radius: var(--pb-radius); background: var(--pb-flaeche); margin: 14px 6px 0; overflow: hidden; } .ue-tafel > .kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--pb-kraeftig); color: var(--pb-schrift-hell); } .ue-tafel > .kopf b { font: 800 17px/1 var(--pb-familie); font-stretch: 106%; } .ue-tafel > .kopf small { opacity: .82; font-size: 12px; } .ue-tafel > .kopf .rechts { margin-left: auto; } .ue-tafel > .leib { padding: 12px 14px; } .ue-tafel .angaben { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 13px; color: var(--pb-schrift-leise); margin-bottom: 10px; } .ue-tafel .angaben b { color: var(--pb-schrift); } .ue-tafel .vermerk { font-size: 13px; color: var(--pb-akzent); margin-bottom: 10px; } .ue-platz { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px solid var(--pb-linie); font-size: 13px; } .ue-platz:last-of-type { border-bottom: 0; } .ue-platz .nr { background: var(--pb-flaeche-ruhig); border: 1px solid var(--pb-linie); font: 700 9.5px/1 var(--pb-familie); letter-spacing: .1em; text-transform: uppercase; padding: 5px 7px; border-radius: 0; } .ue-platz .rat { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ========================================================================== Heute wichtig — die Lage des Tages in hoechstens fuenf Bons Dieselbe Leiste wie ueberall, aber sie traegt keine Uhrzeit, sondern die Lage. Jeder Bon nennt eine Sache und fuehrt dorthin, wo man sie erledigt. Fuenf ist die Grenze: was darueber hinaus gilt, wird gezaehlt und rechts auf der Leiste genannt, nicht als sechster Bon angehaengt. ========================================================================== */ /* Die Zettel duerfen in die Hoehe wachsen, nicht in die Breite gedraengt werden. 260 Pixel Mindestbreite heisst auf einem iPad quer drei Spalten, hochkant zwei; darunter eine. Fuenf schmale Streifen waeren auf keinem dieser Geraete zu lesen. */ .hw-reihe { --schub: 18px; display: grid; gap: 14px; padding: 0 6px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; margin-top: calc(var(--schub) * -1); } .hw-bon { position: relative; z-index: 1; display: block; width: 100%; text-align: left; font: inherit; background: var(--pb-flaeche); border: 1px solid var(--pb-linie); border-top: 4px solid var(--pb-linie-stark); border-radius: 0; padding: calc(18px + 12px) 15px 14px; box-shadow: 0 1px 3px rgba(20, 17, 15, .05); } a.hw-bon, button.hw-bon { cursor: pointer; text-decoration: none; color: inherit; } a.hw-bon:hover, button.hw-bon:hover { border-color: var(--pb-akzent); } .hw-bon.stopp { border-top-color: var(--pb-stopp); } .hw-bon.warn { border-top-color: var(--pb-warn); } .hw-bon.gut { border-top-color: var(--pb-gut); } .hw-bon.info { border-top-color: var(--pb-tief); } .hw-bon .marke { font: 700 9px/1 var(--pb-familie); letter-spacing: .12em; text-transform: uppercase; color: var(--pb-schrift-leise); } .hw-bon.stopp .marke { color: var(--pb-stopp); } .hw-bon.warn .marke { color: var(--pb-warn); } .hw-bon.gut .marke { color: var(--pb-gut); } .hw-bon.info .marke { color: var(--pb-tief); } .hw-bon .kern { font: 800 17px/1.2 var(--pb-familie); font-stretch: 104%; margin: 5px 0 4px; } .hw-bon { display: flex; flex-direction: column; } .hw-bon .satz { font-size: 13px; line-height: 1.55; color: var(--pb-schrift-leise); } /* Der Hinweis sitzt am Fuss, damit er in einer Reihe verschieden hoher Zettel auf derselben Linie steht. */ .hw-bon .hin { display: block; margin-top: auto; padding-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--pb-akzent); } /* ========================================================================== Produktionsblatt — ein Blatt je Leiste, so breit wie die Leiste Anders als Bon, Gaestekartei und Eindeckbogen steht hier nicht eine Reihe schmaler Karten unter der Leiste, sondern ein einziges Blatt in voller Breite. Der Grund ist der Inhalt: eine Zeile der Mise en place traegt Menge, Zutat und die Gerichte, aus denen sie kommt. Das passt in keine Spalte von 300 Pixeln. Jedes Blatt zeigt vier Zeilen und faehrt auf Klick aus. ========================================================================== */ .pr-blatt { --schub: 18px; position: relative; z-index: 1; margin: calc(var(--schub) * -1) 6px 0; background: var(--pb-flaeche); border: 1px solid var(--pb-linie); border-radius: 0; padding: calc(18px + 12px) 18px 14px; box-shadow: 0 1px 3px rgba(20, 17, 15, .05); } .pr-blatt > .kopfzeile { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .pr-blatt > .kopfzeile small { color: var(--pb-schrift-leise); font-size: 12px; } .pr-blatt > .kopfzeile .rechts { margin-left: auto; } /* ========================================================================== Reservierungszeile unter einer Bonleiste Der Aufbau der Demo (.res-row): Dreieck, Name fett, dann Tisch und Personenzahl in Schriftfarbe leise, rechts die Etiketten. Die Leiste darueber ist die Hausbonleiste, nicht der flache Balken der Demo: Hausentscheid Marcel vom 10.09.2026. ========================================================================== */ .rs-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--pb-linie); padding: 11px 2px; font: inherit; color: inherit; cursor: pointer; } .rs-zeile:first-of-type { border-top: 0; } .rs-zeile:hover { background: var(--pb-papier); } .rs-zeile:focus-visible { outline: 2px solid var(--pb-akzent); outline-offset: -2px; } .rs-zeile .pfeil { color: var(--pb-schrift-leise); font-size: 11px; flex: 0 0 auto; } .rs-zeile .name { font-size: 14.5px; } .rs-zeile .name b { font-weight: 800; } .rs-zeile .name span { color: var(--pb-schrift-leise); } .rs-zeile .marken { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .rs-zeile.still { opacity: .6; } /* Ein Vermerk am Gast ist im Original dunkel und traegt ein Warnzeichen: er wird gelesen, bevor der Gast am Tisch sitzt. */ .rs-vermerk { background: var(--pb-stopp); color: var(--pb-schrift-hell); border-color: var(--pb-stopp); } /* ========================================================================== Getränkekarte — eine Position Aufbau der Demo: Name mit Etiketten links, Preise rechts, darunter die Herkunft und der Bestand mit Mindestmenge, darunter die Handlungen. ========================================================================== */ /* Eine Suchleiste ist eine Reihe: Feld, Zurücksetzen, Zähler. Ohne diese Regel zieht die allgemeine Formularregel (width: 100%) das Feld über die ganze Zeile und schiebt Knopf und Zähler darunter. */ .pb-werkzeug > input[type=search] { flex: 1 1 260px; width: auto; min-width: 220px; } /* Rubrik wie im Menü-Management: Kopf mit Name und Zähler, darunter die Positionen. */ .gk-rubrik { border: 1px solid var(--pb-linie); margin: 0 0 14px; } .gk-rubrik-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--pb-flaeche-ruhig); border-bottom: 1px solid var(--pb-linie); } .gk-rubrik-kopf .name { font-weight: 800; font-size: 14px; } .gk-rubrik-kopf .zahl { font-size: 12px; color: var(--pb-schrift-leise); } .gk-rubrik-kopf .pb-knopf { margin-left: auto; } .gk-rubrik > .gk-pos { padding-left: 14px; padding-right: 14px; } .gk-pos { border-top: 1px solid var(--pb-linie); padding: 14px 0; } .gk-pos:first-of-type { border-top: 0; padding-top: 4px; } .gk-pos.aus { opacity: .6; } .gk-pos-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 5px; } /* Der Jahrgang steht wie im Original vor dem Namen, in fester Breite, damit die Namen eine Spalte bilden. */ .gk-pos-kopf .jahr { font-variant-numeric: tabular-nums; color: var(--pb-schrift-leise); font-size: 12.5px; min-width: 34px; } .gk-pos-kopf b { font-size: 15.5px; font-weight: 800; } /* Die Preise stehen rechts als Spalte, eine Zeile je Ausschankmass: Menge links, Betrag rechts buendig. So bilden die Betraege eine Spalte und lassen sich vergleichen; nebeneinander gesetzt las sich die Zeile wie Fliesstext. */ .gk-preise { margin-left: auto; text-align: right; min-width: 148px; } .gk-preis { display: flex; align-items: baseline; gap: 12px; justify-content: flex-end; line-height: 1.5; } .gk-preis .mass { font-size: 12.5px; color: var(--pb-schrift-leise); font-weight: 600; } .gk-preis .betrag { font-weight: 800; font-size: 15px; white-space: nowrap; min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; } .gk-pos-lage { font-size: 12.5px; color: var(--pb-schrift-leise); margin-bottom: 8px; } .pr-mehr { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 1px dashed var(--pb-linie-stark); border-radius: 0; background: none; cursor: pointer; font: 700 12px/1 var(--pb-familie); color: var(--pb-akzent); } .pr-mehr:hover { border-color: var(--pb-akzent); background: var(--pb-flaeche-ruhig); } /* Mise en place: eine Aufgabe je Gericht, darunter die Zutaten dieses Postens. Die Aufgabe traegt die Portionszahl, die Zutaten die Mengen. */ .pr-aufgabe { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin: 10px 0 2px; } .pr-aufgabe b { font: 700 13.5px/1.3 var(--pb-familie); } .pr-aufgabe .portionen { margin-left: auto; font: 700 12px/1 var(--pb-familie); color: var(--pb-akzent); white-space: nowrap; } .pr-teile { display: flex; flex-wrap: wrap; gap: 6px 10px; padding: 2px 0 8px 2px; border-bottom: 1px solid var(--pb-linie); } .pr-teile:last-child { border-bottom: 0; } .pr-teil { font-size: 12.5px; color: var(--pb-schrift-leise); } .pr-teil b { color: var(--pb-akzent); font-family: var(--pb-familie-zahl); font-weight: 700; } .pr-teil.offen b { color: var(--pb-warn); } /* --- Anklickbare Kennzahlkachel (MI-W3, 09.09.2026) --------------------- Auftrag 9.1: "Jede Kennzahl ist anklickbar und fuehrt auf ihre Grundgesamtheit." Die Kachel ist dafuer ein