/* ========================================================================= NEXUP Workspace - design system (aligned with the NEXUP Studio brand) ========================================================================= */ /* Montserrat - lokal gebuendelt, dieselben vier Schnitte wie nexup.studio. Der 300er-Schnitt ist am 27.08.2026 raus: er war geladen, aber keine einzige Regel hat ihn je angefordert, und auf der Website gibt es ihn nicht. */ @font-face { font-family:"Montserrat"; src:url("assets/fonts/montserrat-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face { font-family:"Montserrat"; src:url("assets/fonts/montserrat-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; } @font-face { font-family:"Montserrat"; src:url("assets/fonts/montserrat-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face { font-family:"Montserrat"; src:url("assets/fonts/montserrat-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } :root { /* Hoehenleiter: FUENF Stufen, weil die App genau fuenf Flaechen benutzt. Bis zum 23.08.2026 liefen hier zwei Systeme nebeneinander: --bg/--bg-elev/--surface/ --surface-2/--surface-3 mit 78 Verwendungen und daneben eine 2026 eingefuehrte --e0..--e3-Leiter mit ganzen fuenf. Zwei Namen fuer dieselbe Sache sind schlimmer als einer, deshalb ist die Leiter jetzt die einzige Wahrheit - mit denselben Werten wie vorher, also ohne jede sichtbare Aenderung. Die alten Namen bleiben als Verweis stehen, damit nichts bricht; neue Regeln benutzen --e0 bis --e4. Dieselbe Lehre wie bei den Abstaenden: passt die Leiter nicht zur Sache, war die Leiter falsch - nicht die Sache. */ /* 27.08.2026: Die Leiter stand auf einem NEUTRALEN Grauton, die Website auf einem BLAUEN. Nebeneinander gehalten sah die App neben nexup.studio kalt-grau aus, die Website tiefblau - derselbe Eindruck wie zwei Fotos mit verschiedenem Weissabgleich. Die ersten drei Stufen sind jetzt Zeichen fuer Zeichen die der Website (--grund / --grund-2 / --grund-3), die beiden oberen setzen dieselbe Rampe fort. */ --e0: #070a10; /* Grund, Seitenhintergrund = Website --grund */ --e1: #0a0f17; /* leicht abgehoben: Leiste = Website --grund-2 */ --e2: #0e141e; /* Panel, Karte, Zeile = Website --grund-3 */ --e3: #141c28; /* angehoben im Panel: Hover, Eingabe */ --e4: #1e2836; /* Schwebendes: Dialog, Menue, Chip */ --hairline: rgba(255,255,255,.07); /* Alte Namen, nur noch Verweise. Nicht mehr in neuen Regeln benutzen. */ --bg: var(--e0); --bg-elev: var(--e1); --surface: var(--e2); --surface-2: var(--e3); --surface-3: var(--e4); /* Linien - die zwei Stufen der Website (--linie / --linie-2) */ --border: rgba(255,255,255,.10); --border-strong: rgba(255,255,255,.20); /* Tinte - Zeichen fuer Zeichen die der Website. Wichtig: die Tinte ist nicht reines Weiss, sondern leicht blau gebrochen (#eef3f9). Reines Weiss auf blauem Grund liest sich haerter und war der zweite Grund, warum die App neben der Website "anders" wirkte. Die leiseste Stufe stand auf .40 und damit unter dem Lesbarkeitswert; die Website hat sie aus genau dem Grund auf .52 gehoben (5,13:1 auf dem Grund). */ --text: #eef3f9; --text-muted: rgba(238,243,249,.68); --text-faint: rgba(238,243,249,.52); /* Markenblau - Licht, keine Farbflaeche. Die drei Stufen der Website. */ --accent: #3d77bb; /* Website --blau */ --accent-2: #7fb2ee; /* Website --blau-hell: Links, aktive Symbole, Akzentwort */ --accent-deep: #24518a; /* Website --blau-tief: untere Haelfte der Knopfverlaeufe */ --accent-ink: #ffffff; /* Die Website paart bei jeder blauen Markierung eine MITTELBLAUE FLAECHE mit einem HELLBLAUEN RING - so markiert sie den aktuellen Punkt in der Leiste (`rgba(61,119,187,.2)` innen, `rgba(127,178,238,.3)` als Ring). Die App nahm fuer beides dasselbe mittlere Blau; der Ring verschwand dadurch fast in seiner eigenen Fuellung. Und die Fuellung stand auf .16 statt .2 - wieder so ein Wert, den man einzeln nicht sieht und im Vergleich schon. */ --accent-soft: rgba(61,119,187,.2); --accent-line: rgba(127,178,238,.34); /* Statusfarben. Sie muessen sich vom Markenblau unterscheiden - eine Rechnung ist ueberfaellig oder bezahlt, das darf nicht nach "Akzent" aussehen. ABER sie muessen aus demselben Haus kommen. Bis zum 27.08.2026 standen hier die Farben der GitHub-Palette. Nachgemessen: die Markenblaus liegen in einem engen Band (Saettigung 51 bis 77 Prozent), die Statusfarben streuten von 14 bis 93 - Violett mit 89 und Rot mit 93 waren gesaettigter als alles, was die Marke je benutzt. Nebeneinander liest man das nicht als Bedeutung, sondern als zweite Palette. Jetzt: Farbton bleibt (die Bedeutung haengt daran), Saettigung und Helligkeit sind ins Band gezogen. Grau bleibt bewusst neutral, es ist die Abwesenheit von Status. Alle Werte gegen den Grund geprueft, der schwaechste liegt bei 5,3:1 auf einer Karte - ueber der Schwelle von 4,5 fuer kleinen Text. */ --st-lead: #8d99b0; /* Anfrage: neutral, blaugrau S 18 */ --st-proposal: #a685e0; /* Angebot S 60 */ --st-active: #36c6d3; /* laeuft S 64 */ --st-waiting: #d69651; /* wartet auf Kunde S 62 */ --st-done: #4cc25c; /* fertig / bezahlt S 49 */ --danger: #e45f58; /* ueberfaellig / Fehler S 72 */ /* Die gedaempften Flaechen werden aus der Farbe ABGELEITET, nicht daneben geschrieben. Vorher stand jede Toenung als eigenes rgba() da und konnte beim naechsten Farbwechsel stehen bleiben - genau das war bei rgba(90,147,214,.15) im Postfach passiert. */ --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent); /* Radien - die drei der Website plus die kleinste Marke. 27.08.2026: Die App stand auf 8 / 14, die Website auf 10 / 16 / 24. Zwei Pixel Unterschied sieht niemand einzeln, nebeneinander liest sich die App dadurch aber spitzer und die Website weicher. Jetzt dieselbe Leiter: --r-sm = Website --r-klein (Bedienelemente, Chips, Eingaben) --r-md = Website --r-mittel (Karten, Zeilen, Kacheln) --r-lg = Website --r-gross (Panels, Dialoge, alles mit Glaskante) --r-card und --r-ctrl bleiben als Namen bestehen und zeigen auf die Stufen. */ --r-xs: 4px; /* kleine Marken, Fortschrittsbalken */ --r-sm: 10px; /* Bedienelemente, Chips, Eingaben = Website --r-klein */ --r-md: 16px; /* Karten, Kacheln, Zeilen = Website --r-mittel */ --r-lg: 24px; /* Panels, Dialoge, Glasflaechen = Website --r-gross */ --r-pill: 999px; --r-card: var(--r-md); --r-ctrl: var(--r-sm); /* Spacing (4pt). Die Zwischenstufen tragen eine halbe Nummer und liegen jeweils genau zwischen ihren Nachbarn: 0-5 zwischen nichts und s1, 1-5 zwischen s1 und s2, 2-5 zwischen s2 und s3, 4-5 zwischen s4 und s5. Sie sind am 23.08.2026 dazugekommen, weil die App dicht gebaut ist und der Sprung von 4 auf 8 auf 12 dafuer zu grob war: 6, 10, 2 und 20 px standen 182-mal NEBEN der Leiter statt darauf. Nichts hat sich dabei optisch geaendert, die Werte wurden nur benannt. Neue Abstaende gehoeren auf diese zwoelf Stufen. Wer einen dreizehnten Wert braucht, hat entweder ein Layoutproblem oder einen guten Grund - dann hier eintragen. */ --s0-5:2px; --s1:4px; --s1-5:6px; --s2:8px; --s2-5:10px; --s3:12px; --s4:16px; --s4-5:20px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; /* Typoleiter: sieben Stufen statt zwanzig. 11,5 gegen 12 gegen 12,5 sieht niemand, erzeugt aber ein System, das nicht zusammengehoert. Der GEDRUCKTE BELEG ist bewusst ausgenommen: seine Groessen sind in mm/pt vermessen und einzeln abgesichert. */ --t-1: 10px; /* Marken, Tabellenkoepfe, Versalien */ --t-2: 11.5px; /* Unterzeilen, Meta */ --t-3: 12.5px; /* Hinweise, sekundaerer Text */ --t-4: 13.5px; /* Standard: Zeilentitel, Fliesstext */ --t-5: 15px; /* Panel- und Kartenueberschriften */ --t-6: 20px; /* Ansichtstitel */ --t-7: 30px; /* Leitzahlen */ /* Laufweite in drei Stufen, gebunden an die GROESSE: je groesser, desto enger. Genau die Regel der Website. Vorher lief --track-tighter mit -.032em enger als alles andere und wurde ausgerechnet auf 30px-Zahlen gelegt - also enger als die groesste Ueberschrift der Website. Das ist die Leiter andersherum. */ --ls-display: -.02em; /* --t-7, Leitzahlen */ --ls-h2: -.012em; /* --t-6, Ansichtstitel */ --ls-h3: -.01em; /* --t-5 und darunter */ /* Und zwei POSITIVE Stufen fuer Versalien. Kleinschrift in Grossbuchstaben braucht Luft, sonst wird sie zum Block - aber sie braucht EINE Menge Luft, nicht fuenf. Am 27.08.2026 standen in der App .04em, .05em, .06em, .07em und .16em nebeneinander, und zwar fuer dieselbe Sache: ein Etikett in Versalien. Zwei Tabellenkoepfe mit .04 und .05 untereinander liest niemand als Absicht. Beide Werte kommen von der Website: --ls-versal = .07em (Schlagwoerter dort; hier alle Tabellen- und Gruppenkoepfe, weil sie in Reihen stehen) --ls-micro = .16em (das freistehende Kleinstetikett, dort ueber den drei direkten Wegen) Alles andere ist 0. Es gibt keine dritte positive Stufe. */ --ls-versal: .07em; --ls-micro: .16em; /* Alte Namen, nur noch Verweise auf die Leiter. */ --track-tight: var(--ls-h2); --track-tighter: var(--ls-display); /* Zeilenhoehe in vier Stufen. Vorher vierzehn Werte zwischen 1 und 1,7 - der Unterschied zwischen 1,5 und 1,55 ist unsichtbar, das Nebeneinander von vierzehn Werten ist es nicht: es macht aus einem System eine Sammlung. Die Website kommt mit drei Ueberschriftsstufen und 1,65 im Fliesstext aus. --lh-eng grosse Grade und Leitzahlen (Website --lh-karte) --lh-titel Zeilen- und Kartentitel (Website --lh-klein) --lh-text Standard in der Flaeche --lh-lesen Text, den man wirklich liest (Website-Fliesstext) Der Wert 1 bleibt erlaubt, wo Text kein Zeilenband haben darf: in Knoepfen, Marken und Kreisen. */ --lh-eng: 1.12; --lh-titel: 1.25; --lh-text: 1.5; --lh-lesen: 1.65; /* Schatten - dieselbe Staffel wie die Glasscheiben der Website: eine harte Nahkante, ein weiter, sehr weicher Wurf. */ --sh-1: 0 2px 6px rgba(0,0,0,.36); --sh-2: 0 30px 60px -40px rgba(0,0,0,.95); --sh-3: 0 44px 90px -54px rgba(0,0,0,.95); --font: "Montserrat",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; --font-display: "Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif; /* KEINE zweite Schrift. Bis zum 27.08.2026 lief hier Cascadia Code fuer Betraege, Belegnummern und den Wiederherstellungsschluessel - eine Fremdschrift in einem Produkt, dessen Identitaet "Montserrat allein" ist, und auf dem Mac ausserdem gar nicht vorhanden (es fiel still auf Menlo zurueck). Montserrat hat echte Tabellenziffern; die Spaltenordnung kommt jetzt von `font-variant-numeric`, nicht von einer anderen Schrift. Der Schluessel ist damit nicht mehrdeutig: sein Alphabet (RC_ALPHA) enthaelt weder I noch L noch O noch U. */ --font-zahl: var(--font); --font-mono: var(--font-zahl); /* alter Name, nur noch Verweis */ /* Kurven und Dauern der Website. --ease stand auf (.23,1,.32,1) und lief damit merklich anders aus als jede Bewegung auf nexup.studio. */ /* ZWEI Kurven, wie die Website. Ein --spring mit Ueberschwung (cubic-bezier(.34,1.4,.5,1)) stand hier bis zum 27.08.2026 und war die einzige Bewegung im ganzen Haus, die zurueckfedert - auf nexup.studio federt nichts. Raus. */ --ease: cubic-bezier(.16,1,.3,1); --ease-2: cubic-bezier(.22,.61,.36,1); /* VIER Dauern, und keine daneben. Vorher lagen in styles.css 57 rohe Werte in zwoelf Abstufungen (.1 .12 .14 .15 .16 .18 .2 .25 .3 .4 .5 s). Kein Mensch sieht den Unterschied zwischen 120 und 140 Millisekunden - aber man spuert, dass zwei Dinge, die gleich aussehen, verschieden schnell reagieren. Genau daran erkennt man ein zusammengesetztes System. --d-druck was sofort da sein muss (Druck, Zellenhover) --d-schnell Farbe, Flaeche, Rand, Deckkraft - alles, was nur ANDERS AUSSIEHT (auf der Website: der Hover in der Leiste) --d-mittel Verschiebung, Skalierung, Schatten - alles, was etwas BEWEGT (auf der Website: der Knopf, der sich anhebt) --d-lang Flaechen, die auffahren oder sich fuellen (Blatt, Balken) Wer eine fuenfte Dauer braucht, hat meistens die falsche der vier. */ --d-druck: 110ms; --d-schnell: 220ms; --d-mittel: 340ms; --d-lang: 520ms; --spring: var(--ease); /* alter Name, nur noch Verweis */ /* EINE Steuerhoehe. Am 27.08.2026 nachgemessen: Knoepfe, Symbolknoepfe, Umschalter, Sortierwahl, Eingabefelder und Navigationspunkte standen auf SIEBEN verschiedenen Hoehen (27, 28, 30, 34, 36, 38, 40 px) - und in der Kopfzeile standen vier davon nebeneinander in einer Reihe. Das ist die sichtbarste Art von Unordnung, weil man die Kanten direkt vergleicht. 36px, weil der Navigationspunkt schon dort stand und weil bei 13,5px Schrift darunter nichts mehr bequem anzutippen ist. `--sm` macht einen Knopf jetzt SCHMALER und die Schrift kleiner, nicht niedriger: eine zweite Hoehe waere genau der Fehler noch einmal. */ --h-ctrl: 36px; --sidebar-w: 244px; /* Hoechstbreite des Inhalts: Seitenspalte (244) plus Arbeitsflaeche (1360). Das Mesh liest diesen Wert und dunkelt alles ausserhalb davon ab - genau wie auf der Website, wo --wrap dieselbe Aufgabe hat. Wer .view breiter macht, zieht diese Zahl mit, sonst rahmt das Netz die falsche Kante. */ --wrap: 1604px; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--t-5); line-height: var(--lh-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Markierter Text stand auf --accent-soft, also einem 16-Prozent-Hauch. Auf dem dunklen Grund war eine Auswahl damit fast nicht zu sehen - man markierte und sah nicht, was. Die Website setzt volles Blau mit weisser Schrift. */ ::selection { background: var(--accent); color: #fff; } /* Dreiecks-Mesh - animiertes Markenzeichen hinter der ganzen App */ .bg-mesh { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; } /* Beim Login die App ausblenden -> hinter dem Overlay liegt nur das Mesh (Muster sichtbar + privat) */ body.is-locked .app { visibility: hidden; } /* ---- Lichthoefe ---------------------------------------------------------- 27.08.2026. Der eine Grund, warum die App neben nexup.studio flach wirkte, obwohl ihre Panels bereits Glas waren: hinter dem Glas stand kein Licht. Die Website legt vier grosse, sehr weiche blaue Hoefe hinter ihre Scheiben, und erst daran bricht sich das Material. Ohne sie ist jede Glasflaeche auf dunklem Grund nur eine dunkle Karte - im CSS der Website steht der Satz woertlich so. Hier liegen sie fest im Fenster statt im Dokument, weil die App in einer Flaeche scrollt und nicht als Seite. Sie stehen als Verlaufsschichten EINES Elements, damit kein zusaetzliches Markup noetig ist; die Reihenfolge ist die des CSS: die erste Schicht liegt oben. Die Vignette ganz unten ist deutlich schwaecher als vorher (.55 -> .38): die Randabdunklung uebernimmt jetzt zum groesseren Teil das Mesh selbst, so wie auf der Website. Zwei Abdunklungen uebereinander frassen den Hoefen genau die Raender weg, an denen sie sitzen. */ body::before { content: ""; position: fixed; inset: 0; background: /* oben rechts, das Hauptlicht (Website .glut--a) */ radial-gradient(circle 620px at 100% -6%, rgba(61,119,187,.28), rgba(61,119,187,.07) 42%, transparent 68%), /* breite Kuppe ueber der Leiste (Website .glut--e) */ radial-gradient(ellipse 120vw 62vh at 50% -20%, rgba(61,119,187,.20), rgba(36,81,138,.08) 46%, transparent 72%), /* links auf halber Hoehe (Website .glut--c) */ radial-gradient(circle 580px at -6% 58%, rgba(61,119,187,.17), transparent 64%), /* rechts unten (Website .glut--d) */ radial-gradient(circle 540px at 106% 84%, rgba(36,81,138,.20), transparent 64%), /* Vignette, damit die Leiste lesbar bleibt */ radial-gradient(120% 100% at 50% 52%, transparent 58%, rgba(3,5,8,.38) 100%); pointer-events: none; z-index: 1; } /* ---- Korn ---------------------------------------------------------------- Die Website legt ueber alles eine feine Rauschschicht. Sie ist der Unterschied zwischen "flaches Schwarz" und "Material" und kostet einen einzigen zusammengesetzten Layer. In der App fehlte sie ganz. Liegt ueber allem, auch ueber Dialogen - genau wie auf der Website, wo sie ueber dem gesamten Inhalt liegt. Nur auf einem FESTEN Element, nie auf einer scrollenden Flaeche: sonst wandert das Korn mit dem Inhalt und wird sichtbar als Muster statt als Oberflaeche. */ body::after { content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .055; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Laufweite haengt an der GROESSE, nicht am Element. Vorher trug jede Ueberschrift -.02em, also der Ansichtstitel mit 20px dieselbe Enge wie eine Leitzahl mit 30px - und eine 15px-Panelueberschrift ebenfalls. Bei 15px liest sich -.02em gequetscht. Grundwert ist jetzt die unterste Stufe; die groesseren Grade holen sich ihre eigene Stufe da, wo sie gesetzt werden. */ h1,h2,h3,h4 { font-family: var(--font-display); margin: 0; letter-spacing: var(--ls-h3); font-weight: 600; } button { font-family: inherit; } a { color: inherit; } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--e4) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--e4); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: padding-box; } /* ========================= App shell ========================= */ .app { position: relative; z-index: 2; display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh; } /* ------- Sidebar ------- */ .sidebar { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5) var(--s3) var(--s4); /* Die Leiste der Website, sobald sie beim Scrollen "fest" wird: derselbe Verlauf in 158 Grad, dieselbe dichtere Fuellung, dieselbe Lichtkante. Seitenspalte und Topleiste sind in einer App IMMER fest - sie stehen nie ueber freiem Grund - deshalb tragen sie hier gleich die dichte Fassung. */ background: linear-gradient(158deg, rgba(255,255,255,.085), rgba(255,255,255,.022) 46%, rgba(255,255,255,.05)), rgba(9,14,22,.82); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border-right: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 1px 0 60px -40px rgba(0,0,0,.95); } .brand { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s2) var(--s5); } .brand__mark { color: var(--text); display: grid; place-items: center; } .brand__mark svg { width: 28px; height: 28px; } .brand__mark .b { fill: var(--accent); } .brand__mark polygon:not(.b) { fill: currentColor; } .brand__text { display: flex; flex-direction: column; line-height: var(--lh-eng); min-width: 0; } .brand__name { font-family: var(--font-display); font-weight: 700; font-size: var(--t-5); letter-spacing: var(--ls-h3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand__sub { font-size: var(--t-2); color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav { display: flex; flex-direction: column; gap: var(--s0-5); } .nav__item { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: 9px var(--s3); background: transparent; border: 0; border-radius: var(--r-pill); color: rgba(238,243,249,.80); font-size: var(--t-4); font-weight: 500; cursor: pointer; text-align: left; transition: background var(--d-schnell) var(--ease), color var(--d-schnell) var(--ease); } /* Die Website faerbt den Punkt beim Zeigen nur weiss auf einer weissen Flaeche und markiert die aktuelle Stelle blau mit blauem Ring (.nav a.hier). Vorher sah in der App der Hover fast aus wie der aktive Punkt: beides blau, beides gerahmt - man konnte nicht sehen, wo man IST, nur wohin man zeigt. */ .nav__item:hover { background: rgba(255,255,255,.07); color: var(--text); } .nav__item:hover .nav__ico { color: var(--text); } .nav__item.is-active { background: rgba(61,119,187,.2); color: var(--text); box-shadow: inset 0 0 0 1px rgba(127,178,238,.3); } .nav__item.is-active .nav__ico { color: var(--accent-2); } .nav__ico { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--text-faint); flex: none; } .nav__ico svg { width: 18px; height: 18px; } .nav__count { margin-left: auto; font-size: var(--t-3); color: var(--text-faint); font-variant-numeric: tabular-nums; } .nav__item.is-active .nav__count { color: var(--text-muted); } .sidebar__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s3); } .backup { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); font-size: var(--t-2); color: var(--text-faint); border-top: 1px solid var(--border); } .backup__dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--text-faint); flex: none; } .backup__dot.is-on { background: var(--st-done); box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-done) 15%, transparent); } .backup__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ------- Main ------- */ .main { display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s4); padding: var(--s4) var(--s6); background: linear-gradient(158deg, rgba(255,255,255,.085), rgba(255,255,255,.022) 46%, rgba(255,255,255,.05)), rgba(9,14,22,.82); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border-bottom: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 8px rgba(0,0,0,.42), 0 30px 60px -40px rgba(0,0,0,.95); } .topbar__title { min-width: 0; } .topbar__title h1 { font-family: var(--font-display); font-size: var(--t-6); font-weight: 700; letter-spacing: var(--ls-h2); } .topbar__sub { margin: var(--s0-5) 0 0; font-size: var(--t-3); color: var(--text-faint); } .topbar__actions { display: flex; gap: var(--s2); align-items: center; } /* Hier sass bis zum 27.08.2026 der Hell/Dunkel-Regler samt kreisfoermiger Ueberblendung (View Transitions API). Beides ist raus: das Aussehen ist dunkel, ohne Wahl - so wie nexup.studio. Im Git steht es vollstaendig. */ .topbar__menu { display: none; } .view { flex: 1; padding: var(--s6); max-width: 1360px; width: 100%; } /* ========================= Buttons ========================= */ /* Der Knopf ist auf der Website `.tat`. Uebernommen sind Verlaufsrichtung, Farben, Lichtkante, Wurf und die Bewegung; NICHT die Groesse - die Website setzt 14/26 Polster bei 15px Schrift, das ist ein Knopf fuer eine Seite mit vier Knoepfen, nicht fuer eine Werkzeugleiste mit sieben. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--h-ctrl); padding: 0 var(--s4); border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: rgba(255,255,255,.045); color: var(--text); font-size: var(--t-4); font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; transition: background var(--d-schnell) var(--ease), transform var(--d-mittel) var(--ease), box-shadow var(--d-mittel) var(--ease), filter var(--d-schnell) var(--ease); } @media (hover: hover) { .btn:hover { background: rgba(255,255,255,.08); } } /* Der Druck ist auf der Website .97 und dauert --d-druck. Vorher .95 in .18s: ein anderer Weg und eine andere Zeit fuer dieselbe Geste. */ .btn:active { transform: scale(.97); transition-duration: var(--d-druck); } /* Grundgroesse fuer jedes Symbol. Steht bewusst VOR den Sonderfaellen, damit .btn svg, .icon-btn svg und .panel__head h2 svg sie weiter ueberschreiben koennen. */ .ico { width: 1em; height: 1em; flex: 0 0 auto; } .btn svg { width: 16px; height: 16px; } /* Der Verlauf lief senkrecht von #4a83c6 nach #3d77bb. Beides zu hell: weisse Schrift auf #4a83c6 kommt auf 3,54:1 und verfehlt die 4,5:1. Die Website hat denselben Fehler am 26.08. behoben und steht seitdem auf #3a72b4 -> #26527f (4,99:1 an der hellsten Stelle, und das haelt auch im Hover). */ .btn--primary { background: linear-gradient(150deg, #3a72b4, #26527f); color: #fff; font-weight: 600; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 10px 26px -14px rgba(61,119,187,.9); } @media (hover: hover) { .btn--primary:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 40px -16px rgba(61,119,187,.95); } } /* Website `.tat--still`: nur ein Ring, keine Flaeche. */ .btn--ghost { background: transparent; border-color: var(--border); box-shadow: none; color: var(--text-muted); } @media (hover: hover) { .btn--ghost:hover { color: var(--text); background: rgba(255,255,255,.06); filter: none; } } .btn--danger { color: var(--danger); border-color: var(--danger-soft); background: transparent; } .btn--danger:hover { background: var(--danger-soft); } .btn--sm { padding: 0 var(--s3); font-size: var(--t-3); } /* Der Ring lief auf --accent (#3d77bb). Das ist das MITTLERE Blau, und auf dem dunklen Grund ist es der schlechteste der drei Werte fuer eine Umrandung: dunkel gegen dunkel. Die Website nimmt dafuer --blau-hell, und zwar als EINE Auffangregel fuer alles, was Fokus bekommen kann - nicht als Liste einzelner Bauteile, die man beim naechsten neuen Knopf vergisst. Genau das ist hier vorher passiert: Regeln gab es fuer .btn, .nav__item, .icon-btn, .theme-switch und .switch, fuer alles andere nichts. */ :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; } .btn:focus-visible, .nav__item:focus-visible, .icon-btn:focus-visible { outline-offset: 3px; } /* Auffangregel: alles, was per Tastatur angesteuert werden kann, zeigt das auch. Vorher gab es Fokusringe nur fuer Knoepfe und Navigation; Zeilen, Karten und Kanban-Karten waren ab dem 23.08.2026 zwar erreichbar, aber unsichtbar fokussiert - ein Fokus, den man nicht sieht, ist keiner. `outline-offset` negativ, damit der Ring bei Zeilen innerhalb der Trennlinie bleibt und die Liste nicht springt. */ /* Zeilen und Karten: der Ring liegt INNEN, damit die Liste beim Fokus nicht springt. Farbe und Staerke kommen aus der Auffangregel darueber. */ [tabindex="0"]:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); } .icon-btn { display: inline-grid; place-items: center; width: var(--h-ctrl); height: var(--h-ctrl); border-radius: var(--r-ctrl); border: 1px solid var(--border); background: var(--e3); color: var(--text-muted); cursor: pointer; transition: background var(--d-schnell) var(--ease), color var(--d-schnell) var(--ease); } .icon-btn:hover { background: var(--e4); color: var(--text); } .icon-btn svg { width: 17px; height: 17px; } /* ========================= Cards / panels ========================= */ /* ---- DAS GLAS ------------------------------------------------------------ Das ist das Material, das nexup.studio traegt, und ab dem 27.08.2026 Zeichen fuer Zeichen dasselbe hier. Die App hatte vorher eine eigene, schwaechere Fassung davon: 155 statt 158 Grad, zwei Verlaufsmarken statt drei, 14 statt 22 Pixel Unschaerfe, eine Lichtkante bei .06 statt .16 und nur einen einzigen Wurfschatten statt der zwei Staffeln. Jeder Wert fuer sich unsichtbar, zusammen der Unterschied zwischen "dunkle Karte" und "Scheibe". Vier Dinge machen die Scheibe aus, kein dekoratives Blur: 1. drei Verlaufsmarken - die dritte holt das Licht am unteren Rand zurueck 2. Unschaerfe MIT Saettigung, sonst wird alles dahinter grau 3. eine harte Lichtkante oben (inset 0 1px 0) 4. zwei Schatten: eine Nahkante und ein sehr weiter, weicher Wurf `.glas` ist der Name der Website und steht hier als eigene Klasse zur Verfuegung; alles, was in der App eine Scheibe sein soll, haengt sich hier an, statt die Werte noch einmal abzuschreiben. */ .glas, .panel { position: relative; isolation: isolate; background: linear-gradient(158deg, rgba(255,255,255,.072), rgba(255,255,255,.018) 46%, rgba(255,255,255,.042)), rgba(12,18,27,.58); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border: 1px solid transparent; border-radius: var(--r-lg); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px rgba(0,0,0,.36), 0 44px 90px -54px rgba(0,0,0,.95); } /* Die Glaskante: ein Verlauf im Rand selbst, hell oben-links, blau unten-rechts. Nur die AEUSSEREN Behaelter tragen sie. Auf Kacheln und Karten ergaben sich damit neun gerahmte Flaechen auf einem Bildschirm, und der Rahmen hoerte auf, etwas zu bedeuten. */ .glas::before, .panel::before, .modal::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(152deg, rgba(255,255,255,.42), rgba(255,255,255,.05) 44%, rgba(127,178,238,.32)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; } /* Zeigerlicht: die Scheibe faengt das Licht dort, wo der Zeiger steht. Auf der Website heisst das .glas--licht und liegt auf Angebotskarten und Fragen. In der App bekommen es die Flaechen, die man wirklich anfasst. Nur bei echtem Zeiger - am Finger gibt es keine Position zu leuchten. */ /* Dieselbe Liste steht in app.js als GLAS_LICHT. Wer hier etwas ergaenzt, ergaenzt es dort mit. */ .glas--licht::after, .stat::after, .ccard::after, .pcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background: radial-gradient(280px circle at var(--mx,50%) var(--my,0%), rgba(127,178,238,.16), transparent 70%); opacity: 0; transition: opacity var(--d-mittel) var(--ease); } @media (hover: hover) { .glas--licht:hover::after, .stat:hover::after, .ccard:hover::after, .pcard:hover::after { opacity: 1; } } .panel__head { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); } /* Ein Symbol in einer Ueberschrift hatte keine Groesse: das SVG streckte sich auf ueber 90 px, fuellte die halbe Kopfzeile und schob den Titel darunter. Betraf drei Panels. Die Regel hier deckelt es ein fuer alle Mal, egal wo jemand eins einsetzt. */ .panel__head h2 { font-size: var(--t-5); font-weight: 600; display: flex; align-items: center; gap: var(--s2); min-width: 0; } .panel__head h2 svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--text-faint); } .panel__head .panel__act { margin-left: auto; } .panel__body { padding: var(--s5); } /* ========================= Dashboard ========================= */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-bottom: var(--s5); } /* Eine Leitzahl fuehrt, drei ordnen sich unter. Die enge Laufweite macht die grosse Zahl kompakt statt gespreizt - das ist der Unterschied, den man nicht benennt, aber sieht. */ .stat-grid--lead { grid-template-columns: 1.55fr 1fr 1fr 1fr; align-items: stretch; } .stat.stat--lead { background: linear-gradient(158deg, var(--accent-soft), rgba(61,119,187,.03) 62%), var(--e1); border-color: var(--accent-line); display: flex; flex-direction: column; justify-content: space-between; } .stat__value.stat__value--lead { font-size: var(--t-7); letter-spacing: var(--track-tighter); } .stat__foot { margin-top: var(--s4); } /* Monatsverlauf auf dem Dashboard. Bewusst Balken statt Linie: bei zwoelf Monaten mit teils leeren Monaten liest sich eine Linie als durchgehender Verlauf, den es nicht gibt. Leere Monate bleiben als Haarlinie stehen, damit die Luecke sichtbar ist statt geglaettet. */ .mchart { display: flex; align-items: flex-end; gap: var(--s1-5); height: 96px; margin-bottom: var(--s4); } .mchart__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: var(--s1-5); height: 100%; min-width: 0; } .mchart__bar { height: var(--h, 0%); min-height: 2px; background: var(--accent-line); border-radius: var(--r-xs) var(--r-xs) 0 0; transition: height var(--d-lang) var(--ease); } .mchart__bar.is-now { background: var(--accent-2); } .mchart__bar.is-leer { background: var(--hairline); } .mchart__lbl { font-size: var(--t-1); color: var(--text-faint); text-align: center; letter-spacing: var(--ls-versal); } .kv--tight { margin-top: 0; } /* Kacheln und "Jetzt dran" liegen in einer Spalte, damit sie am Handy die Reihenfolge tauschen koennen. Am Schreibtisch bleibt es bei Kacheln zuerst: die vier passen dort in eine Reihe und stehen dem Handeln nicht im Weg. */ .dash-top { display: flex; flex-direction: column; } /* Was zu tun ist und wie der Umsatz laeuft, nebeneinander statt untereinander. Gleich breit: gaebe man der Liste die breitere Spalte, bliebe Text das Beherrschende - und genau das war die Kritik. */ .dash-puls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; margin-bottom: var(--s5); } .dash-puls > .panel { margin-bottom: 0; } @media (max-width: 1100px) { .dash-puls { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { /* Die Reihe loest sich auf, damit ihre beiden Kinder direkt in .dash-top haengen und einzeln sortierbar werden. Sonst koennte nur die ganze Reihe vor die Kacheln wandern - mitsamt der Kurve, die dort niemand zuerst braucht. */ .dash-puls { display: contents; } .dash-top .focus { order: -1; } .dash-puls > .panel { margin-bottom: var(--s5); } } /* ===================== "Jetzt dran" ===================== */ /* Eine Zeile pro Sache, mit dem Grund darunter. Der Farbstreifen links traegt die Dringlichkeit, das Wort im Grund traegt die Bedeutung - Farbe allein sagt nichts. Die Stufen heissen bewusst `fokus-row--bad/-warn/-info` und nicht `is-bad/is-warn/ is-info`: `.is-info` gibt es in dieser Datei schon global mit `text-align: right`. Beim ersten Versuch lief die letzte Zeile deshalb rechtsbuendig. Kurze Zustandsnamen wie `is-info` gehoeren niemandem allein - Modifikator immer an den Bauteilnamen haengen. */ .focus { margin-bottom: var(--s5); } .focus__zahl { font-size: var(--t-3); color: var(--text-faint); font-variant-numeric: tabular-nums; } .focus__zahl .is-over { color: var(--danger); } .focus__mehr { padding: var(--s2-5) var(--s5) var(--s3); font-size: var(--t-3); color: var(--text-faint); border-top: 1px solid var(--hairline); } .focus--leer .panel__body { color: var(--text-muted); font-size: var(--t-4); } .fokus-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2-5) var(--s5); border-bottom: 1px solid var(--hairline); cursor: pointer; position: relative; transition: background var(--d-schnell) var(--ease); } .fokus-row:last-child { border-bottom: 0; } .fokus-row::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 var(--r-xs) var(--r-xs) 0; background: var(--text-faint); } .fokus-row--bad::before { background: var(--danger); } .fokus-row--warn::before { background: var(--st-waiting); } .fokus-row--info::before { background: var(--accent); } .fokus-row:hover { background: var(--accent-soft); } .fokus-row__ico { flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-sm); background: var(--e3); color: var(--text-faint); } .fokus-row--bad .fokus-row__ico { color: var(--danger); } .fokus-row--warn .fokus-row__ico { color: var(--st-waiting); } .fokus-row__ico svg { width: 15px; height: 15px; } .fokus-row__main { min-width: 0; flex: 1; } .fokus-row__titel { font-size: var(--t-4); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fokus-row__grund { font-size: var(--t-2); color: var(--text-faint); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fokus-row__pfeil { flex: 0 0 auto; color: var(--text-faint); opacity: 0; transition: opacity var(--d-schnell) var(--ease); } .fokus-row__pfeil svg { width: 15px; height: 15px; } .fokus-row:hover .fokus-row__pfeil, .fokus-row:focus-visible .fokus-row__pfeil { opacity: 1; } @media (max-width: 720px) { .fokus-row { padding-left: var(--s4); padding-right: var(--s4); } .fokus-row__pfeil { display: none; } } .spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-bottom: var(--s2); } .spark i { flex: 1; height: var(--h, 0%); min-height: 2px; background: var(--accent-line); border-radius: var(--r-xs) var(--r-xs) 0 0; } .spark i.is-leer { background: var(--hairline); } .spark i.is-now { background: var(--accent-2); } @media (max-width: 1080px) { .stat-grid--lead { grid-template-columns: repeat(2, 1fr); } .stat--lead { grid-column: span 2; } } @media (max-width: 480px) { .stat-grid--lead { grid-template-columns: 1fr; } .stat--lead { grid-column: span 1; } } /* Kacheln sind dieselbe Scheibe wie die Panels, nur ohne Glaskante: sie stehen zu viert nebeneinander, und vier Rahmen in einer Reihe sind ein Zaun. */ .stat { position: relative; overflow: hidden; isolation: isolate; padding: var(--s4) var(--s5); background: linear-gradient(158deg, rgba(255,255,255,.072), rgba(255,255,255,.018) 46%, rgba(255,255,255,.042)), rgba(12,18,27,.58); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border: 1px solid transparent; border-radius: var(--r-md); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px rgba(0,0,0,.36), 0 44px 90px -54px rgba(0,0,0,.95); } /* Hier sass bis zum 27.08.2026 ein statischer blauer Eckhof auf jeder Kachel. Zwei Gruende, warum er raus ist: die Website hat nichts dergleichen (ihre Karten bekommen ihr Licht von den Hoefen HINTER dem Glas, nicht aus sich selbst), und er belegte genau das ::after, das jetzt das Zeigerlicht traegt. Vier Kacheln mit je einem eigenen Leuchtpunkt lasen sich ausserdem als vier Warnungen. */ .stat__label { font-size: var(--t-3); color: var(--text-muted); display:flex; align-items:center; gap:var(--s1-5); } .stat__label svg { width: 15px; height: 15px; opacity: .8; } .stat__value { font-family: var(--font-display); font-size: var(--t-6); font-weight: 700; letter-spacing: var(--track-tight); margin-top: var(--s1-5); font-variant-numeric: tabular-nums; line-height: 1; } .stat__meta { font-size: var(--t-3); color: var(--text-faint); margin-top: var(--s1-5); } .stat--danger .stat__value { color: var(--danger); } /* Warnt in der Zusatzzeile statt in der grossen Zahl: nicht der Gesamtbetrag ist das Problem, sondern der ueberfaellige Anteil davon. */ .stat--warn .stat__meta { color: var(--danger); font-weight: 600; } .stat--warn { border-color: var(--danger-soft); } /* minmax(0, …) statt blossem fr: eine Grid-Spalte hat sonst min-width:auto und waechst mit ihrem breitesten Inhalt, statt ihn umbrechen zu lassen. Genau daran lief die Seite ueber, als die Aufgabenzeile zwei Knoepfe mehr bekam. */ .dash-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s5); align-items: start; } /* ========================= Lists / rows ========================= */ .rowlist { display: flex; flex-direction: column; } .row { display: flex; align-items: center; gap: var(--s4); padding: var(--s2) var(--s5) var(--s2) var(--s4); border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--d-schnell) var(--ease); } .row:last-child { border-bottom: 0; } .row:hover { background: var(--accent-soft); } .row__main { min-width: 0; flex: 1; } .row__title { font-size: var(--t-4); font-weight: 600; line-height: var(--lh-titel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row__sub { font-size: var(--t-3); color: var(--text-faint); margin-top: 1px; line-height: var(--lh-titel); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row__aside { display: flex; align-items: center; gap: var(--s3); flex: none; } /* Werkstatt: Form statt Marke. Der Streifen traegt den Status, die Zahl traegt den Fortschritt, der Rest erscheint erst beim Darueberfahren. Zeile von 66 auf 44 px. */ .row { position: relative; padding-left: var(--s4); } .row__stripe { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--r-xs); background: var(--stripe, var(--text-faint)); flex: 0 0 auto; } .row--late .row__stripe { background: var(--danger); } .row__end { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: none; min-width: 84px; text-align: right; } .row__pct { font-size: var(--t-4); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight); } .row__pct--none { color: var(--text-faint); font-weight: 400; font-size: var(--t-2); } .row__due { font-size: var(--t-2); color: var(--text-faint); white-space: nowrap; } .row__due--none { opacity: .55; } .row--late .row__pct, .row--late .row__due { color: var(--danger); } /* Zusatzangabe, die den Blick sonst nur teilt - beim Darueberfahren ist sie da. */ .row__more { opacity: 0; transition: opacity var(--d-schnell) var(--ease); } .row:hover .row__more { opacity: 1; } @media (hover: none) { .row__more { opacity: 1; } } /* Avatar */ .avatar { /* --av kommt vom Element, alles andere aus dem System. Der Schriftgrad folgt einer Regel statt einer Rechnung je Aufrufstelle. */ width: var(--av, 36px); height: var(--av, 36px); border-radius: var(--r-sm); flex: none; display: grid; place-items: center; font-weight: 700; font-size: calc(var(--av, 36px) * .38); background: var(--e4); color: var(--text); font-family: var(--font-display); } /* HIER STAND EIN FEHLER, gefunden am 27.08.2026 im zweiten Durchgang. Am 23.08. wurde entschieden, dass Kacheln und Karten keinen eigenen LEUCHTRAND mehr tragen: neun gerahmte Flaechen auf einem Bildschirm, und der Rahmen hoert auf, etwas zu bedeuten. Die Entscheidung war richtig. Die Umsetzung hat aber nicht den Rand abgeschaltet, sondern das ganze MATERIAL: `background: var(--e1); box-shadow: none` auf .stat, .ccard, .pcard, .ncard und .kcard. Weil diese Regel WEITER UNTEN steht als `.stat`, hat sie dessen Glas ueberschrieben - die vier Kennzahlen auf dem Dashboard waren flache Kaesten, auch nach dem Umbau vom Vormittag. Bei .ccard und .pcard fiel es nicht auf, weil deren eigene Regeln noch weiter unten stehen und wieder gewinnen. Drei verschiedene Behandlungen fuer vier Kartenfamilien. Die Trennung ist jetzt sauber: das MATERIAL (Verlauf, Unschaerfe, Lichtkante, Schatten) tragen alle, die GLASKANTE (der Verlauf im Rand, `::before`) nur Panel und Dialog. Damit bleibt die Entscheidung vom 23.08. erhalten und das Material trotzdem eines. */ .stat, .ccard, .pcard, .ncard { border: 1px solid transparent; } .ccard:hover, .pcard:hover, .ncard:hover { border-color: var(--accent-line); } /* ========================= Progress ========================= */ .progress { --p: 0; height: 6px; border-radius: var(--r-pill); background: var(--e4); overflow: hidden; } .progress__fill { height: 100%; width: calc(var(--p) * 1%); background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: var(--r-pill); transition: width var(--d-lang) var(--ease); } .progress--done .progress__fill { background: linear-gradient(90deg, var(--st-done), #57d873); } .progress-wrap { display: flex; align-items: center; gap: var(--s3); } .progress-wrap .progress { flex: 1; } .progress-pct { font-size: var(--t-3); color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; } /* ========================= Badges ========================= */ .badge { display: inline-flex; align-items: center; gap: var(--s1-5); padding: 3px 9px; border-radius: var(--r-pill); font-size: var(--t-2); font-weight: 600; white-space: nowrap; background: var(--e4); color: var(--text-muted); border: 1px solid transparent; } .badge__dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; } /* Jede Toenung kommt aus ihrer eigenen Farbe. `.badge--proposal` trug bis zum 27.08.2026 ein nacktes #a371f7 - das einzige Violett im ganzen Produkt, an keiner Marke haengend und deshalb bei jeder Palettenaenderung uebersehen. */ .badge--lead { color: var(--st-lead); background: color-mix(in srgb, var(--st-lead) 12%, transparent); } .badge--proposal { color: var(--st-proposal); background: color-mix(in srgb, var(--st-proposal) 14%, transparent); } .badge--active { color: var(--st-active); background: color-mix(in srgb, var(--st-active) 14%, transparent); } .badge--waiting { color: var(--st-waiting); background: color-mix(in srgb, var(--st-waiting) 14%, transparent); } .badge--done { color: var(--st-done); background: color-mix(in srgb, var(--st-done) 13%, transparent); } .badge--lost { color: var(--danger); background: var(--danger-soft); } .badge--type { color: var(--text-muted); background: var(--e3); border-color: var(--border); } .badge--overdue { color: var(--danger); background: var(--danger-soft); } /* ========================= Toolbar / filters ========================= */ .toolbar { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s5); flex-wrap: wrap; } .search { display: flex; align-items: center; gap: var(--s2); height: var(--h-ctrl); padding: 0 13px; border-radius: var(--r-ctrl); background: var(--e2); border: 1px solid var(--border); min-width: 240px; flex: 1; max-width: 380px; } .search svg { width: 16px; height: 16px; color: var(--text-faint); flex: none; } .search input { border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--t-4); width: 100%; min-height: 0; padding: 0; outline: none; } .search input::placeholder { color: var(--text-faint); } /* Tastenkuerzel als eigenes Zeichen statt im Platzhalter - der wurde im schmalen Topbar-Feld mitten im Text abgeschnitten. Beim Tippen tritt es zurueck. */ .search__key { flex: none; min-width: 18px; padding: 1px var(--s1-5); font-size: var(--t-2); line-height: var(--lh-text); color: var(--text-faint); background: transparent; border: 1px solid var(--border); border-bottom-width: 1px; border-radius: var(--r-xs); transition: opacity var(--d-schnell) var(--ease); } .search:focus-within .search__key { opacity: 0; } /* Listenfilter, nicht zu verwechseln mit der globalen Suche oben: Trichter statt Lupe, schmaler und ruhiger, damit auf einem Bildschirm nicht zwei gleiche Suchfelder stehen. */ .search--filter { max-width: 300px; min-width: 180px; background: transparent; } .search--filter input { font-size: var(--t-4); } /* Sechs Knoepfe passen bei 375 px nicht in 341 px: die letzten wurden abgeschnitten und waren nicht mehr erreichbar. Statt sie zu verstecken, schiebbar machen - max-width:100% verhindert, dass die Leiste die Werkzeugzeile aufspreizt. */ .segmented { display: inline-flex; align-items: stretch; height: var(--h-ctrl); gap: var(--s0-5); padding: 3px; background: var(--e2); border: 1px solid var(--border); border-radius: var(--r-ctrl); max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .segmented::-webkit-scrollbar { display: none; } .segmented button { flex: 0 0 auto; } .segmented button { padding: 0 var(--s3); border: 0; background: transparent; color: var(--text-muted); font-size: var(--t-3); font-weight: 600; border-radius: var(--r-sm); cursor: pointer; white-space: nowrap; transition: background var(--d-schnell) var(--ease), color var(--d-schnell) var(--ease); } .segmented button:hover { color: var(--text); } .segmented button.is-active { background: var(--e4); color: var(--text); } /* ========================= Card grid (customers) ========================= */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); } .ccard { position: relative; isolation: isolate; padding: var(--s5); background: linear-gradient(158deg, rgba(255,255,255,.072), rgba(255,255,255,.018) 46%, rgba(255,255,255,.042)), rgba(12,18,27,.58); border: 1px solid transparent; -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border-radius: var(--r-card); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: transform var(--d-mittel) var(--ease), box-shadow var(--d-mittel) var(--ease), background var(--d-schnell) var(--ease); } .ccard:hover { background: linear-gradient(158deg, rgba(255,255,255,.10), rgba(255,255,255,.026) 46%, rgba(255,255,255,.06)), rgba(16,23,34,.62); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.36), 0 30px 60px -40px rgba(0,0,0,.95); } .ccard__head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); } .ccard__name { font-size: var(--t-5); font-weight: 600; } .ccard__company { font-size: var(--t-3); color: var(--text-faint); } /* Drei gleich breite Spalten statt freiem Fluss: sonst schiebt ein langes "vor 9 Tagen" die Karte auf zwei Zeilen und das Raster wird unruhig. */ .ccard__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--border); } .ccard__stat { min-width: 0; } .ccard__stat b { font-family: var(--font-display); font-size: var(--t-5); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ccard__stat span { font-size: var(--t-1); color: var(--text-faint); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================= Project cards ========================= */ .pcard { position: relative; isolation: isolate; padding: var(--s5); background: linear-gradient(158deg, rgba(255,255,255,.072), rgba(255,255,255,.018) 46%, rgba(255,255,255,.042)), rgba(12,18,27,.58); border: 1px solid transparent; -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border-radius: var(--r-card); cursor: pointer; display: flex; flex-direction: column; gap: var(--s3); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); transition: box-shadow var(--d-mittel) var(--ease), background var(--d-schnell) var(--ease); } .pcard:hover { background: linear-gradient(158deg, rgba(255,255,255,.10), rgba(255,255,255,.026) 46%, rgba(255,255,255,.06)), rgba(16,23,34,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.36), 0 30px 60px -40px rgba(0,0,0,.95); } /* Titel und Abzeichen nebeneinander zwangen bei schmalen Karten den Titel auf drei Zeilen. Jetzt untereinander: der Titel bekommt die volle Breite, die Abzeichen stehen darunter. Ruhiger und bei jeder Kartenbreite stabil. */ .pcard__top { display: flex; flex-direction: column; gap: 7px; } .pcard__title { font-size: var(--t-5); font-weight: 600; line-height: var(--lh-titel); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pcard__client { font-size: var(--t-3); color: var(--text-faint); margin-top: var(--s0-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pcard__badges { display: flex; gap: var(--s1-5); flex-wrap: wrap; } .pcard__foot { display: flex; align-items: center; gap: var(--s3); font-size: var(--t-3); color: var(--text-muted); flex-wrap: wrap; } .pcard__foot .meta { white-space: nowrap; } .pcard__foot .meta { display: inline-flex; align-items: center; gap: 5px; } .pcard__foot .meta svg { width: 14px; height: 14px; opacity: .7; } .pcard__foot .meta.is-overdue { color: var(--danger); } /* ========================= Steps checklist ========================= */ .steps { display: flex; flex-direction: column; gap: var(--s0-5); } .step { display: flex; align-items: center; gap: var(--s3); padding: 9px 11px; border-radius: var(--r-ctrl); transition: background var(--d-schnell) var(--ease); } .step:hover { background: var(--e3); } .step__check { width: 20px; height: 20px; border-radius: var(--r-sm); flex: none; border: 1.6px solid var(--border-strong); background: transparent; display: grid; place-items: center; cursor: pointer; color: transparent; transition: background var(--d-schnell) var(--ease), border-color var(--d-schnell) var(--ease), color var(--d-schnell) var(--ease); } .step__check svg { width: 13px; height: 13px; } .step.is-done .step__check { background: var(--st-done); border-color: var(--st-done); color: #fff; } .step__label { font-size: var(--t-4); flex: 1; cursor: pointer; } .step.is-done .step__label { color: var(--text-faint); text-decoration: line-through; } .step__del { opacity: 0; color: var(--text-faint); } .step:hover .step__del { opacity: 1; } .step__del:hover { color: var(--danger); } /* ========================= Forms ========================= */ .form { display: flex; flex-direction: column; gap: var(--s4); } .field { display: flex; flex-direction: column; gap: var(--s1-5); } .field > label { font-size: var(--t-3); font-weight: 600; color: var(--text-muted); } .field .hint { font-size: var(--t-2); color: var(--text-faint); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s4); } /* Das Eingabefeld ist auf der Website eine VERTIEFUNG IM SELBEN MATERIAL: eine leichte weisse Aufhellung mit innenliegendem Ring. Hier stand stattdessen eine deckende Flaeche (--e1). Auf einer Glasscheibe liest sich ein deckendes dunkles Rechteck als Loch, nicht als Feld - das war der sichtbarste verbliebene Materialunterschied zwischen App und Seite. Der Ring liegt innen (box-shadow statt border), damit die Feldhoehe beim Fokus nicht um zwei Pixel springt. */ input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]), select, textarea { width: 100%; min-height: var(--h-ctrl); padding: var(--s2) var(--s3); background: rgba(255,255,255,.045); border: 0; box-shadow: inset 0 0 0 1px var(--border-strong); border-radius: var(--r-ctrl); color: var(--text); font: inherit; font-size: var(--t-4); outline: none; transition: box-shadow var(--d-schnell) var(--ease), background-color var(--d-schnell) var(--ease); } /* Im Fokus wird der Ring hellblau und die Flaeche eine Spur heller - genau das Rezept der Website. Vorher war der Ring --accent-line, also mittleres Blau auf dunklem Grund, und der Hof --accent-soft mit 16 Prozent: zusammen kaum zu sehen. */ input:not([type=checkbox]):not([type=radio]):not([type=color]):focus, select:focus, textarea:focus { box-shadow: inset 0 0 0 1px var(--accent-2), 0 0 0 3px rgba(61,119,187,.22); background: rgba(255,255,255,.07); } /* Der Platzhalter lief auf --text-faint. Diese Stufe ist am 27.08. bewusst auf .52 gehoben worden, damit LESBARER Text lesbar bleibt - ein Platzhalter ist aber kein Text, den man liest, sondern einer, den man ersetzt. Bei .52 sah ein leeres Feld aus wie ein ausgefuelltes. Die Website steht auf .32. */ input::placeholder, textarea::placeholder { color: rgba(238,243,249,.32); } textarea { resize: vertical; min-height: 84px; line-height: var(--lh-text); } select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; cursor: pointer; } .chips { display: flex; flex-wrap: wrap; gap: var(--s1-5); } .chip { display: inline-flex; align-items: center; gap: var(--s1-5); padding: var(--s1) var(--s2-5); border-radius: var(--r-pill); background: var(--e3); border: 1px solid var(--border); font-size: var(--t-3); cursor: pointer; color: var(--text-muted); transition: background var(--d-schnell) var(--ease), border-color var(--d-schnell) var(--ease), color var(--d-schnell) var(--ease); } .chip:hover { color: var(--text); border-color: var(--border-strong); } .chip.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-2); } /* ========================= Modal ========================= */ .modal-host { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: var(--s5); } .modal-host[hidden] { display: none; } .modal-scrim { position: absolute; inset: 0; background: rgba(6,8,12,.62); backdrop-filter: blur(3px); } /* Dieselbe Scheibe wie ein Panel, nur dichter: ein Dialog muss decken, sonst liest man den Bildschirm dahinter mit. Darum .9 statt .58 in der Fuellung. */ .modal { position: relative; isolation: isolate; width: 100%; max-width: 620px; max-height: 90dvh; overflow: hidden; background: linear-gradient(158deg, rgba(255,255,255,.072), rgba(255,255,255,.018) 46%, rgba(255,255,255,.042)), rgba(12,18,27,.9); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); border: 1px solid transparent; border-radius: var(--r-lg); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px rgba(0,0,0,.36), var(--sh-3); display: flex; flex-direction: column; animation: modal-in var(--d-schnell) var(--ease); } .modal--wide { max-width: 760px; } @keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } .modal__head { display: flex; align-items: center; gap: var(--s3); padding: var(--s5) var(--s5) var(--s4); border-bottom: 1px solid var(--border); } .modal__head h2 { font-size: var(--t-5); font-weight: 600; } .modal__head .sub { font-size: var(--t-3); color: var(--text-faint); margin-top: var(--s0-5); } .modal__close { margin-left: auto; } .modal__body { padding: var(--s5); overflow-y: auto; } .modal__foot { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s5); border-top: 1px solid var(--border); background: var(--e1); } .modal__foot .spacer { flex: 1; } /* ========================= Empty states ========================= */ .empty { text-align: center; padding: var(--s8) var(--s5); } .empty__ico { width: 56px; height: 56px; margin: 0 auto var(--s4); border-radius: var(--r-md); display: grid; place-items: center; background: var(--e3); color: var(--text-faint); border: 1px solid var(--border); } .empty__ico svg { width: 26px; height: 26px; } .empty h3 { font-size: var(--t-5); margin-bottom: var(--s1-5); } .empty p { color: var(--text-faint); font-size: var(--t-4); max-width: 380px; margin: 0 auto var(--s5); } /* ========================= Detail layout ========================= */ .detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s5); align-items: start; } .kv { display: grid; grid-template-columns: 120px 1fr; gap: var(--s3) var(--s4); font-size: var(--t-4); } .kv dt { color: var(--text-faint); } .kv dd { margin: 0; color: var(--text); } .kv dd a { color: var(--accent-2); text-decoration: none; } .kv dd a:hover { text-decoration: underline; } .section-title { font-size: var(--t-3); text-transform: uppercase; letter-spacing: var(--ls-versal); color: var(--text-faint); margin: 0 0 var(--s3); font-weight: 600; } /* ========================= Calendar ========================= */ .cal { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--s5); align-items: start; } .cal__grid-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); } .cal__month { font-family: var(--font-display); font-size: var(--t-6); font-weight: 600; min-width: 190px; } .cal__weekdays { display: grid; grid-template-columns: repeat(7,1fr); gap: var(--s1); margin-bottom: var(--s1); } .cal__weekdays span { text-align: center; font-size: var(--t-2); color: var(--text-faint); font-weight: 600; padding: var(--s1) 0; } .cal__days { display: grid; grid-template-columns: repeat(7,1fr); gap: var(--s1); } .cal__day { /* Etwas hoeher, damit zwei zweizeilige Termine sichtbar hineinpassen. */ min-height: 96px; padding: var(--s1-5) 7px; border-radius: var(--r-sm); background: var(--e2); border: 1px solid var(--border); cursor: pointer; display: flex; flex-direction: column; gap: 3px; overflow: hidden; transition: background var(--d-schnell) var(--ease), border-color var(--d-schnell) var(--ease); } .cal__day:hover { background: var(--e3); border-color: var(--border-strong); } .cal__day.is-out { opacity: .4; } .cal__day.is-today { border-color: var(--accent-line); } .cal__daynum { font-size: var(--t-3); color: var(--text-muted); font-variant-numeric: tabular-nums; } .cal__day.is-today .cal__daynum { color: var(--accent); font-weight: 700; } /* Zwei Zeilen statt einer: die Uhrzeit klein darueber, der Titel darunter. Vorher stand beides nebeneinander und der Titel wurde weggeschnitten. */ .cal__evt { display: flex; flex-direction: column; gap: 1px; line-height: var(--lh-titel); padding: 3px var(--s1-5) var(--s1); border-radius: var(--r-xs); background: var(--accent-soft); color: var(--accent-2); overflow: hidden; cursor: pointer; border-left: 2px solid var(--accent); } .cal__evt-t { font-size: var(--t-1); opacity: .8; font-variant-numeric: tabular-nums; } .cal__evt-n { font-size: var(--t-2); font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cal__evt:hover { background: rgba(61,119,187,.28); } .cal__evt.is-done { background: var(--e4); border-left-color: var(--border-strong); color: var(--text-faint); } .cal__evt.is-done .cal__evt-n { color: var(--text-faint); text-decoration: line-through; } .cal__more { font-size: var(--t-1); color: var(--text-faint); padding-left: var(--s1-5); } /* Appointment list item */ .appt { display: flex; gap: var(--s3); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--border); cursor: pointer; transition: background var(--d-schnell) var(--ease); } .appt:last-child { border-bottom: 0; } .appt:hover { background: var(--e3); } .appt__date { flex: none; width: 46px; text-align: center; } .appt__day { font-family: var(--font-display); font-size: var(--t-6); font-weight: 700; line-height: 1; } .appt__mon { font-size: var(--t-1); text-transform: uppercase; color: var(--text-faint); letter-spacing: var(--ls-versal); } .appt__main { flex: 1; min-width: 0; } .appt__title { font-size: var(--t-4); font-weight: 600; } .appt__meta { font-size: var(--t-3); color: var(--text-faint); display: flex; gap: var(--s3); margin-top: var(--s0-5); } .appt.is-done .appt__title { color: var(--text-faint); text-decoration: line-through; } .appt.is-today .appt__date .appt__day { color: var(--accent); } /* ========================= Toasts ========================= */ .toasts { position: fixed; bottom: var(--s5); right: var(--s5); z-index: 200; display: flex; flex-direction: column; gap: var(--s2); } /* Alles, was ueber dem Inhalt SCHWEBT, ist auf der Website aus demselben Glas: die Leiste, das mobile Blatt. In der App waren Toast, Ueberlaufmenue und Suchergebnisse bis zum 27.08. die letzten drei schwebenden Flaechen mit einer deckenden Fuellung und einem harten Rand - drei Fremdkoerper zwischen lauter Scheiben. Sie tragen jetzt dasselbe Rezept wie der Dialog (dichtere Fuellung, weil man durch sie hindurch nichts lesen koennen soll). */ .toast { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-md); background: linear-gradient(158deg, rgba(255,255,255,.072), rgba(255,255,255,.018) 46%, rgba(255,255,255,.042)), rgba(12,18,27,.9); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 6px rgba(0,0,0,.36), var(--sh-3); font-size: var(--t-4); min-width: 220px; animation: toast-in var(--d-schnell) var(--ease); } .toast svg { width: 17px; height: 17px; flex: none; } .toast--ok svg { color: var(--st-done); } .toast--info svg { color: var(--st-active); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ========================= Utility ========================= */ /* ========================= Kleine Helfer ========================= Nur fuer das, was sich im JavaScript oft genug wiederholt, um eigenen Namen zu verdienen. Absichtlich wenige: eine Sammlung von hundert Hilfsklassen waere dasselbe Durcheinander wie hundert Inline-Stile, nur an anderer Stelle. */ .u-flush { margin: 0; } .u-stack { margin: 0 0 var(--s4); } .u-gap-s5 { margin-bottom: var(--s5); } .u-t1 { font-size: var(--t-1); } .u-t2 { font-size: var(--t-2); } .u-t3 { font-size: var(--t-3); } .u-t4 { font-size: var(--t-4); } .u-lead { line-height: var(--lh-text); } .u-strong { font-weight: 600; } .u-warn { color: var(--st-waiting); } .u-mid { justify-content: center; } .u-auto { width: auto; } /* Fliesstext, der zurueckhaltend bleiben soll - traegt Groesse und Durchschuss jetzt selbst, damit die Aufrufe nichts mehr nachschieben muessen. */ .faint--text { font-size: var(--t-3); line-height: var(--lh-text); } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .mono { font-family: var(--font-zahl); font-variant-numeric: tabular-nums; } .stack { display: flex; flex-direction: column; } .stack-4 { display: flex; flex-direction: column; gap: var(--s4); } .stack-5 { display: flex; flex-direction: column; gap: var(--s5); } .rowflex { display: flex; align-items: center; gap: var(--s3); } .spacer { flex: 1; } .nowrap { white-space: nowrap; } /* Auch auf einem