@connectstudio/gastro-ui 0.3.0

package/dist/styles.css

@@ -0,0 +1,359 @@
+/* @connectstudio/gastro-ui — Default-Theme (docs/09, docs/10).
+   Ruhig, monochrom, kompakt: weiße Karte mit Hairline (Radius 16), Auswahl als
+   Ink-Fill statt Markenfarbe, enge Radien (10/12), Schatten fast flach.
+   Referenz: cal.com-Booker. Alles über --cg-*-Variablen überschreibbar;
+   die cg-*-Klassen sind der Styling-Vertrag. Dark nur auf Wunsch:
+   data-cg-theme="dark" oder "auto" (folgt prefers-color-scheme). */
+.cg-root {
+  /* Flächen */
+  --cg-bg: #ffffff;
+  --cg-surface: #ffffff;
+  --cg-elevated: #ffffff;      /* Karten-Innenflächen: Slots, Felder */
+  --cg-head: #ffffff;          /* Kopfzeile der Karte */
+  --cg-tint: #f6f5f2;          /* Skeleton, Segment-Schiene, leise Flächen */
+  --cg-line: #e7e5e0;          /* Hairlines */
+  --cg-line-soft: #eeece7;     /* deaktivierte Ränder */
+  --cg-line-strong: #d5d2cb;   /* Hover-Ränder */
+
+  /* Text */
+  --cg-ink: #1b1a18;
+  --cg-ink-muted: #5b5851;
+  --cg-ink-soft: #7f7b74;
+  --cg-ink-disabled: #aaa69f;
+
+  /* Akzent = Auswahl. Default Ink (monochrom); Betriebe überschreiben --cg-accent. */
+  --cg-accent: #1b1a18;
+  --cg-accent-ink: #ffffff;    /* Text auf Akzent-Fläche */
+  --cg-accent-text: #1b1a18;   /* Akzent als Textfarbe (Links) */
+  --cg-accent-weak: #f3f2ee;   /* Hinweisflächen */
+  --cg-accent-weak-text: #44423d;
+  --cg-cta: var(--cg-accent);  /* Haupt-CTA folgt dem Akzent */
+  --cg-cta-ink: var(--cg-accent-ink);
+  --cg-status-bg: #f3f2ee;
+  --cg-status-ink: #44423d;
+  --cg-danger: #b91c1c;
+
+  /* Form */
+  --cg-radius-card: 16px;
+  --cg-radius-control: 10px;                        /* Buttons, Chips, Kalenderzellen */
+  --cg-radius-field: var(--cg-radius-control);      /* Stepper, Inputs, Hinweise */
+  --cg-radius-slot: var(--cg-radius-control);       /* Slot-Zellen */
+
+  /* Motion */
+  --cg-dur: 150ms;
+  --cg-ease: cubic-bezier(0.2, 0, 0, 1);
+  --cg-font: inherit;
+
+  /* Elevation: die Hairline trennt, nicht der Schatten. */
+  --cg-shadow: 0 1px 2px rgb(0 0 0 / 0.03), 0 1px 3px rgb(0 0 0 / 0.02);
+  --cg-shadow-raised: 0 2px 3px rgb(0 0 0 / 0.03), 0 2px 2px -1px rgb(0 0 0 / 0.03);
+
+  font-family: var(--cg-font);
+  color: var(--cg-ink);
+  font-size: 15px;
+  line-height: 1.45;
+  -webkit-font-smoothing: antialiased;
+  box-sizing: border-box;
+}
+
+/* Dark: gleiche Rollen, invertierte Werte. Auswahl wird Weiß auf Dunkel. */
+.cg-root[data-cg-theme='dark'] { color-scheme: dark; }
+.cg-root[data-cg-theme='dark'] {
+  --cg-bg: #0f0f0f;
+  --cg-surface: #171717;
+  --cg-elevated: #0f0f0f;
+  --cg-head: #171717;
+  --cg-tint: #1f1f1f;
+  --cg-line: #292929;
+  --cg-line-soft: #232323;
+  --cg-line-strong: #4d4d4d;
+  --cg-ink: #ededed;
+  --cg-ink-muted: #a3a3a3;
+  --cg-ink-soft: #8a8a8a;
+  --cg-ink-disabled: #5c5c5c;
+  --cg-accent: #ffffff;
+  --cg-accent-ink: #0a0a0a;
+  --cg-accent-text: #ededed;
+  --cg-accent-weak: #262626;
+  --cg-accent-weak-text: #d4d4d4;
+  --cg-status-bg: #262626;
+  --cg-status-ink: #d4d4d4;
+  --cg-danger: #f87171;
+  --cg-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
+  --cg-shadow-raised: 0 2px 3px rgb(0 0 0 / 0.35), 0 2px 2px -1px rgb(0 0 0 / 0.35);
+}
+@media (prefers-color-scheme: dark) {
+  .cg-root[data-cg-theme='auto'] { color-scheme: dark; }
+  .cg-root[data-cg-theme='auto'] {
+    --cg-bg: #0f0f0f;
+    --cg-surface: #171717;
+    --cg-elevated: #0f0f0f;
+    --cg-head: #171717;
+    --cg-tint: #1f1f1f;
+    --cg-line: #292929;
+    --cg-line-soft: #232323;
+    --cg-line-strong: #4d4d4d;
+    --cg-ink: #ededed;
+    --cg-ink-muted: #a3a3a3;
+    --cg-ink-soft: #8a8a8a;
+    --cg-ink-disabled: #5c5c5c;
+    --cg-accent: #ffffff;
+    --cg-accent-ink: #0a0a0a;
+    --cg-accent-text: #ededed;
+    --cg-accent-weak: #262626;
+    --cg-accent-weak-text: #d4d4d4;
+    --cg-status-bg: #262626;
+    --cg-status-ink: #d4d4d4;
+    --cg-danger: #f87171;
+    --cg-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
+    --cg-shadow-raised: 0 2px 3px rgb(0 0 0 / 0.35), 0 2px 2px -1px rgb(0 0 0 / 0.35);
+  }
+}
+
+/* Reset nur innerhalb der Komponenten (.cg-widget, .cg-menu) — NICHT auf .cg-root: die Plattform nutzt
+   .cg-root als Token-Träger für ganze Seiten, und ungelayerte Regeln würden dort Tailwind-Utilities schlagen. */
+:where(.cg-widget, .cg-menu) :where(*, *::before, *::after) { box-sizing: inherit; }
+:where(.cg-widget, .cg-menu) :where(button, input, textarea) { font: inherit; color: inherit; }
+.cg-root :focus-visible { outline: 2px solid var(--cg-ink); outline-offset: 2px; }
+
+/* ---------- Widget-Karte ---------- */
+.cg-widget {
+  max-width: 560px;
+  margin: 0 auto;
+  background: var(--cg-surface);
+  border: 1px solid var(--cg-line);
+  border-radius: var(--cg-radius-card);
+  box-shadow: var(--cg-shadow);
+  overflow: hidden;
+}
+.cg-widget__header {
+  display: flex; align-items: center; gap: 10px;
+  min-height: 48px; padding: 12px 20px;
+  background: var(--cg-head);
+  border-bottom: 1px solid var(--cg-line);
+  color: var(--cg-ink);
+}
+.cg-widget__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
+.cg-widget__body { display: flex; flex-direction: column; gap: 20px; padding: 20px; }
+@media (min-width: 560px) { .cg-widget__body { padding: 24px; } }
+.cg-widget__muted { margin: 0; color: var(--cg-ink-soft); }
+.cg-widget__small { font-size: 13px; }
+.cg-widget__center { text-align: center; }
+.cg-widget__hint,
+.cg-widget__message {
+  margin: 0; padding: 10px 14px;
+  border: 1px solid var(--cg-line); border-radius: var(--cg-radius-field);
+  background: var(--cg-elevated); font-size: 14px; color: var(--cg-ink-muted);
+}
+.cg-widget__message--error { color: var(--cg-danger); }
+.cg-widget__empty { grid-column: 1 / -1; margin: 0; color: var(--cg-ink-soft); font-size: 14px; }
+.cg-widget__empty a { color: var(--cg-accent-text); text-decoration: underline; text-underline-offset: 2px; }
+
+/* ---------- Sektionen: kleines Label über der Gruppe (Referenz-Rhythmus) ---------- */
+.cg-section { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+.cg-label {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  font-size: 13px; font-weight: 500; color: var(--cg-ink-soft);
+  letter-spacing: 0.01em;
+}
+.cg-label__value { color: var(--cg-ink); font-weight: 500; }
+
+/* ---------- Datumsstreifen: Wochentag über Tageszahl, heute mit Punkt ---------- */
+.cg-days {
+  display: flex; gap: 8px; overflow-x: auto; padding: 2px; margin: -2px;
+  scrollbar-width: none; scroll-snap-type: x proximity;
+  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
+  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
+}
+.cg-days::-webkit-scrollbar { display: none; }
+.cg-day {
+  flex: 0 0 auto; scroll-snap-align: start;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
+  width: 52px; min-height: 60px; padding: 6px 0;
+  background: var(--cg-elevated); border: 1px solid var(--cg-line);
+  border-radius: var(--cg-radius-control); cursor: pointer;
+  transition: background-color var(--cg-dur) var(--cg-ease), border-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease), transform var(--cg-dur) var(--cg-ease);
+}
+.cg-day:active { transform: scale(0.97); }
+.cg-day__wd { font-size: 12px; font-weight: 400; color: var(--cg-ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
+.cg-day__num { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }
+.cg-day__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--cg-ink-disabled); }
+.cg-day--selected, .cg-day--selected:hover { background: var(--cg-accent); border-color: var(--cg-accent); color: var(--cg-accent-ink); }
+.cg-day--selected .cg-day__wd { color: var(--cg-accent-ink); opacity: 0.7; }
+.cg-day--selected .cg-day__dot { background: var(--cg-accent-ink); }
+.cg-day:disabled { opacity: 0.5; cursor: default; }
+@media (hover: hover) { .cg-day:not(.cg-day--selected):hover { border-color: var(--cg-line-strong); } }
+
+/* ---------- Segment-Control (Mittag/Abend) — Schiene + aktive Karte ---------- */
+.cg-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--cg-tint); border-radius: var(--cg-radius-control); }
+.cg-seg__btn {
+  min-height: 30px; padding: 0 12px; border: 0; background: none; border-radius: 7px;
+  font-size: 13px; font-weight: 500; color: var(--cg-ink-soft); cursor: pointer;
+  transition: background-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease);
+}
+.cg-seg__btn--active { background: var(--cg-surface); color: var(--cg-ink); box-shadow: var(--cg-shadow-raised); }
+@media (hover: hover) { .cg-seg__btn:not(.cg-seg__btn--active):hover { color: var(--cg-ink); } }
+.cg-more { align-self: center; background: none; border: 0; padding: 6px 12px; min-height: 40px; font-size: 13px; font-weight: 500; color: var(--cg-ink-muted); cursor: pointer; border-radius: var(--cg-radius-control); }
+@media (hover: hover) { .cg-more:hover { color: var(--cg-ink); background: var(--cg-tint); } }
+
+/* ---------- Personen-Stepper ---------- */
+.cg-stepper {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  min-height: 52px; padding: 6px 8px 6px 14px;
+  border: 1px solid var(--cg-line); border-radius: var(--cg-radius-field);
+  background: var(--cg-elevated);
+}
+.cg-stepper__label { font-size: 15px; color: var(--cg-ink-muted); }
+.cg-stepper__controls { display: flex; align-items: center; gap: 6px; }
+.cg-stepper__btn {
+  width: 38px; height: 38px; border-radius: 8px;
+  background: var(--cg-surface); border: 1px solid var(--cg-line); cursor: pointer;
+  font-size: 17px; font-weight: 400; line-height: 1; color: var(--cg-ink-muted);
+  transition: border-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease), transform var(--cg-dur) var(--cg-ease);
+}
+.cg-stepper__btn:active { transform: scale(0.95); }
+.cg-stepper__btn:disabled { opacity: 0.4; cursor: default; }
+@media (hover: hover) { .cg-stepper__btn:not(:disabled):hover { border-color: var(--cg-line-strong); color: var(--cg-ink); } }
+.cg-stepper__value { min-width: 30px; text-align: center; font-size: 16px; font-weight: 600; color: var(--cg-ink); font-variant-numeric: tabular-nums; }
+
+/* ---------- Bereichs-Wahl (tables-Modus) ---------- */
+.cg-zones {
+  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(104px, 1fr);
+  gap: 8px; overflow-x: auto; padding: 2px; margin: -2px; scrollbar-width: none;
+}
+.cg-zones::-webkit-scrollbar { display: none; }
+.cg-zone {
+  display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: center;
+  background: var(--cg-elevated); border: 1px solid var(--cg-line); border-radius: var(--cg-radius-control);
+  cursor: pointer;
+  transition: border-color var(--cg-dur) var(--cg-ease), background-color var(--cg-dur) var(--cg-ease), transform var(--cg-dur) var(--cg-ease);
+}
+.cg-zone:active { transform: scale(0.98); }
+@media (hover: hover) { .cg-zone:not(.cg-zone--selected):hover { border-color: var(--cg-line-strong); } }
+.cg-zone__img { display: block; width: 100%; height: 56px; object-fit: cover; background: var(--cg-tint); }
+.cg-zone__img--empty { display: grid; place-items: center; color: var(--cg-ink-disabled); font-size: 18px; font-weight: 500; }
+.cg-zone__name { display: block; padding: 8px 10px; font-size: 13px; font-weight: 500; color: var(--cg-ink); overflow-wrap: anywhere; }
+.cg-zone--any { justify-content: center; min-height: 92px; }
+.cg-zone--selected { border-color: var(--cg-accent); }
+.cg-zone--selected .cg-zone__name { background: var(--cg-accent); color: var(--cg-accent-ink); }
+.cg-zone--any.cg-zone--selected { background: var(--cg-tint); }
+.cg-zone--any.cg-zone--selected .cg-zone__name { background: none; color: var(--cg-ink); }
+
+/* ---------- Slots ---------- */
+.cg-slotarea { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+.cg-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
+@media (max-width: 350px) { .cg-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+.cg-slot {
+  min-height: 44px; border-radius: var(--cg-radius-slot);
+  background: var(--cg-elevated); border: 1px solid var(--cg-line);
+  box-shadow: var(--cg-shadow-raised);
+  font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer;
+  transition: background-color var(--cg-dur) var(--cg-ease), border-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease), transform var(--cg-dur) var(--cg-ease);
+}
+.cg-slot:active { transform: scale(0.97); }
+.cg-slot--selected, .cg-slot--selected:hover { background: var(--cg-accent); border-color: var(--cg-accent); color: var(--cg-accent-ink); }
+.cg-slot--full, .cg-slot--full:hover { background: var(--cg-surface); border-color: var(--cg-line-soft); color: var(--cg-ink-disabled); box-shadow: none; text-decoration: line-through; cursor: default; }
+@media (hover: hover) { .cg-slot:not(.cg-slot--selected):not(.cg-slot--full):hover { border-color: var(--cg-line-strong); } }
+.cg-skeleton { background: var(--cg-tint); border: 0; box-shadow: none; border-radius: var(--cg-radius-slot); min-height: 44px; animation: cg-pulse 1.2s var(--cg-ease) infinite; }
+.cg-menu .cg-skeleton { min-height: 18px; margin: 8px 0; border-radius: 6px; }
+@keyframes cg-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
+
+/* ---------- Formular ---------- */
+.cg-form-wrap { animation: cg-enter var(--cg-dur) var(--cg-ease) both; }
+@keyframes cg-enter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+.cg-form { display: flex; flex-direction: column; gap: 12px; }
+.cg-field { display: flex; flex-direction: column; gap: 5px; }
+.cg-field label { font-size: 13px; font-weight: 500; color: var(--cg-ink-soft); }
+.cg-field input, .cg-field textarea {
+  box-sizing: border-box; width: 100%; min-height: 44px; padding: 11px 14px;
+  background: var(--cg-elevated); border: 1px solid var(--cg-line); border-radius: var(--cg-radius-field);
+  font-size: 16px; color: var(--cg-ink);
+  transition: border-color var(--cg-dur) var(--cg-ease), box-shadow var(--cg-dur) var(--cg-ease);
+}
+@media (min-width: 560px) { .cg-field input, .cg-field textarea { font-size: 15px; } }
+.cg-field input::placeholder, .cg-field textarea::placeholder { color: var(--cg-ink-disabled); }
+.cg-field textarea { resize: vertical; }
+.cg-field input:focus, .cg-field textarea:focus { outline: none; border-color: var(--cg-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cg-ink) 12%, transparent); }
+/* Ernährung (docs/15): Chips als Checkboxen, Zustand rein per CSS. Rhythmus wie das Formular:
+   12px zwischen Gruppen, Label + 5px zum Inhalt (.cg-field). */
+.cg-dietary { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
+.cg-field__label { font-size: 13px; font-weight: 500; color: var(--cg-ink-soft); }
+.cg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
+.cg-chip { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--cg-line); border-radius: 999px; background: var(--cg-elevated); font-size: 14px; color: var(--cg-ink); cursor: pointer; user-select: none; transition: background var(--cg-dur) var(--cg-ease), border-color var(--cg-dur) var(--cg-ease), color var(--cg-dur) var(--cg-ease); }
+.cg-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
+.cg-chip span { color: inherit; }
+.cg-chip:has(input:checked) { background: var(--cg-accent); border-color: var(--cg-accent); color: var(--cg-accent-ink, #fff); }
+.cg-chip:has(input:focus-visible) { outline: 2px solid var(--cg-ink); outline-offset: 2px; }
+/* <details> stellt seine Kinder in einen internen Slot — Abstände deshalb über einen eigenen Body,
+   und box-sizing explizit, weil der Slot content-box vererbt. */
+.cg-details { display: block; min-width: 0; }
+.cg-details__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin-top: 12px; }
+.cg-details__body input { box-sizing: border-box; }
+.cg-details summary { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 24px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--cg-ink-soft); list-style: none; }
+.cg-details summary::-webkit-details-marker { display: none; }
+.cg-details summary:hover, .cg-details[open] summary { color: var(--cg-ink); }
+.cg-details__chevron { display: inline-block; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--cg-dur) var(--cg-ease); }
+.cg-details[open] .cg-details__chevron { transform: rotate(45deg); }
+.cg-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--cg-ink-soft); cursor: pointer; padding-top: 2px; }
+.cg-consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cg-accent); flex: 0 0 auto; }
+.cg-summary {
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  margin: 0; padding: 10px 14px; border-radius: var(--cg-radius-field);
+  background: var(--cg-tint); font-size: 14px; font-weight: 500; color: var(--cg-ink);
+  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
+}
+
+.cg-widget__actions { display: flex; align-items: stretch; gap: 8px; width: 100%; }
+.cg-widget__actions .cg-btn--primary { flex: 1 1 auto; width: auto; min-height: 48px; }
+.cg-btn--icon { flex: 0 0 48px; width: 48px; min-height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
+
+/* ---------- Buttons ---------- */
+.cg-btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  min-height: 44px; min-width: 0; padding: 0 18px; border-radius: var(--cg-radius-control);
+  font-size: 15px; font-weight: 500; cursor: pointer; text-decoration: none; white-space: nowrap;
+  transition: opacity var(--cg-dur) var(--cg-ease), background-color var(--cg-dur) var(--cg-ease), border-color var(--cg-dur) var(--cg-ease), transform var(--cg-dur) var(--cg-ease);
+}
+.cg-btn:active { transform: scale(0.98); }
+.cg-btn--primary { width: 100%; min-height: 48px; background: var(--cg-cta); border: 1px solid var(--cg-cta); color: var(--cg-cta-ink); }
+.cg-btn--primary:hover { opacity: 0.9; }
+.cg-btn--primary:disabled { background: var(--cg-tint); border-color: var(--cg-line); color: var(--cg-ink-disabled); opacity: 1; cursor: default; }
+.cg-btn--secondary { background: var(--cg-elevated); border: 1px solid var(--cg-line); color: var(--cg-ink); box-shadow: var(--cg-shadow-raised); }
+@media (hover: hover) { .cg-btn--secondary:hover { border-color: var(--cg-line-strong); } }
+
+/* ---------- Status-/Tag-Pillen ---------- */
+.cg-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 6px; font-size: 13px; font-weight: 500; white-space: nowrap; }
+.cg-pill--status { background: var(--cg-status-bg); color: var(--cg-status-ink); }
+.cg-pill--tag { background: var(--cg-accent-weak); color: var(--cg-accent-weak-text); }
+.cg-pill--outline { background: var(--cg-elevated); border: 1px solid var(--cg-line); color: var(--cg-ink-soft); }
+
+/* ---------- Bestätigung ---------- */
+.cg-widget__success { align-items: center; text-align: center; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
+.cg-widget__success-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--cg-accent); color: var(--cg-accent-ink); font-size: 20px; }
+.cg-widget__success-title { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
+.cg-widget__success-when { margin: 0; font-size: 15px; color: var(--cg-ink-muted); font-variant-numeric: tabular-nums; }
+
+/* ---------- Speisekarte ---------- */
+.cg-menu { display: flex; flex-direction: column; gap: 28px; }
+.cg-menu__category-title { margin: 0 0 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
+.cg-menu__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+.cg-menu__item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--cg-line); }
+.cg-menu__item:last-child { border-bottom: 0; }
+.cg-menu__item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.cg-menu__item-name { font-size: 15px; font-weight: 500; }
+.cg-menu__item-desc { font-size: 14px; color: var(--cg-ink-soft); }
+.cg-menu__item-price { font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cg-ink-muted); }
+.cg-menu__item--unavailable .cg-menu__item-name { text-decoration: line-through; color: var(--cg-ink-disabled); }
+.cg-menu__footnote { margin-left: 4px; font-size: 11px; color: var(--cg-ink-soft); }
+.cg-menu__badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 6px; background: var(--cg-tint); color: var(--cg-ink-muted); font-size: 12px; font-weight: 500; vertical-align: middle; }
+.cg-menu__badge--muted { background: var(--cg-tint); color: var(--cg-ink-soft); }
+.cg-menu__legend { padding-top: 16px; border-top: 1px solid var(--cg-line); font-size: 13px; color: var(--cg-ink-soft); }
+.cg-menu__legend-title { margin: 0 0 8px; font-weight: 500; color: var(--cg-ink-muted); }
+.cg-menu__legend-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; margin: 0; }
+.cg-menu__legend-list div { display: flex; gap: 8px; }
+.cg-menu__legend-list dt { width: 18px; color: var(--cg-ink-muted); font-weight: 500; }
+.cg-menu__legend-list dd { margin: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .cg-root *, .cg-root *::before, .cg-root *::after { animation: none !important; transition: none !important; }
+}

