/* ############################################################ ## ## ## K E I N E E C K I G E N K N O E P F E ## ## ## ## Jeder Knopf ist eine KAPSEL: border-radius: 999px ## ## Jedes Eingabefeld auch. Jeder Chip. Jede Taste. ## ## ## ## Nur FLAECHEN duerfen Ecken haben - Karten, Bloecke, ## ## Blaetter. Karte 24px, Kachel darin 17px. Nie ## ## weniger, und innen immer kleiner als aussen. ## ## ## ## Wer in einer Seite eine eigene .k-Regel schreibt, ## ## macht diese Datei kaputt. Knoepfe gehoeren HIERHER ## ## und nirgendwo sonst. ## ## ## ############################################################ ============================================================ KUSHT DESIGN-SYSTEM Eine Datei. Wer hier eine Farbe aendert, aendert sie ueberall. REGEL 1 Kundenseiten sind IMMER hell. Das ist die Marke, und Essensfotos wirken auf hellem Grund appetitlicher. REGEL 2 Personalseiten starten hell und haben einen Schalter. Sie richten sich NIE automatisch nach dem Geraet - sonst sieht dieselbe Seite auf zwei Geraeten anders aus. Dunkel gibt es nur ueber . REGEL 3 Neue Bauteile kommen hierher, nicht in die Seite. Sie heissen k-... , damit sie nie mit einer Seitenklasse kollidieren. REGEL 4 EIN Rot pro Bild. Rot ist die eine Haupttaste oder die Gefahr - nie beides gleichzeitig, nie Schmuck. Alles andere ist Tinte auf Flaeche. ============================================================ */ :root{ /* ---- Marke ---------------------------------------------- */ --rot: #E8442A; /* Tandir-Glut, die eine Akzentfarbe */ --rot-tief: #C9331B; --rot-schein: rgba(232,68,42,.16); --rot-sanft: rgba(232,68,42,.10); /* ---- Flaechen, waermlich getoent statt neutralgrau ------- */ --grund: #F5F3EF; --flaeche: #FFFFFF; --flaeche-2: #EDE9E3; --flaeche-3: #E3DDD5; /* ---- Schrift -------------------------------------------- */ --tinte: #17120F; --tinte-2: #79706A; --tinte-3: #A79E96; /* ---- Linien --------------------------------------------- */ --linie: rgba(23,18,15,.07); --linie-stark:#D2C8BC; /* ---- Bedeutung, bewusst getrennt vom Marken-Rot ---------- */ --ok: #1F7A52; --ok-grund: #E6F3EC; --achtung: #9A5B00; --achtung-grund: #FBEFDD; --alarm: #B3261E; --alarm-grund: #FBE9E7; --weg: #1D5FA8; --weg-grund: #E7EFF9; /* ---- Ecken ---------------------------------------------- */ --r-1: 9px; --r-2: 12px; --r-3: 15px; --r-4: 19px; --r-5: 24px; /* Karten - die weiche, ruhige Ecke */ --r-innen: 17px; /* Kacheln IN einer Karte, immer kleiner als die Karte */ --r-voll: 999px; /* ---- Abstaende ------------------------------------------ */ --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 22px; --a-6: 30px; /* ---- Schriftstufen -------------------------------------- */ --s-mikro: 10.5px; --s-klein: 12.5px; --s-text: 15px; --s-gross: 17px; --s-titel: 21px; --s-riesig: 34px; /* ---- Hebung --------------------------------------------- */ --heb-1: 0 1px 2px rgba(30,24,21,.05); --heb-2: 0 1px 2px rgba(30,24,21,.05), 0 6px 20px rgba(30,24,21,.06); --heb-karte: 0 1px 1px rgba(23,18,15,.03), 0 10px 30px rgba(23,18,15,.06); /* ---- Bewegung: kurz, weich, nie verspielt ---------------- */ --zeit: 150ms; --kurve: cubic-bezier(.22,.61,.36,1); --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, "Noto Sans Armenian", "Noto Sans", sans-serif; color-scheme: light; } /* ---- Dunkel: NUR wenn es ausdruecklich gesetzt wird. Fast schwarz und NEUTRAL - kein Braungrau, kein Rotstich. Hell bleibt warm, dunkel wird kuehl: genau wie bei Apple. ---- */ :root[data-thema="dunkel"]{ --rot: #FF6A4D; --rot-tief: #E8442A; --rot-schein: rgba(255,106,77,.22); --rot-sanft: rgba(255,106,77,.15); --grund: #000000; /* wirklich schwarz */ --flaeche: #131315; --flaeche-2: #1D1D20; --flaeche-3: #2A2A2E; --tinte: #F7F7F8; --tinte-2: #9B9BA2; --tinte-3: #6C6C74; --linie: rgba(255,255,255,.07); --linie-stark:#34343A; --ok: #4FC98A; --ok-grund: rgba(79,201,138,.15); --achtung: #E5A73C; --achtung-grund: rgba(229,167,60,.14); --alarm: #FF7A6B; --alarm-grund: rgba(255,122,107,.14); --weg: #7FB3F0; --weg-grund: rgba(127,179,240,.14); --heb-1: 0 1px 2px rgba(0,0,0,.4); --heb-2: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --heb-karte: none; /* im Dunkeln trennt Helligkeit, kein Schatten */ color-scheme: dark; } /* ============================================================ Grundgerüst ============================================================ */ *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent } html, body{ margin:0; background:var(--grund); color:var(--tinte); font:var(--s-text)/1.5 var(--schrift); -webkit-font-smoothing:antialiased; text-size-adjust:100%; } button, input, select, textarea{ font:inherit; color:inherit } /* ############################################################ ## DER BROWSER GIBT JEDEM