Öffentliche Speisekarte: Wochenansicht, konfigurierbare Farben, Allergen-Legende

app/globals.css

@@ -1,26 +1,110 @@
 @import "tailwindcss";
 
+/* Farb-Variablen: Defaults entsprechen r-hofmann.de; werden zur Laufzeit
+   aus den Einstellungen (Supabase settings.colors) überschrieben. */
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --c-primary: #003388;
+  --c-primary-dark: #0d315c;
+  --c-accent: #ff6900;
+  --c-header-text: #ffffff;
+  --c-row-bg: #e3e4f1;
+  --c-row-bg-alt: #f4f4fa;
+  --c-add: #6da54c;
+  --c-del: #e2371d;
 }
 
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background: #ffffff;
+  color: #1a1a1a;
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+}
+
+/* ---------- Buttons ---------- */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  padding: 0.35rem 1rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #ffffff;
+  cursor: pointer;
+  border: 1px solid rgb(0 0 0 / 0.15);
+  transition: filter 0.15s ease;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.btn:hover { filter: brightness(1.08); }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.btn-add { background: var(--c-add); }
+.btn-del { background: var(--c-del); }
+.btn-primary { background: var(--c-primary); }
+.btn-neutral { background: #6b7280; }
+
+/* ---------- Formulare ---------- */
+.input {
+  width: 100%;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  padding: 0.4rem 0.6rem;
+  font-size: 0.9rem;
+  background: #ffffff;
+  color: #1a1a1a;
+}
+.input:focus { outline: 2px solid var(--c-primary); outline-offset: 0; }
+.label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  margin-bottom: 0.15rem;
+  color: #374151;
+}
+.card {
+  background: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
+}
+
+/* ---------- Speisekarten-Tabelle ---------- */
+.menu-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 2px;
+  table-layout: fixed;
+}
+.menu-table th.day-head {
+  background: var(--c-primary);
+  color: var(--c-header-text);
+  padding: 0.5rem 0.5rem;
+  font-size: 0.9rem;
+  line-height: 1.3;
+}
+.menu-table th.section-head {
+  background: var(--c-primary);
+  color: var(--c-header-text);
+  text-align: left;
+  vertical-align: middle;
+  padding: 0.6rem 0.8rem;
+  font-size: 0.95rem;
+}
+.menu-table th.section-head .time {
+  font-weight: 400;
+  font-size: 0.8rem;
+}
+.menu-table td.cell {
+  background: var(--c-row-bg);
+  vertical-align: top;
+  text-align: center;
+  padding: 0.5rem;
+  font-size: 0.85rem;
+}
+.menu-table tr:nth-child(even) td.cell { background: var(--c-row-bg-alt); }
+.menu-table td.cell .dish { margin-bottom: 0.35rem; }
+.menu-table td.cell .dish sup {
+  font-size: 0.6rem;
+  color: #4b5563;
+  margin-left: 0.15rem;
 }