package/dist/theme.d.ts

@@ -0,0 +1,25 @@
+/**
+ * CSS-Variablen-Vertrag (headless-first, docs/09) — Namen und Defaults aus docs/10.
+ * Kunden-Websites überschreiben diese Variablen; die Komponenten bringen nur das
+ * Default-Theme (Connect-Gastro-Identität) mit. Nichts ist hart codiert.
+ */
+export declare const CSS_VARIABLES: {
+    readonly '--cg-bg': "App-/Seitenhintergrund (Default Weiß)";
+    readonly '--cg-surface': "Karten / Felder (Default Weiß)";
+    readonly '--cg-ink': "Text und die eine Hauptaktion";
+    readonly '--cg-ink-muted': "Sekundärtext";
+    readonly '--cg-accent': "Akzent: Auswahl, aktiv, Marke (Default Ink — monochrom)";
+    readonly '--cg-accent-weak': "Akzent-Tint: Badges, Hover, Skeleton";
+    readonly '--cg-line': "Hairlines, Borders";
+    readonly '--cg-success': "gedeckter Erfolg (nie allein, immer mit Text)";
+    readonly '--cg-danger': "destruktiv: nur Text/Border im Ruhezustand";
+    readonly '--cg-radius-card': "Eckenradius Karten";
+    readonly '--cg-radius-control': "Eckenradius Buttons/Chips/Inputs (Default 10px)";
+    readonly '--cg-dur': "Transition-Dauer";
+    readonly '--cg-ease': "Easing (ease-out)";
+    readonly '--cg-font': "Schriftfamilie (Default: erbt von der Website)";
+};
+export type CssVariable = keyof typeof CSS_VARIABLES;
+export declare const DEFAULT_THEME: Record<CssVariable, string>;
+/** Preisformat (de-DE), Cents → "12,90 €" */
+export declare function formatPrice(cents: number, locale?: string, currency?: string): string;

