/* ══════════════════════════════════════════════════════════════════════════════ padelsmart – CI. Eine Quelle für alles. Angelegt 05.08.2026 auf Timurs Ansage: „das CI UNIVERSAL von der neuesten App-Version aus kopieren und überall übertragen." HERKUNFT: 1:1 aus `padelsmart-screens/app-demo.html` (Zeilen 41–68), der neuesten App-Fassung. Nicht nachgebaut, nicht interpretiert – abgeschrieben. Wenn sich die App ändert, ändert sich diese Datei, nicht umgekehrt. REGEL: Wer eine Farbe, Schrift oder einen Radius braucht, nimmt einen Token von hier. Kein Hex direkt im Markup, keine eigene Palette pro Oberfläche. Genau daran ist es bisher auseinandergelaufen: Website, Web-App, Cockpit und Betriebs-Cockpit hatten je eigene Token-Blöcke mit teils gleichen, teils abweichenden Werten. HELL/DUNKEL: Über `data-theme="light"` bzw. `"dark"` auf dem Wurzelelement der jeweiligen Oberfläche. Die App setzt es auf `.app`, damit mehrere Geräte-Vorschauen nebeneinander verschiedene Themes zeigen können; eine normale Seite setzt es auf ``. ⚠ NICHT übernommen: Die App kennt `data-ton="0"` mit `--brand:#7206FF` und `--lime:#C0FF03`. Das ist der alte Neon-Ton aus V1, per URL umschaltbar zum Vergleichen. Timur hat am 20.07. den heutigen Ton festgelegt („Ton 1 ist schon zu pastellig, eine Mischung aus 0 und 1"). Die Altfassung gehört nicht ins CI. ══════════════════════════════════════════════════════════════════════════════ */ /* ── Marke: gilt immer, unabhängig vom Theme ──────────────────────────────── */ :root{ --brand:#7B2CF7; /* Markenlila – Aktion, Auswahl, Fokus */ --lime:#C5F733; /* Lime – Akzent und Aktion auf dunklem Grund */ --blau:#7CC4FF; /* Eisblau – KI und Technik */ --fd:'Baloo 2'; /* Display: Überschriften, Zahlen */ --fb:'Inter'; /* Body: Fließtext, Beschriftungen */ } /* ── Hell ───────────────────────────────────────────────────────────────────── ⚠ Bewusst DOPPELT adressiert: `:root` und `[data-theme="light"]`. Grund: Die Oberflächen handhaben das Thema unterschiedlich. Die App setzt `data-theme` immer explizit auf `.app`. Die Web-App dagegen ist ohne Attribut hell und setzt es nur für Dunkel – dort würde ein reiner `[data-theme="light"]`-Block nie greifen und die Seite stünde ohne Farben da. Hell ist deshalb der Standard, „light" nur die ausdrückliche Form davon. */ :root, [data-theme="light"]{ --bg:#ECE9F4; --card:#fff; --line:rgba(18,4,42,.10); --soft:rgba(18,4,42,.06); --ink:#12042a; --body:#443E62; --dim:#6A6589; --faint:#B7B2CB; --track:#E9E5F2; --chipbg:#F2EFF9; --avbg:#DED9EC; --ice-text:#1C73C8; --blau:#7CC4FF; --blau-flaeche:#7CC4FF; /* Steuerflächen (Kalender, Auswahlpanels): Timur wollte sie NICHT dunkel abgesetzt, sondern als normale Karte. Bleibt als Alias, damit die Absicht im Code sichtbar ist und nicht versehentlich wieder eingefärbt wird. */ --steuer-bg:var(--card); --steuer-linie:var(--line); --tabbar:#fff; --tab-active:var(--brand); --tab-inactive:#7A7499; --slot-sel-bg:var(--brand); --slot-sel-ink:#fff; /* ⚠ Korrigiert gegenüber der App: dort steht rgba(114,6,255,.4) – das ist #7206FF, der alte Neon-Ton aus V1, der beim Ton-Wechsel am 20.07. an dieser einen Stelle stehen geblieben ist. Richtig ist das aktuelle Markenlila #7B2CF7 = 123,44,247; die Web-App führt es bereits so. Einer von zwei Werten, die ich NICHT blind aus der App übernommen habe. */ --slot-free-bd:rgba(123,44,247,.4); --slot-free-ink:var(--brand); --slot-busy-bg:#EFECF6; --slot-busy-ink:#B7B2CB; --tabshadow:0 -10px 30px rgba(18,4,42,.10); --hi:rgba(18,4,42,.25); /* Zustände und Flächen – von den Cockpits gebraucht, in der App gibt es sie nicht. Die Hell-Werte stammen aus `betrieb.html`, die Dunkel-Werte aus `admin.html`; beide existierten schon, standen aber je Datei doppelt. */ --up:#12A150; --down:#D42A50; --warn:#E8A33D; --brand-soft:#F1E9FE; /* zarte Lila-Fläche (Balken-Hintergrund, Hover) */ --lime-ink:#41630A; /* Text AUF Lime – bleibt dunkel, in beiden Themes */ /* Zweitnamen und Pastellflächen aus dem Betriebsteil: `ok`/`crit` meinen dasselbe wie `up`/`down`, die `-soft`-Varianten sind die zugehörigen Flächen hinter Statustexten. Beides lag bisher nur in `betrieb.html`. */ --ok:#12A150; --ok-soft:#E7F6EE; --crit:#D42A50; --crit-soft:#FDEBEF; --warn-soft:#FDF2E0; } /* ── Dunkel ───────────────────────────────────────────────────────────────── */ [data-theme="dark"]{ --bg:#0E0921; --card:#16112e; --line:rgba(255,255,255,.07); --soft:rgba(255,255,255,.05); --ink:#fff; --body:#b9b3d6; --dim:#8b84b0; --faint:#524b78; --track:rgba(255,255,255,.07); --chipbg:#241a45; --avbg:#241a52; --ice-text:#7CC4FF; --blau:#7CC4FF; --blau-flaeche:#7CC4FF; --steuer-bg:var(--card); --steuer-linie:var(--line); --tabbar:#141026; --tab-active:var(--lime); --tab-inactive:#6f6798; --slot-sel-bg:var(--lime); --slot-sel-ink:#12042a; --slot-free-bd:rgba(255,255,255,.35); --slot-free-ink:#fff; --slot-busy-bg:rgba(255,255,255,.04); --slot-busy-ink:#524b78; --tabshadow:0 -10px 30px rgba(0,0,0,.5); --hi:rgba(255,255,255,.3); /* Zustände auf dunklem Grund deutlich heller – die satten Hell-Werte (#12A150, #D42A50) fallen dort unter die Lesegrenze. Am 04.08. im Cockpit gemessen. */ --up:#3ED88A; --down:#FF6683; --warn:#FFB74A; --brand-soft:#241145; --lime-ink:#1B2A05; /* Die Pastellflächen des Betriebsteils (#FDEBEF, #E7F6EE, #FDF2E0) sind für hellen Grund gemacht – auf dunklem Grund wären das grelle Flecken. Hier stattdessen die jeweilige Statusfarbe mit niedriger Deckkraft, wie beim Warn-Tag am 04.08. */ --ok:#3ED88A; --ok-soft:rgba(62,216,138,.13); --crit:#FF6683; --crit-soft:rgba(255,102,131,.14); --warn-soft:rgba(255,183,74,.14); } /* ── Form: aus der Web-App gemessen, damit Flächen überall gleich wirken ──── */ :root{ --r-karte:28px; /* Karten und Kacheln */ --r-klein:22px; /* kleine Kacheln, Handy-Karten */ --r-pille:100px; /* Knöpfe, Chips, Filter */ --pad-karte:24px; /* Innenabstand einer Karte */ --gap-raster:16px; /* Abstand im Kachelraster */ --zahl-gross:clamp(38px,4.4vw,52px); /* Leitzahl in Cockpits */ } /* ── Bewegung ─────────────────────────────────────────────────────────────── */ :root{ --an-ein:250ms; --an-aus:150ms; --an-kurve:cubic-bezier(.2,.8,.2,1); } @media(prefers-reduced-motion:reduce){ :root{--an-ein:1ms;--an-aus:1ms} } /* ══════════════════════════════════════════════════════════════════════════════ BILDLAUFLEISTEN · 01.09.2026 Timur: „ich will nirgendwo so schlecht designte Scroll-Tools sehen, bitte diese schön gestalten und überall einbinden." Zwei Fälle, und sie sind nicht derselbe: · AUF DEM TELEFON gibt es gar keine sichtbare Leiste. iOS und Android blenden sie ein, während man zieht, und wieder aus. Eine dauerhaft sichtbare Leiste in einer App-Vorschau ist deshalb kein Gestaltungsproblem, sondern schlicht falsch — dort wird sie ausgeblendet (`.inhalt`, `.screen`, Blätter, alle waagerechten Reihen). Das steht in den jeweiligen Dateien. · AUF DEN ARBEITSSEITEN (Vergleichsseiten, Werkstatt, Cockpits) ist sie ein echtes Bedienelement und muss sichtbar bleiben — sonst weiß man auf einer zwei Meter langen Seite nicht, wo man ist. Also gestaltet statt versteckt. Der Aufbau: die Spur bleibt leer, der Griff ist ein Marken-Ton mit rundem Ende. Der 3-px-Rahmen in Transparent plus `background-clip:content-box` ist der Kniff, der dem Griff Luft zum Rand gibt — ohne ihn klebt er an der Kante und wirkt wieder wie ab Werk. ⚠ `scrollbar-color` (Firefox) kennt keinen Rahmen; dort ist der Griff etwas breiter. Das ist der Preis dafür, dass es überhaupt eine Regel gibt. ══════════════════════════════════════════════════════════════════════════════ */ :root{ --rollgriff:rgba(123,44,247,.34); --rollgriff-an:rgba(123,44,247,.58); } [data-theme="dark"]{ --rollgriff:rgba(178,140,255,.30); --rollgriff-an:rgba(178,140,255,.52); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --rollgriff:rgba(178,140,255,.30); --rollgriff-an:rgba(178,140,255,.52); } } *{scrollbar-width:thin; scrollbar-color:var(--rollgriff) transparent} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background-color:var(--rollgriff);border-radius:99px; border:3px solid transparent;background-clip:content-box} ::-webkit-scrollbar-thumb:hover{background-color:var(--rollgriff-an)} ::-webkit-scrollbar-corner{background:transparent}