package/dist/theme.js

@@ -0,0 +1,42 @@
+/**
+ * CSS-Variablen-Vertrag (headless-first, docs/09) — Namen und Defaults aus docs/10.
+ * Kunden-Websites überschreiben diese Variablen; die Komponenten bringen nur das
+ * Default-Theme (Connect-Gastro-Identität) mit. Nichts ist hart codiert.
+ */
+export const CSS_VARIABLES = {
+    '--cg-bg': 'App-/Seitenhintergrund (Default Weiß)',
+    '--cg-surface': 'Karten / Felder (Default Weiß)',
+    '--cg-ink': 'Text und die eine Hauptaktion',
+    '--cg-ink-muted': 'Sekundärtext',
+    '--cg-accent': 'Akzent: Auswahl, aktiv, Marke (Default Ink — monochrom)',
+    '--cg-accent-weak': 'Akzent-Tint: Badges, Hover, Skeleton',
+    '--cg-line': 'Hairlines, Borders',
+    '--cg-success': 'gedeckter Erfolg (nie allein, immer mit Text)',
+    '--cg-danger': 'destruktiv: nur Text/Border im Ruhezustand',
+    '--cg-radius-card': 'Eckenradius Karten',
+    '--cg-radius-control': 'Eckenradius Buttons/Chips/Inputs (Default 10px)',
+    '--cg-dur': 'Transition-Dauer',
+    '--cg-ease': 'Easing (ease-out)',
+    '--cg-font': 'Schriftfamilie (Default: erbt von der Website)',
+};
+export const DEFAULT_THEME = {
+    '--cg-bg': '#FFFFFF',
+    '--cg-surface': '#FFFFFF',
+    '--cg-ink': '#0A0A0A',
+    '--cg-ink-muted': '#525252',
+    '--cg-accent': '#0A0A0A',
+    '--cg-accent-weak': '#F5F5F5',
+    '--cg-line': '#E5E5E5',
+    '--cg-success': '#15803D',
+    '--cg-danger': '#B91C1C',
+    '--cg-radius-card': '16px',
+    '--cg-radius-control': '10px',
+    '--cg-dur': '150ms',
+    '--cg-ease': 'cubic-bezier(0.2, 0, 0, 1)',
+    '--cg-font': 'inherit',
+};
+/** Preisformat (de-DE), Cents → "12,90 €" */
+export function formatPrice(cents, locale = 'de-DE', currency = 'EUR') {
+    return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(cents / 100);
+}
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,SAAS,EAAE,uCAAuC;IAClD,cAAc,EAAE,gCAAgC;IAChD,UAAU,EAAE,+BAA+B;IAC3C,gBAAgB,EAAE,cAAc;IAChC,aAAa,EAAE,yDAAyD;IACxE,kBAAkB,EAAE,sCAAsC;IAC1D,WAAW,EAAE,oBAAoB;IACjC,cAAc,EAAE,+CAA+C;IAC/D,aAAa,EAAE,4CAA4C;IAC3D,kBAAkB,EAAE,oBAAoB;IACxC,qBAAqB,EAAE,iDAAiD;IACxE,UAAU,EAAE,kBAAkB;IAC9B,WAAW,EAAE,mBAAmB;IAChC,WAAW,EAAE,gDAAgD;CACrD,CAAA;AAIV,MAAM,CAAC,MAAM,aAAa,GAAgC;IACxD,SAAS,EAAE,SAAS;IACpB,cAAc,EAAE,SAAS;IACzB,UAAU,EAAE,SAAS;IACrB,gBAAgB,EAAE,SAAS;IAC3B,aAAa,EAAE,SAAS;IACxB,kBAAkB,EAAE,SAAS;IAC7B,WAAW,EAAE,SAAS;IACtB,cAAc,EAAE,SAAS;IACzB,aAAa,EAAE,SAAS;IACxB,kBAAkB,EAAE,MAAM;IAC1B,qBAAqB,EAAE,MAAM;IAC7B,UAAU,EAAE,OAAO;IACnB,WAAW,EAAE,4BAA4B;IACzC,WAAW,EAAE,SAAS;CACvB,CAAA;AAED,6CAA6C;AAC7C,MAAM,UAAU,WAAW,CAAC,KAAa,EAAE,MAAM,GAAG,OAAO,EAAE,QAAQ,GAAG,KAAK;IAC3E,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC,CAAA;AAC3F,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,56 @@
+/**
+ * Öffentliche Datentypen — Spiegel der Public API (/api/public/v1, docs/09).
+ * Logik (Verfügbarkeit, Validierung, Consent) bleibt serverseitig.
+ */
+export interface PublicMenuPriceOption {
+    name: string;
+    priceCents: number;
+}
+export interface PublicMenuItem {
+    id: string;
+    name: string;
+    description: string | null;
+    priceCents: number;
+    allergens: string[];
+    additives: string[];
+    isAvailable: boolean;
+    isSpecial: boolean;
+    /** seit Speisekarte v2 (docs/14) — optional, ältere Payloads haben die Felder nicht */
+    imageUrl?: string | null;
+    tags?: string[];
+    /** Größen/Varianten mit absolutem Preis */
+    variants?: PublicMenuPriceOption[];
+    /** Aufpreis-Optionen */
+    extras?: PublicMenuPriceOption[];
+}
+export interface PublicMenuCategory {
+    id: string;
+    name: string;
+    items: PublicMenuItem[];
+    /** seit v2: Untergruppe einer Kategorie (eine Ebene); flache Liste, Kinder folgen dem Elternteil */
+    parentId?: string | null;
+    description?: string | null;
+    icon?: string | null;
+    imageUrl?: string | null;
+}
+export interface PublicMenuOffer {
+    id: string;
+    title: string;
+    description: string | null;
+    icon: string | null;
+    /** 0 = Sonntag … 6 = Samstag; leer = täglich */
+    weekdays: number[];
+    startLocal: string | null;
+    endLocal: string | null;
+    items: {
+        itemId: string;
+        offerPriceCents: number | null;
+    }[];
+}
+export interface PublicAvailabilitySlot {
+    /** ISO 8601 mit Zeitzone */
+    slotStart: string;
+    remainingCovers: number;
+    maxPartySize: number;
+}
+export type PublicBookingError = 'SLOT_FULL' | 'OUTSIDE_HOURS' | 'VALIDATION' | 'NOT_FOUND' | 'RATE_LIMITED' | 'UNKNOWN';

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@connectstudio/gastro-ui",
+  "version": "0.3.0",
+  "description": "Buchungs-Widget und Speisekarte für Connect-Gastro-Kunden-Websites (headless-first, CSS-Variablen).",
+  "license": "UNLICENSED",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tomheyden/connect-gastro.git",
+    "directory": "packages/gastro-ui"
+  },
+  "homepage": "https://gastro.connectstudio.io",
+  "keywords": [
+    "restaurant",
+    "reservierung",
+    "booking-widget",
+    "speisekarte",
+    "react"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "sideEffects": [
+    "./dist/styles.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css",
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "echo \"(gastro-ui) Lint über Plattform-ESLint in Phase 4\"",
+    "test": "vitest run",
+    "prepublishOnly": "pnpm build && pnpm test"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.11"
+  }
+}