/* ========================================================================= Design-Fundament 2026-07-29 — Owner-Referenzen vom 28.07. («exakt nachbauen», docs/design/ZIELBILD-2026-07-28.md). EINE Erscheinung für alle 53 Bildschirme: sehr dunkler, leicht blaugrüner Grund · Karten eine Stufe heller MIT feiner Hairline · viel Luft · Radius 14 · EIN Akzent Türkis für Aktion, aktiven Zustand, Balken und Positivwerte · Bernstein für Warnung, Rot sparsam für Fehler. Warum als Token-Schicht und nicht Bildschirm für Bildschirm: die Klassenverträge (.panel, .panel-row*, .stat*, .field, .primary-btn, .badge, .sl-badge*, .kp-*, .vt-*, .jetzt-*, .lx-*) stehen seit 27 Iterationen. Wer die Tokens und die Kernbausteine umkleidet, kippt die ganze App in einem Zug — ohne 53 Einzelkorrekturen und ohne einen einzigen Quelltest zu brechen. Gebaut auf «Precision Ink» (DESIGN.md): Struktur, Dichte, Motion und Touch-Regeln bleiben. Ersetzt sind Farbe, Form und die Tiefen-Idee — statt Innen-Glanz + Ambient-Schatten trägt jetzt die Hairline die Kante. Skip-Zone: nur der Token-Block trägt Roh-Hexes. ========================================================================= */ :root { color-scheme: dark; /* Ink-Leiter (Flächen, von tief nach erhaben). 1:1-HUELLE (Owner-Regel 02.08., Memory referenz-ist-massstab-nicht-soll): alle Werte hier sind aus dem Referenzbild 13_25_27 GEMESSEN (scripts/_referenz_farben_messen.mjs, 3×3-Mittel) — das Fundament ist BLAU-schwarz (Blauanteil ueber Gruen), nicht tuerkis-neutral. Wer hier aendert, misst zuerst. */ /* DIE FARBWELT DER REFERENZ (Owner 03.09.: «das UI, die Farbe … falsch verstanden»). Gemessen an docs/design/referenzen/konfigurator-greenfield- 2026-08-10 (2800 px, Bild 02/09/12/14): Grund #070a0e · Panel #080b0f · Karte #0e141a · erhaben #12191f · Feld #080d12 · Haarlinie #2c323c auf #080b0f · Text #f0f6fc/#91a3b5/#8795a3 · gewählter Rand #9ccfff · Tönung #162b3f · Hauptknopf #dcecff · Startklar #a4d7c5 · fehlt #d8ba83. Blauschwarz und Eisblau statt Petrol und Türkis; Ecken ~2 px statt Pillen. Türkis #13c5c0 war der Akzent bis v393 — Referenz (10.08.) und Owner-Wort (02./03.09.) sind neuer als DESIGN.md/EINHEIT §1.3. */ --canvas-background: radial-gradient(120% 90% at 55% 42%, #0b131c 0%, #04111a 48%, #020a11 80%, #01070c 100%); --work-heading-background: linear-gradient(180deg, #0c1420, #0a1016); --bg: #070a0e; --surface: #0e141a; /* Karten/Panels — gemessen Wahlkarte Bild 02 */ --surface-1: #080b0f; /* eingelassen — gemessen Panel/Band Bild 02/09 */ --surface-inset: #080d12; /* Formularfelder — gemessen Eingabefeld Bild 02 */ --surface-2: #12191f; /* erhaben — gemessen «Zurück»-Knopf Bild 09 */ --surface-3: #182027; /* Hover-/Aktiv-Fläche */ --surface-hover: #101820; /* Hairlines: die Kante der Karte UND der Trenner in Listen — kuehl-blau */ --border: rgba(140, 168, 196, .19); /* #2c323c auf #080b0f, Bild 09 */ --line-strong: rgba(140, 168, 196, .36); /* DESIGN.md nennt die Tokens --hairline/--hairline-strong; die Implementierung taufte sie --border/--line-strong. ~26 Verwendungen lasen die DESIGN.md-Namen ins Leere (var() undefiniert ⇒ Deklaration invalid ⇒ Linie fehlte komplett, auch die Organigramm-Äste). Alias statt Umbenennung: löst am Element auf. */ --hairline: var(--border); --hairline-strong: var(--line-strong); /* Alias-Kanal für die G-01-/E-0x-Blöcke (Benachrichtigungen, Freigaben, Regeln, Schulden, Belege). Sie lasen --panel/--line/--muted/--hover/ --danger/--panel-2, die es NIE gab: jede dieser 40 Deklarationen fiel auf ihren eingebauten Roh-Hex zurück und stand damit ausserhalb jeder Farbwahrheit. Hier definiert = sie erben ab sofort mit. */ --panel: var(--surface); --panel-2: var(--surface-inset); --line: var(--border); --muted: var(--text-secondary); --hover: var(--surface-hover); --danger: var(--bad); --danger-rgb: var(--bad-rgb); /* Text — kuehl-weiss statt gruenstichig, folgt der blauen 1:1-Huelle */ --text: #d8e2ec; /* gemessen Kartentitel Bild 02 */ --text-primary: #f0f6fc; /* gemessen Frage-Titel Bild 02 */ --text-secondary: #91a3b5; /* gemessen Sektions-Etikett Bild 02 */ --text-tertiary: #8795a3; /* gemessen Helfersatz Bild 02; >=4.5:1 auf --surface */ /* Marken-Türkis (NUR Interaktion + Positivwerte: Aktion, Selektion, Fokus, aktiver Zustand, Fortschritt) — gemessen am Referenz-Fortschrittsbalken */ --accent-rgb: 156, 207, 255; --accent: #9ccfff; /* gewählter Rand / aktives Wort — gemessen Bild 02 */ --accent-deep: #6fa8dc; --accent-hover: #b7dcff; /* Schieber-Knopf Bild 09 */ --accent-strong: #cbe8ff; /* heller Akzent-Text auf Soft-Flächen — Häkchen-Kreis Bild 02 */ --accent-bright: #e7f3ff; /* gewähltes Segment TAGE, Bild 09 */ --accent-fill: #dcecff; /* die gefüllte Hauptaktion — gemessen Bild 14 */ --on-accent: #0c161e; /* Wort AUF der eishellen Fläche — gemessen Bild 02 */ /* Fläche und Kante des Akzents kommen AUS dem Akzent. Bis 03.08. trugen beide noch das Türkis von vor dem Hüllen-Pass (45, 212, 191) — zwei Türkis-Wahrheiten in einer Datei, verteilt über 80 Regeln. Wer den Akzent misst und nachführt, hätte 80 Flächen unbemerkt zurückgelassen. */ /* «gewählt/hier» ist eine BLAUE Tönung, kein aufgehellter Akzent: gemessen #162b3f auf #0e141a (Bild 02) = rgba(60,140,230,.2). */ --accent-tint-rgb: 60, 140, 230; --accent-soft: rgba(var(--accent-tint-rgb), .20); --accent-line: rgba(var(--accent-rgb), .55); /* Magenta — nur Marken-Highlight, nie Funktionsfarbe */ --magenta: #ef5aa4; --magenta-rgb: 239, 90, 164; /* Status-Semantik. Positiv teilt sich den Akzent (ZIELBILD: EIN Akzent), Warnung ist Bernstein, Fehler bleibt Rot und bleibt selten. Die *-rgb-Kanäle tragen die Soft-Flächen: vorher standen dieselben Farben als ~45 rohe rgba()-Tripel im ganzen Blatt. */ /* Stand-Farben gemessen: «Startklar» #a4d7c5/Rand #283f3d (Bild 02), «Auswahl fehlt» #d8ba83/Rand #4c402b (Bild 12). Grün ist Mint, nicht Türkis. */ --good: #6fcfae; --good-strong: #a4d7c5; --good-deep: #3f9d80; --good-rgb: 111, 207, 174; --warn: #d8ba83; --warn-strong: #e9d2a6; --warn-deep: #a88a55; --warn-rgb: 216, 186, 131; --bad: #f2686f; --bad-strong: #ff9ea3; --bad-deep: #b8344f; --bad-rgb: 242, 104, 111; --bad-soft: rgba(242, 104, 111, .14); /* Fläche, nicht Text (app-lock) */ --info-strong: #93c5fd; --info-muted: #6989c9; --info-rgb: 96, 165, 250; /* Prioritäten (Leads) — dieselbe Semantik, nicht eine zweite Palette */ --high: var(--good); --medium: var(--warn); --low: var(--bad); /* Regionen (Datenfarben — unangetastet) */ --zuerich: #3b82f6; --zuerich-text: #93c5fd; --aarau: #8b5cf6; --aarau-text: #c4b5fd; --bern: #06b6d4; --solothurn: #f97316; --luzern: #ec4899; --luzern-text: #f9a8d4; --neutral-badge: #1d2b33; /* DIE BEREICHSFARBEN — hierher gezogen am 25.08.2026, aus zwei Flaechen befreit. Sie waren entschieden und wirkten trotzdem fast nirgends: die sieben Sach-Toene standen in `.gz` (docs/design/patch-zentrale.css), die acht Bereichs-Toene in `.bs` (docs/design/patch-ortsschild.css) — also nur INNERHALB der Zentrale und INNERHALB des Bereichs-Starts. GEMESSEN ueber 29 gebaute Flaechen bei 1400px: auf 21 von ihnen loeste `--gz-feld` auf gar nichts auf, obwohl 36 Flaechen-Dateien `gz-ic`- oder `data-bereich`-Traeger ausgeben. `--gz-buchhaltung` heisst «Gold — Geld, Rechnung, Schuld» und erschien auf keiner einzigen Geld-Flaeche. Ein Token, das an seiner Flaeche angebunden ist, ist kein Farbcode, sondern eine Dekoration dieser einen Flaeche. WERTE UNVERAENDERT uebernommen, keine neue Farbe erfunden. Die beiden Tabellen bleiben getrennt, weil sie zwei verschiedene Fragen beantworten: `--gz-*` faerbt die SACHE (eine Offerte, eine Rechnung, ein Lead), `--bs-*` faerbt den BEREICH (wo bin ich). Wo beide dasselbe meinen, tragen sie denselben Wert — nachgerechnet: verkauf/partner/finanzen. EINHEIT §1.3 bleibt die Grenze: NUR Soft-Feld hinter Symbol und Kurve, nie Flaeche, nie Text, nie Knopf. Tuerkis bleibt der EINE Akzent. */ --gz-verkauf: 122, 178, 255; /* Blau — Angebot, Offerte, Abschluss */ --gz-leads: 176, 142, 255; /* Violett — Pool, Anrufe, Team-Tag */ --gz-buchhaltung: 236, 190, 112; /* Gold — Geld, Rechnung, Schuld */ --gz-partner: 112, 208, 154; /* Grün — Standorte und ihre Screens */ --gz-screens: 240, 138, 186; /* Rosa — Screens, Standorte, Material */ --gz-kunden: 246, 155, 118; /* Koralle — Kundinnen und Kunden */ --gz-missionen: 168, 190, 205; /* Stahl — der Betrieb selbst */ --bs-zentrale: 168, 190, 205; /* Stahl — der Betrieb selbst */ --bs-akquise: 176, 142, 255; /* Violett — Pool, Anrufe */ --bs-verkauf: 122, 178, 255; /* Blau — Offerte, Abschluss */ --bs-betrieb: 240, 138, 186; /* Rosa — Screens, Standorte */ --bs-standortbetreiber: 112, 208, 154; /* Grün — Betreiber */ --bs-vertriebspartner: 246, 155, 118; /* Koralle — der externe Kanal */ --bs-team: 145, 205, 224; /* Eisblau — die eigenen Leute */ --bs-finanzen: 236, 190, 112; /* Gold — Geld */ /* Tint-Kanal: Overlay-Affordanzen als rgba(var(--tint-rgb), α) — dunkel weiss, hell dunkles Ink. EIN Kanal, gleiche Alphas. */ --tint-rgb: 190, 225, 225; --topbar-bg: rgba(7, 12, 14, .88); /* Form & Tiefe: die Hairline trägt die Kante, der Schatten hebt nur, was wirklich schwebt (Popover, Modal, Toast). Radius 14 wie in der Referenz. */ /* Ecken fast eckig (Referenz: ~2 px) — keine Pillen, keine 14-px-Kacheln. */ --radius-card: 12px; --radius-button: 8px; --radius-badge: 4px; --shadow-sm: 0 1px 2px rgba(2, 8, 9, .30); --shadow-md: 0 6px 18px rgba(2, 8, 9, .40), 0 1px 2px rgba(2, 8, 9, .30); --shadow-lg: 0 18px 48px rgba(2, 8, 9, .55), 0 2px 6px rgba(2, 8, 9, .35); /* Typo: Inter (self-hosted/DSG); Mono NUR für echte Datenwerte */ --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* Motion: Zustand, nie Deko — out-quint, kurz */ --ease: cubic-bezier(.22, 1, .36, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 240ms; --transition: var(--dur-fast) var(--ease); --header-height: 84px; /* PWA Safe-Area (Notch/Home-Indicator im Standalone) */ --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); } /* ========================================================================= BODEN- UND KOPF-GEOMETRIE — EIN Höhensystem statt geratener Zahlen (Owner-Video-Audit 09.08., Klasse 6 · Paket P1) Am Handy liegen bis zu drei Dinge fix über dem Seitenende: die Leiste am Daumen, eine flächeneigene Fixleiste (Offerten-Total) und der schwebende «+»-Knopf. Bis 09.08. RIET jede Fläche ihren Bodenabstand selbst — acht Stellen mit acht verschiedenen Zahlen (70 · 80 · 84 · 112 · 140 px), und am Handy gewann in der Kaskade ausgerechnet die kleinste. Ergebnis im Video: der Plus-Knopf lag auf «Alle →», auf «Erledigt», auf Formularfeldern; unter den Fixleisten verschwand die letzte Zeile jeder Liste (c1 B4/B10/B13, c2 B5, c5 B2/B18, c6 B2/B16/B17/B30). DIE REGEL AB HIER: Eine Leiste SETZT ihre Höhe, eine Fläche LIEST sie. Wer eine neue Fixleiste baut, setzt --leiste-h und ist fertig. --nav-h Leiste am Daumen (nur Handy, nur wenn sie wirklich da ist) --leiste-h flächeneigene Fixleiste ÜBER der Daumenleiste --fab-h Platz, den der schwebende «+» über dem Boden braucht --kopf-h Höhe der klebenden Kopfzeile (die Reiterzeile liest sie) --fuss-h Fuss einer Fläche, die selbst schon bis zum Bildschirmende reicht (Cockpit): er verdrängt Meldungen, aber KEINEN Seiteninhalt — darum steht er nicht in `--boden-abstand` --boden-h was unten wirklich fest belegt ist (Leiste + sichere Zone) --boden-abstand was ein Scroll-Container darunter freihalten MUSS Die Zusammenrechnung steht auf `body` und NICHT auf `:root`, weil jeder Zustand (has-quick-create, lx-pool, lx-werkflaeche, so-editor-open) an der Körper-Klasse hängt: nur wenn Teil und Summe auf demselben Element stehen, rechnet der Browser die Summe mit dem überschriebenen Teil neu. --vv-* schreibt der Beobachter des sichtbaren Fensters (public/src/utils/viewport.js). Ohne ihn bleiben sie 0 — dann verhält sich alles exakt wie vorher. ========================================================================= */ body { --nav-h: 0px; --leiste-h: 0px; --fab-h: 0px; --kopf-h: 0px; --fuss-h: 0px; --boden-h: calc(var(--nav-h) + var(--sab)); --boden-abstand: calc(var(--boden-h) + var(--leiste-h) + var(--fab-h)); } /* Owner14.09.: warm sand is an additional app appearance. Semantic roles, spacing, permissions and document paper remain shared with the dark mode. */ :root[data-theme="light"] { color-scheme: light; --bg: #f1ede5; --surface: #faf7f0; --surface-1: #f5f0e7; --surface-inset: #fdfaf4; --surface-2: #e9e2d6; --surface-3: #dfd5c5; --surface-hover: #ede7db; --border: rgba(78, 66, 47, .16); --line-strong: rgba(78, 66, 47, .37); --control-border: #877f71; --text: #38372f; --text-primary: #292d29; --text-secondary: #635d51; --text-tertiary: #6b6255; --accent-rgb: 26, 105, 87; --accent: #1a6957; --accent-deep: #195647; --accent-hover: #175544; --accent-strong: #195647; --accent-bright: #154b40; --accent-fill: #1a6957; --on-accent: #fcf8ef; --accent-tint-rgb: 26, 105, 87; --accent-soft: rgba(var(--accent-tint-rgb), .09); --accent-line: rgba(var(--accent-rgb), .58); --magenta: #973460; --magenta-rgb: 151, 52, 96; --good: #25674f; --good-strong: #205b47; --good-deep: #184d3b; --good-rgb: 37, 103, 79; --warn: #80550c; --warn-strong: #714600; --warn-deep: #674002; --warn-rgb: 128, 85, 12; --bad: #ac3239; --bad-strong: #982c34; --bad-deep: #87262d; --bad-rgb: 172, 50, 57; --bad-soft: rgba(var(--bad-rgb), .08); --info-strong: #315b91; --info-muted: #3c5c84; --info-rgb: 49, 91, 145; --zuerich: #315b91; --zuerich-text: #315b91; --aarau: #735298; --aarau-text: #735298; --bern: #166877; --solothurn: #8d491f; --luzern: #984b70; --luzern-text: #984b70; --neutral-badge: #e5dccd; --gz-verkauf: 49, 91, 145; --gz-leads: 115, 82, 152; --gz-buchhaltung: 128, 85, 12; --gz-partner: 37, 103, 79; --gz-screens: 152, 75, 112; --gz-kunden: 141, 73, 31; --gz-missionen: 71, 92, 103; --bs-zentrale: 71, 92, 103; --bs-akquise: 115, 82, 152; --bs-verkauf: 49, 91, 145; --bs-betrieb: 152, 75, 112; --bs-standortbetreiber: 37, 103, 79; --bs-vertriebspartner: 141, 73, 31; --bs-team: 22, 104, 119; --bs-finanzen: 128, 85, 12; --tint-rgb: 66, 56, 43; --topbar-bg: rgba(241, 237, 229, .96); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .09); --shadow-md: 0 6px 18px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .09); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .10); --canvas-background: var(--bg); --work-heading-background: var(--surface-1); } /* ========================================================================= Breakpoint-System (Referenz — kein Build-Step, @media = rohe px): • 520px phone-xs sehr schmal: KPI-Grids einspaltig • 640px phone-sm schmal: 4-/3-spaltige Panel-Grids → 2-spaltig • 720px mobile ◀ HAUPT-Umbruch: Stack-Layout, Karten full-width • 900px tablet Sidebar wird Off-Canvas (901px = Desktop-Twin) • 980/1100/1200 Manager-Mehrspalten-Grids stufig Touch-Floor (≥44px) via (max-width:1024px),(pointer:coarse) — Memory project_tablet_touch_breakpoint. Mobile-@media stets NACH der Basis — Memory project_css_cascade_mobile. ========================================================================= */ /* ---------- Reset & Base ---------- */ * { box-sizing: border-box; } /* DER SEITLICHE RIEGEL (Owner-Video-Audit 09.08., c2 B12 / c6 B29 · Paket P2). Es gab keinen: ein einziges Element mit fester Mindestbreite (`.team-table` 640px, `.cal-week-cols` 720px, ein rohes `100vw`) schob die GANZE Seite seitwärts. Sichtbar wurde das als schwarzer Streifen links — der Verlaufs-Grund (`body::before`) liegt `fixed` und bleibt stehen, während der Inhalt wandert; rechts war der Avatar angeschnitten, die Navigation endete mit «Meh». `clip` statt `hidden`: `hidden` macht aus html/body einen Scroll-Behälter und nimmt jedem `position: sticky` darin seinen Anker (Kopfzeile, Reiterzeile, Filterleisten). `clip` klemmt nur — es scrollt nichts und hängt nichts ab. */ html, body { overflow-x: clip; } html { scroll-behavior: smooth; } [hidden] { display: none !important; } /* Schrift-Floor für (DESIGN.md §2: nichts rendert unter 11px). Der Browser-Default für ist `smaller` = 0.8333× der Elterngrösse. In Datenzeilen (13px) sind das 10.83px — belegt vom Breiten-Wächter auf #/v/offer/new (b ohne jede Regel; jedes einzelne davon unterschreitet den Floor, sobald sein Elternteil <= 13px ist. `max()` statt fixer 11px, damit das relative Verhalten unter grossen Überschriften erhalten bleibt — nur der Boden wird eingezogen. Jede klassen-qualifizierte Regel (z.B. `.so-hint`, `.so-stat small`) sticht diese hier ohnehin. EINE Zeile statt 27 Fundstellen. */ small { font-size: max(11px, 0.8333em); } body { margin: 0; min-height: 100vh; min-height: 100dvh; font-family: 'Inter', system-ui, sans-serif; font-size: 14px; /* 1:1-Huelle (Owner-Regel 02.08., loest den flachen Grund vom 28.07. ab): das Referenzbild traegt einen GEMESSENEN Verlauf — Mitte #0b131c, Raender bis #01070c (13_25_27, Messpunkte Seite-*/App-Grund-*). Der Verlauf liegt als eigene feste Ebene (body::before) hinter allem: background-attachment:fixed ist auf iOS unzuverlaessig, eine position:fixed-Ebene nicht. var(--bg) bleibt der Fallback-Grund. */ background: var(--bg); color: var(--text); line-height: 1.5; text-rendering: optimizeLegibility; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; } /* Die gemessene Verlaufs-Ebene der 1:1-Huelle (siehe body-Kommentar). */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--canvas-background); } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } input, select, textarea, button { transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); } ::placeholder { color: var(--text-secondary); opacity: 1; } ::selection { background: rgba(var(--accent-rgb), .28); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* Scrollbars: schmal, ruhig, themetreu */ * { scrollbar-width: thin; scrollbar-color: rgba(var(--tint-rgb), .16) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(var(--tint-rgb), .14); border-radius: var(--radius-card); } *::-webkit-scrollbar-thumb:hover { background: rgba(var(--tint-rgb), .24); } .skip-link { position: absolute; left: 16px; top: -48px; background: var(--accent); color: var(--on-accent); padding: 10px 14px; border-radius: var(--radius-button); z-index: 50; font-weight: 600; } .skip-link:focus { top: 12px; } /* `left: 0` ist keine Kosmetik, sondern die Reparatur eines QUERLAUFS (gemessen 19.08.2026 im echten Browser auf 1400 px). `position: absolute` OHNE Kante behaelt die statische Stelle. Steht die Vorleser-Zeile in der letzten Spalte einer breiten Tabelle (`Aktionen`), ist das ein Punkt WEIT rechts — und `.table-wrap { overflow-x: auto }` klemmt ihn NICHT ab, weil der Wirt selbst nicht positioniert ist und darum nicht sein Bezug ist. Ergebnis: die ganze Seite bekam einen waagrechten Rollbalken — «Standortbetreiber» 22 px, «Vertriebe» 194 px (Hausregel 9: kein Querlauf). Mit `left: 0` sitzt die Zeile an der linken Kante ihres Bezugs, bleibt 1×1 px, bleibt geklemmt und bleibt fuer Vorleseprogramme genau dort, wo sie im Baum steht — die Lesereihenfolge ist der Baum, nicht die Lage. Gegenprobe am selben Lauf: dieselbe Messung auf «Personen», «Was ich schulde» und «Offerten» bleibt 0 px, vorher wie nachher. */ .sr-only { position: absolute; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* ---------- App-Shell ---------- */ .app-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar-w, 236px) 1fr; } body.no-topbar .app-shell { grid-template-columns: 1fr; } body.sidebar-collapsed .app-shell { --sidebar-w: 68px; } .main-shell { /* Owner-Entscheid 2026-07-05 (Monday-Referenz): Arbeitsflächen nutzen die VOLLE Breite — kein Content-Cap; der Seitenrand wächst sanft mit. Dokument-Views (Offer-Editor) deckeln sich SELBST (.so-editor). ⚠️ Lehre v73-Regression: margin-inline:auto + max-width auf einem GRID-ITEM shrinkt auf fit-content (Login/Tabellen kollabierten schmal) — Grid-Items brauchen width:100%, nie auto-Margins für Zentrierung. */ width: 100%; /* Der Bodenabstand kommt aus EINER Rechnung (Block «Boden-Geometrie» oben) — er kennt Daumenleiste, Fixleiste, Plus-Knopf und sichere Zone. Am Rechner ist er `var(--sab)`, also exakt der bisherige Wert. */ padding: 20px clamp(28px, 2.5vw, 56px) calc(32px + var(--boden-abstand)); min-width: 0; /* Grid-Item muss schrumpfen können (Kanban) */ } .view { display: none; } .view.active { display: block; } /* Topbar (Legacy-Chrome einzelner Views/Doc-Routen) */ .topbar { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; min-height: var(--header-height); padding: max(14px, var(--sat)) 24px 14px; backdrop-filter: blur(18px); background: var(--topbar-bg); border-bottom: 1px solid var(--border); } .logo { width: 170px; color: var(--accent); } .footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 18px 24px 26px; color: var(--text-secondary); font-size: 13px; } /* Micro-Label (Ex-Eyebrow). Der Mono-Kicker-Scaffold ist abgeschafft; die View-Wellen haben ihn abgebaut, wo er reine Deko war. Die Mitnahme `.panel__eyebrow` ist damit erledigt — kein Markup traegt sie mehr. */ .eyebrow { margin: 0 0 2px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .07em; font-size: 11px; font-weight: 600; font-family: inherit; } /* ---------- Sidebar ---------- */ .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; background: var(--surface-1); border-right: 1px solid var(--border); padding: 16px 12px; } .sidebar__top { display: flex; align-items: center; min-height: 44px; padding: 4px 8px 14px; } .sidebar .logo { width: 124px; transition: width var(--dur) var(--ease); } .sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; } .sidebar .nav-tab { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border-radius: var(--radius-button); min-height: 38px; border: 0; background: transparent; color: var(--text-secondary); font: 500 13.5px/1 inherit; text-decoration: none; white-space: nowrap; overflow: hidden; transition: background var(--transition), color var(--transition); } .sidebar .nav-tab:hover { background: rgba(var(--tint-rgb), .05); color: var(--text-primary); } /* Aktiv = gefüllte Türkis-Pille mit dunkler Schrift (Referenz 13_25_27: «Cockpit»). Die Soft-Fassung davor war im Nebeneinander kaum vom Ruhezustand zu unterscheiden — der Owner fand den Ort nicht wieder. OHNE Hof (03.08.): senkrechter Schnitt durch 13_25_27.png bei x=520 — Pille 7,41,48 · eine Zeile unter ihrer Kante 2,12,18 · Grund 3,12,18. Ein 16px-Leuchtradius hätte dort angehoben. Die Pille trägt ihre Auffälligkeit durch die Füllung, nie durch Schein. */ .sidebar .nav-tab.active { background: var(--accent); color: var(--on-accent); } .sidebar .nav-tab.active .nav-tab__icon { color: var(--on-accent); } .nav-tab__icon { display: inline-flex; flex: none; width: 19px; height: 19px; } .nav-tab__icon svg { width: 19px; height: 19px; } .nav-tab__label { overflow: hidden; text-overflow: ellipsis; } .sidebar__footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; } /* Fusszeile der Seitenleiste: Name führt, Rolle steht klein darunter. Nebeneinander brach «Standortbetreiber · Sazan Deskaj» im 236px-Well auf zwei Zeilen um. */ .sidebar__footer .user-pill { width: 100%; justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 1px; } .sidebar__footer .user-pill__role { order: 2; } /* Inline-Icon (folgt Schriftgrösse, sitzt auf der Textlinie) */ .eico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; vertical-align: -0.14em; } .eico svg { width: 1.05em; height: 1.05em; } /* Die Grundgroesse jedes Zeichens aus utils/icons.js (20.08.2026). Vorher trug ein Icon nur seinen viewBox — die Groesse musste JEDER Kasten selbst per `.foo svg { width: … }` setzen. Wo diese Regel fehlte, wurde aus einem 12-px-Zeichen ein Klotz in Kastenbreite: so hat die Uhr an `.kanban-card__cb` das Rechnungs-Kanban auf ~500 px je Karte gesprengt (gemessen: Uhr 283 px, Karte 384 px — scripts/_zeichen_geometrie_test.mjs). `.ico` hat Spezifitaet 0,1,0 und verliert damit gegen JEDE bestehende Regel der Form `.foo svg` (0,1,1) — kein gesizter Slot aendert sich, nur die vergessenen bekommen einen Boden statt eines Kraters. */ .ico { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -0.14em; } /* Hamburger + Overlay (nur Mobile) */ .sidebar-toggle { position: fixed; top: calc(12px + var(--sat)); left: 12px; z-index: 55; width: 44px; height: 44px; border-radius: var(--radius-card); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); align-items: center; justify-content: center; cursor: pointer; display: none; box-shadow: var(--shadow-sm); } .sidebar-overlay { position: fixed; inset: 0; background: rgba(4, 8, 10, .55); backdrop-filter: blur(2px); z-index: 55; } /* Eingeklappt (Desktop): nur Icons */ @media (min-width: 901px) { body.sidebar-collapsed .nav-tab__label, body.sidebar-collapsed .sidebar .user-pill__role, body.sidebar-collapsed .sidebar .user-pill strong { display: none; } body.sidebar-collapsed .sidebar { padding: 16px 8px; } body.sidebar-collapsed .sidebar .nav-tab, body.sidebar-collapsed .sidebar__footer .user-pill { justify-content: center; padding: 9px; } body.sidebar-collapsed .sidebar__top { justify-content: center; } body.sidebar-collapsed .sidebar .logo { width: 30px; } } /* Mobile: Sidebar als Off-Canvas */ @media (max-width: 900px) { .app-shell { grid-template-columns: 1fr !important; } .sidebar { position: fixed; top: 0; left: 0; width: 268px; z-index: 60; height: 100vh; height: 100dvh; overflow-y: auto; padding-top: var(--sat); padding-bottom: var(--sab); transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease); border-right: 1px solid var(--border); } body.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); } .sidebar-toggle { display: flex; } .main-shell { padding-top: calc(64px + var(--sat)); } .main-shell:has(.doc-sheet) { padding-top: calc(22px + var(--sat)); } } /* ---------- Subnav: Underline-Tabs (Seiten-Ebene) ---------- */ .subnav { display: flex; gap: 2px; align-items: center; width: fit-content; max-width: 100%; margin: 0 0 18px; padding: 0 0 0; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .subnav::-webkit-scrollbar { display: none; } /* Die Fahne der Subnav: sie scrollt waagrecht, also muss sie es auch sagen (DESIGN §7). Ohne sie stand der letzte Reiter auf 390 px hart an der Kante abgeschnitten und sah kaputt aus statt scrollbar. Klassen: main.js `subnavFahne()`. Gleiche Mechanik wie `.cp__zonenwahl`. */ .subnav.is-mehr-rechts { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } .subnav.is-mehr-links { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px); mask-image: linear-gradient(90deg, transparent, #000 28px); } .subnav.is-mehr-links.is-mehr-rechts { -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent); } .subnav__tab { position: relative; flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border-radius: var(--radius-card) var(--radius-card) 0 0; color: var(--text-secondary); font-weight: 500; font-size: 13.5px; white-space: nowrap; transition: background var(--transition), color var(--transition); } .subnav__tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; transition: background var(--transition); } .subnav__tab:hover { color: var(--text-primary); background: rgba(var(--tint-rgb), .04); } .subnav__tab.active { color: var(--text-primary); } .subnav__tab.active::after { background: var(--accent); } /* Legacy .view-switch/.nav-tab (Doc-/Login-Chrome): Segmented-Optik */ .view-switch { display: inline-flex; gap: 2px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 3px; } .view-switch .nav-tab { border: 0; background: transparent; color: var(--text-secondary); border-radius: var(--radius-button); padding: 8px 14px; font-weight: 650; font-size: 12px; letter-spacing: 0; text-transform: none; min-height: 36px; } .view-switch .nav-tab:hover { color: var(--text-primary); } .view-switch .nav-tab.active { background: var(--accent-soft); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--accent-line); } /* ---------- Segmented Control (view-toggle / section-nav — EIN Stil) ---------- */ .view-toggle, .section-nav { display: inline-flex; gap: 2px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 3px; margin-bottom: 12px; } .section-nav { margin-top: 6px; margin-bottom: 0; flex-wrap: wrap; } /* Karte 01.08., Position 6: zwei eingeklappte Tueren wurden zu Umschaltern in derselben Bauart wie der Blatt-Wechsel — «Ich | Team» auf «Heute» und «Aktivität | Änderungen» im «Verlauf». Sie brauchen keine eigene Erscheinung, nur ihren Platz: der Umfangs-Schalter steht in der Werkzeugleiste (kein doppelter Abstand), die Reiterleiste steht ueber der Flaeche. */ .filters-toolbar .view-toggle--scope { margin-bottom: 0; } .vl-reiter { margin-bottom: 14px; } /* «Am haeufigsten korrigiert …» im Kopf des Reiters «Aenderungen» (field_edit_heatmap). Eine leise Zeile rechts im Panelkopf — sie beantwortet die Frage der Liste darunter, ohne einen zweiten Bildschirm zu oeffnen. */ .vl-haeufig { margin-left: auto; font-size: 12px; text-align: right; } @media (max-width: 720px) { .vl-haeufig { margin-left: 0; text-align: left; width: 100%; } } .view-toggle__btn, .section-nav__btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--text-secondary); padding: 7px 14px; border-radius: var(--radius-button); font-weight: 650; font-size: 12px; letter-spacing: 0; text-transform: none; cursor: pointer; min-height: 34px; white-space: nowrap; transition: background var(--transition), color var(--transition); } .view-toggle__btn .vt-ico { display: inline-flex; } .view-toggle__btn .vt-ico svg { width: 16px; height: 16px; } /* GEWAEHLT IST BLAU (Owner 03.09.2026, «man spuert: das ist gewaehlt»): dieselbe Toenung und Haarlinie wie .kf-segment — ein Aktiv-Stil im ganzen Haus. */ .view-toggle__btn.is-active, .section-nav__btn.is-active { background: var(--accent-soft); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--accent-line); } .view-toggle__btn:hover:not(.is-active), .section-nav__btn:hover:not(.is-active) { color: var(--text-primary); } /* ---------- Panels & Karten: Fläche + Hairline (Referenz 28.07.) ---------- Die Karte ist eine Stufe heller als der Grund und trägt eine feine Hairline als Kante — kein Innen-Glanz, kein Ambient-Schatten. Radius 14. Der Border-Hook bleibt an derselben Stelle: Regeln, die border-color setzen (Selektion, Warnzustände), wirken unverändert. */ /* DIE BLOCKGRENZE — DIE KARTE KOMMT ZURUECK (Owner-Urteil 2026-08-25). Owner-Wortlaut: «Dort im Desktop meine ich das gesamte UI/UX. Man hat keinen Unterschied: Alles ist einfach auf dunkle Flaeche geschrieben, kein Leben, keine Ahnung, was.» WAS HIER VORHER STAND — und warum es faellt. Am 13.08. wurde `.panel` FLACH gemacht («Wizard oder Widget»): `background: transparent`, kein Rahmen, kein Radius, `padding: 21px 0`, und statt einer Fuge eine GETEILTE Haarlinie zum Nachbarn. Der Befund von heute ist die gemessene Folge davon: · `.panel` ist mit 1'183 Fundstellen in 109 Dateien der meistbenutzte Baustein des Hauses und war der einzige, der KEINE Kante hatte. · Gemessen ueber 29 gebaute Flaechen bei 1400px: `.panel` stellt mit 51 breiten Bloecken die groesste Gruppe ueberhaupt (vor `div` 46, `panel-row` 44) — und keiner davon war als Block erkennbar. · Von 249 senkrechten Abstaenden lagen 213 bei 20px oder darunter: ein neuer ABSCHNITT stand so eng wie zwei Zeilen INNERHALB einer Liste. DER WIDERSPRUCH IST KEINER. Der Owner sagte am 13.08. NICHT «keine Karten», sondern: nichts soll wie ein aufgesetztes Widget ueber der Flaeche schweben. Das Schweben ist der Schatten und die abhebende Erhoehung — beides bleibt weg (`box-shadow: none`, `--surface` ist EINE Stufe, nicht drei). Was zurueckkommt, ist die Kante, die das Fundament dieser Datei von Anfang an vorschreibt: «Karten eine Stufe heller MIT feiner Hairline · Radius 14» (Kopf dieser Datei, Owner-Referenzen 28.07.). `--surface` traegt den Kommentar «Karten/Panels», `--radius-card: 14px` heisst «Radius 14 wie in der Referenz». Beide waren entschieden und wurden von `.panel` nicht benutzt. DIE REFERENZ ZEIGT ES OHNE AUSLEGUNG: docs/design/referenzen/Kundenansichtenportal/«… 13_21_30 (12).png» (jedes Panel eine Karte mit eigener Flaeche, Haarlinie, Radius und echter Fuge — Aktive Kampagnen, Schnellaktionen, Wieder buchen, Entwuerfe, Benoetigte Inhalte, Letzte Reports, Letzte Rechnungen) und «… 13_21_27 (10).png» (Buchungszusammenfassung, Preisuebersicht, Zahlungsart als drei Karten). WAS BLEIBT: `.modal`. Ein Dialog DARF schweben (EINHEIT §3.9). `.firm-card` bleibt flach: die Lead-ZEILE ist ein Listeneintrag, kein Abschnitt — sie steht INNERHALB eines Blocks und wuerde als eigene Karte die Karte in der Karte erzeugen, die unten ausdruecklich verhindert wird. DIE FUGE STATT DER GETEILTEN LINIE: mit eigener Kante je Karte waere die `border-top` des Nachbarn eine doppelte Linie. Sie faellt, der Abstand kommt zurueck (16px). Gemessen an 29 Flaechen in beiden Massen: von 104 `.panel` liegen 102 in einem `display:block`-Eltern, die beiden anderen sind das EINZIGE Kind ihres Rasters (`.login-card`) — `+` trifft dort nie. Der Befund vom 13.08. (9 Routen) haelt also auch ueber 29. WAAGERECHTES PADDING: 20px. Der Inhalt ruecken damit um die Kartenkante ein — genau wie in der Referenz. Senkrecht 18px + 1px Rahmen = die alte Hoehe von 21px minus zwei Pixel, die die Fuge zurueckgibt. */ .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: none; } .panel, .firm-card { box-shadow: none; } .firm-card { background: transparent; border: 0; border-radius: 0; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 18px 20px; /* DIE FUGE HAENGT AN DER KARTE, NICHT AM NACHBARN (nachgemessen 25.08.). Erster Versuch war `.panel + .panel { margin-top: 16px }`. Am Bild gemessen half das fast nirgends: die Flaechen legen ihre Abschnitte in Halter (`
`), also sind zwei Karten nur selten GESCHWISTER — von 126 Karten ueber 29 Flaechen standen genau neun in einer messbaren Geschwister-Fuge, Median 10px. Eine Karte, die ihren eigenen Abstand nach unten mitbringt, trifft jeden Fall: den Geschwister-Fall, den Halter-Fall und den kuenftigen. */ margin-bottom: 16px; } .panel + .panel { border-top: 0; } /* Ein Panel IM Panel waere eine Karte in der Karte. Es bleibt ein Abschnitt mit Haarlinie — die Gliederung ohne den zweiten Kasten, und ohne die Fuge: innerhalb einer Karte trennt die Linie. */ .panel .panel { background: none; border: 0; border-radius: 0; padding: 16px 0; margin-bottom: 0; } .panel .panel + .panel { border-top: 1px solid var(--border); } .panel__header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 14px; } /* EINHEIT 1.5: Panel-Titel 13px, fest — innen wie aussen (Integrator W-B). RANGFOLGE 25.08.: die Ueberschrift war KLEINER als die Zeile, die sie ueberschreibt — `.panel h3` 13px/600/weiss gegen `.panel-row__main > b` 14px/600/weiss (gemessen im Browser, nicht geschaetzt). Zwei Dinge in derselben Farbe und demselben Gewicht, und das untergeordnete groesser. Geheilt wird es OHNE fuenften Schriftgrad (EINHEIT §1.5 legt vier fest): die Zeile faellt auf den Grad «Kachel-Label» (12.5px, weiter unten), und die Ueberschrift bekommt Laufweite statt Enge — `-.01em` war negativ und zog sie optisch noch kleiner. Hell bleibt sie: die Referenz («… 13_21_30 (12).png», «Aktive Kampagnen») zeigt den Panel-Titel weiss, und eine graue Ueberschrift waere genau die zweite graue Zeile, die der Owner heute beklagt. */ .panel h3, .panel h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--text-primary); } /* Sektions-Titel gesperrt (Referenz: «PRIMÄRES KAMPAGNENZIEL», «SCREENUMFANG»). */ .panel__title { margin: 0 0 6px; font-size: 15px; font-weight: 650; letter-spacing: -.015em; text-transform: none; color: var(--text-secondary); } /* 03.09.2026 (W4 «der Bereich, wo gerechnet wird»): der Kopf eines Kastens ist ein ETIKETT wie in der Referenz (Bild 14: «IHR MEDIAPLAN AUF EINEN BLICK», «IHRE PREISSCHÄTZUNG») — gesperrte Versalien, gedämpft; das Grosse sind die Zahlen darunter. Der Zusatz im Kopf (`.panel__hint`) bleibt gemischt geschrieben: er ist Beschriftung, kein zweites Etikett. Gilt im ganzen Haus, nicht je Fläche. */ .panel__header h3, .panel__header h2 { font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); } .panel__header h3 .panel__hint, .panel__header h2 .panel__hint { text-transform: none; letter-spacing: 0; } /* ---------- Kennzahl-Kachel (Referenz: grosse Zahl, kleines Label) ---------- */ /* KPI-Strip (Berater/Besucher): EIN Panel, Hairline-getrennte Stats */ .kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; padding: 6px 0; } .kpi-pill { display: flex; flex-direction: column; gap: 3px; padding: 10px 18px; background: transparent; border: 0; border-left: 1px solid var(--border); border-radius: 0; } .kpi-pill:first-child { border-left: 0; } .kpi-pill span { color: var(--text-secondary); font-size: 12.5px; font-weight: 500; letter-spacing: 0; } .kpi-pill strong { font-size: 24px; font-weight: 650; letter-spacing: -.4px; font-variant-numeric: tabular-nums; color: var(--text-primary); } .kpi-pill--rate strong { color: var(--text-primary); } /* ---------- Filter & Formulare ---------- */ .sticky-filters { position: sticky; top: calc(var(--sat) + 10px); z-index: 20; margin-bottom: 16px; } .filters-panel { padding: 12px 14px; } .filters-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; } .filters-group, .filters-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 150px; } .field--wide { min-width: min(420px, 100%); flex: 1 1 320px; } .field--narrow { max-width: 120px; min-width: 0; } /* ZWEI KURZE FELDER TEILEN SICH EINE ZEILE (25.08.2026). Anlass: der Anlege-Dialog des Offerten-Rechners fragt Firmenname, Strasse, PLZ und Ort. Auf 390×620 standen die vier untereinander — PLZ, Ort UND beide Knöpfe lagen unter der Zone, die eine offene iOS-Tastatur bedeckt (gemessen 25.08.: Felder bei y=394 und y=478, Knöpfe bei y=537 auf 620 px Schirm; der Dialog selbst rollt nicht, weil sein Inhalt ohne Tastatur genau passt). PLZ ist vier Zeichen — sie neben den Ort zu stellen spart eine ganze Zeile. Die Regel greift NUR in einem Kasten, der ein solches Feld wirklich enthält (`:has`) — jeder andere Dialog des Hauses behält seine einspaltige Form, Pixel für Pixel. `.modal__body` ist ein Grid (eine Spalte); mit zwei Spalten müssen alle übrigen Kinder ausdrücklich über beide gehen. */ .modal__body:has(> .field--eng) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .modal__body:has(> .field--eng) > * { grid-column: 1 / -1; } .modal__body:has(> .field--eng) > .field--eng { grid-column: span 1; min-width: 0; } /* EINHEIT 1.5 (Schlichtung 10.08., Prüfblick W9 Q1): Versalien tragen genau eine Aufgabe — den Tabellenkopf. Feldnamen sind keine Spaltenköpfe; die gemischte Form kommt aus patch-firma.css, wo sie zuerst hergeleitet wurde, und gilt ab hier hausweit statt je Fläche einzeln. */ .field span { color: var(--text-secondary); font-size: 12px; font-weight: 600; } select, .search-input, textarea { width: 100%; min-height: 40px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-button); padding: 0 12px; color: var(--text); } /* Jedes Textfeld, auch ohne label.field und ohne .search-input. Vorher trug ein blankes die Voreinstellung des Browsers — im Kundenportal stand die Standortsuche als grauer Systemkasten mitten in der dunklen Fläche. `:where()` macht die Regel spezifitätslos: sie ist ein BODEN, den jede Komponentenregel überschreibt. Ohne das Auszeichnen gewinnt `input[type=number]` (0,1,1) gegen `.lx-policy__num` (0,1,0) und hätte dessen 44px-Tapfläche auf 40px gedrückt — im Regel-Test gemessen. */ :where(input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=url], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input:not([type])) { min-height: 40px; padding: 9px 12px; color: var(--text); /* 1:1-Huelle: Eingabefelder tragen in der Referenz einen DEUTLICHEN Rand (Suchfeld-Rand gemessen #383d45) — die feine Karten-Hairline war hier zu leise, Felder verschwammen mit dem Grund. */ background: var(--surface-inset); border: 1px solid var(--line-strong); border-radius: var(--radius-button); } :where(input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=url], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input:not([type])):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); } select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; } select:hover, .search-input:hover, textarea:hover { background-color: var(--surface-hover); border-color: var(--line-strong); } select:focus, .search-input:focus-within, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); } .search-input { display: flex; align-items: center; gap: 10px; padding-right: 12px; } .search-input svg { width: 17px; height: 17px; color: var(--text-secondary); flex: 0 0 auto; } .search-input input { border: 0; outline: none; background: transparent; width: 100%; min-width: 0; min-height: 36px; } .field input[type=date], .field input[type=time], .field input[type=tel], .field input[type=email], .field input[type=text], .field input[type=search], .field input[type=number], .field input[type=password], .field select, .field textarea { background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-button); padding: 9px 12px; color: var(--text); min-height: 38px; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); } .field textarea, textarea { padding-top: 9px; padding-bottom: 9px; } .notes-area { width: 100%; min-height: 96px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-button); padding: 10px 12px; color: var(--text); resize: vertical; font: inherit; } .check-row { display: flex; gap: 14px; flex-wrap: wrap; } .check-row label { display: flex; gap: 8px; align-items: center; } .field--check { flex-direction: row; align-items: center; gap: 10px; min-height: 38px; } /* Custom Checkbox (app-weit, ohne Markup-Änderung) */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; flex: none; margin: 0; border: 1.5px solid var(--line-strong); border-radius: var(--radius-card); background: var(--surface-inset); cursor: pointer; display: inline-grid; place-items: center; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition); } input[type="checkbox"]::after { content: ""; width: 100%; height: 100%; background: url("data:image/svg+xml;utf8,") center / 70% no-repeat; transform: scale(0); transition: transform var(--dur-fast) var(--ease); } input[type="checkbox"]:hover { border-color: var(--accent); } input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } input[type="checkbox"]:checked::after { transform: scale(1); } input[type="checkbox"]:indeterminate { background: var(--accent); border-color: var(--accent); } input[type="checkbox"]:indeterminate::after { background: url("data:image/svg+xml;utf8,") center / 70% no-repeat; transform: scale(1); } /* ---------- Buttons: EIN Vokabular ---------- */ /* Es sind noch zwei: .primary-btn und .ghost-btn. .secondary-btn, .toggle-btn und .sort-btn hatten in public/src keinen Traeger mehr — sie sind mit dem Redundanz-Pass gefallen, nicht ersetzt worden. */ /* Knöpfe tragen ihr Wort gesperrt in Versalien (Referenz: SPEICHERN, ZURÜCK, GEBIET PLANEN →); die Hauptaktion ist eine eishelle Fläche mit dunklem Wort, die zweite ein dunkles Feld mit Haarlinie. */ .primary-btn, .ghost-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 16px; border-radius: var(--radius-button); font-weight: 650; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; white-space: nowrap; max-width: 100%; } /* Ein Knopf, dessen Wort laenger ist als das Handy breit («Abschluss (Bilanz, Erfolgsrechnung, MWST)» in Versalien), ragte 13,5 px aus dem Bild — nichts konnte dorthin rollen (Breitenprobe 03.09., buchhaltung@390). Am Handy bricht das Wort im Knopf um; der Boden von 44 px bleibt, die Hoehe waechst. */ @media (max-width: 720px) { .primary-btn, .ghost-btn { white-space: normal; text-align: center; line-height: 1.25; } } .primary-btn { background: var(--accent-fill); color: var(--on-accent); box-shadow: none; } .primary-btn:hover:not(:disabled) { background: var(--accent-bright); } .primary-btn:active:not(:disabled) { transform: scale(.985); } .primary-btn:disabled { opacity: .55; cursor: not-allowed; } .primary-btn--call { background: var(--accent-fill); color: var(--on-accent); } .primary-btn--call:hover { background: var(--accent-bright); color: var(--on-accent); } .ghost-btn { background: var(--surface-2); color: var(--text); border-color: var(--border); } .ghost-btn:hover { background: rgba(var(--tint-rgb), .05); border-color: var(--line-strong); } .ghost-btn:active { transform: scale(.985); } .ghost-btn--danger { color: var(--bad-strong); border-color: rgba(var(--bad-rgb), .3); } .ghost-btn--danger:hover { background: rgba(var(--bad-rgb), .10); border-color: var(--bad-strong); } .ghost-btn--block { width: 100%; justify-content: flex-start; flex-direction: column; align-items: flex-start; padding: 12px 14px; gap: 4px; text-align: left; min-height: 0; } .ghost-btn--block strong { color: var(--text-primary); } .ghost-btn--block span { color: var(--text-secondary); font-size: 12.5px; font-weight: 400; white-space: normal; } .ghost-btn--xs { padding: 4px 10px; min-height: 28px; font-size: 12.5px; } .icon-btn { width: 36px; height: 36px; min-height: 0; flex-shrink: 0; padding: 0; display: grid; place-items: center; cursor: pointer; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-button); color: var(--text); } .icon-btn svg { width: 17px; height: 17px; } .icon-btn:hover { background: rgba(var(--tint-rgb), .06); border-color: var(--line-strong); } .icon-btn:active { transform: scale(.94); } .icon-btn--sm { width: 30px; height: 30px; } .icon-btn--sm svg { width: 14px; height: 14px; } /* Touch-Floor: auf Touch-Geräten bleibt ALLES ≥44px (Tablet-Bruchzone inkl.) */ @media (max-width: 1024px), (pointer: coarse) { .primary-btn, .ghost-btn { min-height: 44px; } .icon-btn { width: 44px; height: 44px; } .icon-btn--sm { width: 38px; height: 38px; } select, .search-input, textarea { min-height: 44px; } .field input[type=date], .field input[type=time], .field input[type=tel], .field input[type=email], .field input[type=text], .field input[type=search], .field input[type=number], .field input[type=password], .field select, .field textarea { min-height: 44px; } /* Auch die Felder ohne label.field halten die Tapfläche (Boden von Z. 429). */ input[type=text], input[type=search], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=url], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input:not([type]) { min-height: 44px; } .search-input input { min-height: 42px; } input[type="checkbox"] { width: 22px; height: 22px; } /* Iter 26, verschärft 08.08. (MASTERPLAN E2): iOS zoomt die GANZE App, sobald ein Feld mit Schrift <16px den Fokus bekommt — und bleibt gezoomt hängen (un-nativ). Der Floor stand hier seit Iter 26 als Element-Selektor und verlor damit gegen JEDE spätere Klassen-Regel — am 08.08. lagen alle Konfigurator-Felder auf 12–13px (.kf-feld input, .calc-felder, .kf-leiste__gruppe select …): das Gesetz galt, nur nirgends. Deshalb !important — ein OS-Verhaltens-Floor wie [hidden] und reduced-motion, keine Gestaltung. Er trifft nur Feld-INHALTE (input/select/textarea); Labels, Hinweise und Buttons bleiben. Wächter: _konfigurator_ui_test.mjs («Kein fokussierbares Eingabefeld unter 16px»). Wer ein Feld am Touch anders will, ändert es HIER. */ input, select, textarea { font-size: 16px !important; } .view-toggle__btn, .section-nav__btn { min-height: 44px; } .firm-link { min-height: 44px; display: inline-flex; align-items: center; } .cal-toggle { min-height: 44px; } .subnav__tab { min-height: 44px; } .ghost-btn--xs { min-height: 38px; } } /* ---------- Status-Chips: Wort in Pillenform (Referenz 28.07.) ---------- Alpha-Fläche + Strong-Text, keine Border, Radius 999 — ein Zustand ist ein Wort, kein Kasten. --radius-badge trägt die Pillenform app-weit. */ /* Stand-Chip: gerahmt, Versalien gesperrt, kaum Fläche (Referenz Bild 02 «STARTKLAR» grün, Bild 12 «AUSWAHL FEHLT» bernstein). */ .badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-badge); padding: 4px 10px; font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3; border: 1px solid rgba(var(--tint-rgb), .18); white-space: nowrap; } .badge--version { background: var(--accent-soft); color: var(--accent-strong); } .badge--industry { background: rgba(var(--tint-rgb), .06); color: var(--text-secondary); } .badge--high { background: rgba(var(--good-rgb),.06); color: var(--good-strong); border-color: rgba(var(--good-rgb),.35); } .badge--medium { background: rgba(var(--warn-rgb),.06); color: var(--warn-strong); border-color: rgba(var(--warn-rgb),.35); } .badge--low { background: rgba(var(--bad-rgb),.06); color: var(--bad-strong); border-color: rgba(var(--bad-rgb),.35); } .badge--region-zuerich { background: rgba(59,130,246,.14); color: var(--zuerich-text); } .badge--region-aarau { background: rgba(139,92,246,.14); color: var(--aarau-text); } .badge--region-bern { background: rgba(var(--accent-rgb),.14); color: var(--accent-strong); } .badge--region-solothurn { background: rgba(249,115,22,.14); color: var(--warn-strong); } .badge--region-luzern { background: rgba(236,72,153,.14); color: var(--luzern-text); } .badge--open { background: rgba(var(--tint-rgb), .08); color: var(--text); } .badge--inprogress { background: rgba(59,130,246,.15); color: var(--info-strong); } .badge--contacted { background: rgba(var(--accent-rgb),.15); color: var(--accent-strong); } .badge--appointment { background: rgba(var(--good-rgb),.15); color: var(--good-strong); } .badge--won { background: rgba(var(--good-rgb),.22); color: var(--good-strong); } .badge--lost { background: rgba(var(--bad-rgb),.16); color: var(--bad-strong); } .badge--later { background: rgba(var(--warn-rgb),.16); color: var(--warn-strong); } .badge--pool { background: rgba(var(--tint-rgb), .06); color: var(--text-secondary); } .badge--round { background: var(--accent-soft); color: var(--accent-strong); font-variant-numeric: tabular-nums; } .badge--role-admin { background: rgba(var(--bad-rgb),.15); color: var(--bad-strong); } .badge--role-manager { background: rgba(var(--warn-rgb),.15); color: var(--warn-strong); } .badge--role-caller { background: rgba(59,130,246,.15); color: var(--info-strong); } /* 03.08.: Seit die externen Vertriebe in der Verteil-Auswahl stehen, brauchen sie eine eigene Farbe. Sie sind KEINE eigenen Leute — wer ihnen einen Lead gibt, gibt ihn aus dem Haus, und das muss man in der Liste sehen, ohne die Rollen-Bezeichnung zu lesen. Türkis wie die Marke: extern, aber zugehörig. */ .badge--role-vertrieb_admin, .badge--role-vertrieb_user { background: rgba(var(--accent-rgb),.14); color: var(--accent-strong); } .badge--lg { padding: 6px 14px; font-size: 13px; } .ads-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 68px; min-height: 24px; padding: 0 11px; border-radius: var(--radius-badge); border: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; } .results-pill { display: inline-flex; align-items: center; justify-self: start; width: max-content; max-width: 100%; min-height: 30px; padding: 0 12px; border-radius: var(--radius-badge); background: rgba(var(--tint-rgb), .05); border: 0; color: var(--text-secondary); font-size: 12.5px; font-variant-numeric: tabular-nums lining-nums; } /* ---------- Firm-Card (Lead-Karte) ---------- */ /* FLACH STATT KASTEN (Owner «Widget», 2026-08-13): die Lead-Liste war ein Stapel schwebender Karten mit 10px Luft dazwischen. Jetzt eine durchgehende Flaeche aus Zeilen, getrennt durch eine Haarlinie — dasselbe Idiom wie die Standortliste des Konfigurators (`.kf-loc`) und der Korb (`.kf-stueck`). Die 1px des alten Rahmens wandern ins senkrechte Padding (14 → 15), die waagerechten 16px fallen weg: die Zeile beginnt an derselben Kante wie Seitentitel und Filterleiste. */ .firms-list { display: grid; gap: 0; } .firm-card { padding: 15px 0; display: grid; gap: 10px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background var(--transition); } .firm-card:last-child { border-bottom: 0; } .firm-card:hover { background: rgba(var(--tint-rgb), .045); } .firm-card__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-top: 6px; } .firm-card__meta { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 6px; align-items: center; color: var(--text-secondary); font-size: 13px; margin: 2px 0; } .firm-card__contact { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; } .firm-link { color: var(--accent-strong); text-decoration: none; font-size: 12.5px; font-weight: 500; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-badge); display: inline-flex; align-items: center; gap: 6px; } .firm-link:hover { background: rgba(var(--tint-rgb), .06); border-color: var(--line-strong); color: var(--accent-bright); } /* FLACH STATT KASTEN (Owner «Widget», 2026-08-13): zwei getoente Kaestchen IN der Zeile. Sie tragen jetzt dasselbe Zeichen wie die Warnung des Konfigurators (`.kf-warn`, docs/design/patch-konfigurator.css): eine Akzentkante links statt einer Flaeche. Die Warnstufe bleibt ueber die Textfarbe voll erkennbar. */ .firm-card__notes { background: transparent; border: 0; border-radius: 0; box-shadow: inset 3px 0 0 var(--warn); padding: 8px 10px; font-size: 13px; color: var(--warn-strong); margin: 4px 0 0; } .firm-card__schmerz { font-size: 12.5px; color: var(--text-secondary); background: transparent; border: 0; border-left: 0; box-shadow: inset 3px 0 0 rgba(var(--tint-rgb), .22); padding: 7px 10px; border-radius: 0; margin-top: 4px; } /* Toggle-Affordanz: kurzer Text + SVG-Chevron (currentColor via Mask) — kein Unicode-«▼» */ .card-toggle { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-weight: 500; font-size: 12.5px; } .card-toggle::after { content: ""; width: 13px; height: 13px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .firm-card:hover .card-toggle { color: var(--text-primary); } /* Selektion: Accent-Inset links + Tint (keine Vollborder) */ .firm-card.firm-card--selectable { padding-left: 48px; position: relative; } .firm-card__check { position: absolute; left: 0; top: 4px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; } .firm-card__checkbox { cursor: pointer; } /* Der gewaehlte Zustand bleibt vollstaendig sichtbar — er lebte nie vom Rahmen, sondern von der Akzentkante links und dem Tuerkis-Hauch (EINHEIT §4.4). Nur der abhebende `var(--surface)`-Grund und der Schlagschatten fallen weg: eine gewaehlte Zeile ist keine schwebende Karte. */ .firm-card.is-selected { background: linear-gradient(180deg, rgba(var(--accent-rgb),.07), rgba(var(--accent-rgb),.04)); box-shadow: inset 2.5px 0 0 var(--accent); } @media (max-width: 720px) { .firm-card { padding: 14px 0; } .firm-card__contact { justify-content: flex-start; } } /* ---------- Listen-Zeilen (User-Modal u.a.) ---------- */ .user-leads-list, .user-appts-list { display: flex; flex-direction: column; gap: 6px; } .lead-row, .appt-row { display: flex; gap: 12px; background: var(--surface-2); border: 1px solid transparent; border-radius: var(--radius-card); padding: 11px 13px; cursor: pointer; transition: background var(--transition), border-color var(--transition); } .lead-row:hover, .appt-row:hover { background: var(--surface-3); } .lead-row__main { flex: 1; min-width: 0; } .lead-row__heading, .appt-row__heading { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .lead-row__meta, .appt-row__meta { color: var(--text-secondary); font-size: 12.5px; margin-top: 3px; } .lead-row__notes, .appt-row__note { font-size: 13px; margin: 6px 0 0; color: var(--text); padding: 6px 8px; background: rgba(var(--tint-rgb), .04); border-radius: var(--radius-card); } .appt-row__note--feedback { background: rgba(var(--good-rgb),.09); } .appt-row__time { display: flex; flex-direction: column; min-width: 76px; } .appt-row__time strong { font-size: 14px; font-variant-numeric: tabular-nums; } .appt-row__time span { font-size: 12px; color: var(--text-secondary); } /* ---------- Pagination ---------- */ .pagination { display: flex; gap: 4px; justify-content: center; margin-top: 18px; flex-wrap: wrap; } .page-btn { min-width: 36px; min-height: 36px; padding: 6px 10px; border-radius: var(--radius-button); border: 1px solid transparent; background: transparent; color: var(--text-secondary); font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; } .page-btn:hover:not(:disabled) { background: rgba(var(--tint-rgb), .06); color: var(--text-primary); } .page-btn.active { background: var(--accent-soft); color: var(--accent-strong); } .page-btn:disabled { opacity: .4; cursor: not-allowed; } @media (max-width: 1024px), (pointer: coarse) { .page-btn { min-width: 44px; min-height: 44px; } } /* ---------- Tabellen ---------- */ .table-wrap { overflow-x: auto; border-radius: var(--radius-card); background: linear-gradient(to right, var(--surface), rgba(20,20,20,0)) left center / 24px 100% no-repeat local, linear-gradient(to left, var(--surface), rgba(20,20,20,0)) right center / 24px 100% no-repeat local, radial-gradient(farthest-side at 0% 50%, rgba(var(--tint-rgb), .16), rgba(var(--tint-rgb), 0)) left center / 14px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(var(--tint-rgb), .16), rgba(var(--tint-rgb), 0)) right center / 14px 100% no-repeat scroll; } .team-table { width: 100%; border-collapse: collapse; min-width: 640px; } /* Die 640px sind das Haus-Muster — sie ergeben nur IM Scroll-Wirt einen Sinn. Steht die Tabelle ohne ihn (zehn Ansichten bauen sie so), schob ihre Mindestbreite bis 09.08. die ganze Seite seitwärts; mit dem Riegel oben (`overflow-x: clip`) wäre sie stattdessen rechts abgeschnitten und der Rest unerreichbar. Ohne Wirt bricht sie darum um, statt auszubrechen — der Inhalt bleibt vollständig lesbar. Wo ein `.table-wrap` steht, ändert sich nichts. */ :not(.table-wrap) > .team-table { min-width: 0; } .team-table th, .team-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; } /* W6.1 Dossier-Tuerschild: Knopf haelt die 44px-Tapflaeche (Gate 1n2). */ .team-table .ghost-btn { min-height: 44px; } .team-table th { background: transparent; color: var(--text-tertiary); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line-strong); } .team-table tr:hover td { background: rgba(var(--tint-rgb), .025); } .team-table tr:last-child td { border-bottom: 0; } .team-table .team-role { background: var(--surface-inset); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: var(--radius-card); } .team-table tr.is-inactive td { opacity: .55; } .team-table tr.is-inactive strong { color: var(--text-secondary); font-weight: 600; } /* ---------- Modals ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(4, 8, 12, .62); backdrop-filter: blur(10px); z-index: 100; display: grid; place-items: start center; padding: 24px; overflow-y: auto; animation: backdrop-in var(--dur) var(--ease); } @keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } } /* Der kleine Bestätigungs-Dialog (components/app-dialog.js) hatte bis 09.08. KEINE eigene Regel und erbte darum die Geometrie der grossen, scrollenden Modale: `place-items: start center` — gebaut für ein Blatt, das den halben Bildschirm füllt. Eine Frage von drei Zeilen klebte damit oben am Rand, zwei Drittel darunter blieben leere Abdunklung (c3 B15, c5 B13). Sie gehört in die Mitte; am Handy an den Daumen, wo die Antwortknöpfe erreichbar sind. `--vv-unten` hält sie über einer offenen Tastatur (fragen()/formular() tragen Eingabefelder). */ .app-dialog { place-items: center; } @media (max-width: 720px) { .app-dialog { place-items: end center; padding-bottom: calc(24px + var(--vv-unten, 0px)); } } .modal { width: 100%; max-width: 900px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); animation: modal-in var(--dur-slow) var(--ease); } @keyframes modal-in { from { opacity: 0; transform: scale(.975) translateY(6px); } to { opacity: 1; transform: none; } } .modal--small { max-width: 560px; } .modal__header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); } .modal__header h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .modal__body { overflow-y: auto; padding: 20px; display: grid; gap: 16px; } .modal-section { background: rgba(var(--tint-rgb), .025); border: 0; border-radius: var(--radius-card); padding: 14px 16px; display: grid; gap: 10px; } .modal-section h3 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: 0; text-transform: none; } .modal-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; } .info-card { background: var(--surface-2); border: 0; border-radius: var(--radius-card); padding: 10px 12px; } .info-card strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); margin-bottom: 3px; font-weight: 600; } .info-card p { margin: 0; color: var(--text); font-size: 13.5px; } .review-negative { background: rgba(var(--bad-rgb),.07); } .review-negative strong, .review-negative p { color: var(--bad-strong); } /* Iter 27 Welle F: Cyan-Verlauf → neutrale erhabene Fläche + Cyan-Hairline oben (DESIGN.md §3); Kontakt-Zeile im text-link-Ton statt Deko-Grün. */ .contact-hero { background: var(--surface-2); border: 0; border-radius: var(--radius-card); padding: 14px 16px; margin-bottom: 12px; } .contact-hero__name { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; } .contact-hero__role { color: var(--text-secondary); font-size: 12.5px; margin-bottom: 8px; } .contact-hero__why { font-size: 13.5px; color: var(--text); line-height: 1.5; margin: 6px 0; padding: 9px 12px; background: rgba(var(--tint-rgb), .05); border-radius: var(--radius-card); } .contact-hero__method { font-size: 13px; color: var(--accent-strong); font-weight: 500; margin-bottom: 4px; } .contact-hero__strategy { font-size: 13px; color: var(--text-secondary); line-height: 1.5; border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; } .contact-hero__strategy strong { color: var(--text-primary); } .pain-list { display: grid; gap: 8px; } .pain-item { display: flex; gap: 10px; align-items: flex-start; background: rgba(var(--bad-rgb),.05); border: 0; border-radius: var(--radius-card); padding: 9px 12px; } .pain-item p { margin: 0; font-size: 13.5px; } .pain-item__dot { color: var(--low); font-weight: 800; } .pitch-box { background: var(--surface-2); border: 0; border-radius: var(--radius-card); padding: 13px 14px; box-shadow: inset 2.5px 0 0 var(--accent); } .pitch-box p { margin: 0; } /* Zurückgehaltene Zusagen. Dieselbe Machart wie .firm-card__notes — Balken in Warnfarbe, kein Kasten —, damit der Befund als Randnotiz zum Einstieg liest und nicht als zweites Panel. */ /* Herkunft des Gespraechseinstiegs — keine Erklaerflaeche, sondern die Grenze, die der Berater im Gespraech einhalten muss. Leise gesetzt: er soll sie einmal lesen und dann wissen, nicht bei jedem Blick lesen muessen. */ .pitch-herkunft { margin: 7px 0 0; font-size: 12px; line-height: 1.45; color: var(--text-3); } .pitch-befund { margin: 8px 0 0; padding: 9px 12px; background: rgba(var(--warn-rgb),.07); border-radius: var(--radius-card); box-shadow: inset 2.5px 0 0 var(--warn); } .pitch-befund__kopf { margin: 0 0 6px; font-size: 12.5px; color: var(--warn-strong); } .pitch-befund__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .pitch-befund__liste li { font-size: 12.5px; line-height: 1.45; } .pitch-befund__liste b { display: block; color: var(--warn-strong); font-weight: 600; } .pitch-befund__liste span { color: var(--text-2); } .competitors-list { display: grid; gap: 8px; } .competitor-card { background: var(--surface-2); border: 0; border-radius: var(--radius-card); padding: 11px 13px; } .competitor-card__header { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; } .competitor-card__number { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-card); background: rgba(var(--tint-rgb), .07); color: var(--text-secondary); font-size: 11.5px; font-weight: 700; flex-shrink: 0; font-variant-numeric: tabular-nums; } .competitor-card strong { color: var(--text-primary); } .competitor-card p { margin: 0; color: var(--text-secondary); line-height: 1.5; font-size: 13px; } .text-link { color: var(--accent-strong); } .text-link:hover { color: var(--accent-bright); text-decoration: underline; } .audit-score { margin: 0; font-size: 26px; line-height: 1; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .hr-section { padding: 14px; border: 0; border-radius: var(--radius-card); background: rgba(var(--tint-rgb), .03); } /* ---------- Toast (Iter 27 Welle F: Stack ≤3 + Icon nach Typ — toast.js) ---------- */ /* Ueber einer Cockpit-Flaeche sitzt unten der Fuss mit dem Total. Ein Toast auf 20px landete darin und wurde halb verdeckt — gesehen am 06.08. im Bild: «Rueckgaengig mit dem Knopf im Korb» ragte zur Haelfte hinter dem Fussband heraus. Eine Meldung, die man nicht lesen kann, ist keine Meldung. Der Fuss ist eine Fixleiste wie jede andere — er meldet seine Höhe an das Boden-System, statt dass fünf Regeln sie einzeln raten (09.08., c3 B16). `[data-cockpit]` trennt die Cockpit-Schale von der gleichnamigen Befehls-Palette (die Kollision steht bei style.css `.cp[data-cockpit]`). */ body:has(.cp[data-cockpit]) { --fuss-h: 64px; } /* EINE Bodenrechnung statt fünf sich überbietender `bottom`-Regeln (:801, :1118, :3584, :12992, :12993 vor dem Umbau). Am Rechner ergibt sie `20px + var(--sab)` — exakt der bisherige Grundwert. */ .toast-stack { position: fixed; right: 20px; z-index: 200; bottom: calc(20px + var(--boden-abstand) + var(--fuss-h) + var(--vv-unten, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; } .toast { display: flex; align-items: flex-start; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 11px 14px; border-radius: var(--radius-card); box-shadow: var(--shadow-md); font-size: 13.5px; pointer-events: auto; transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); animation: toast-in var(--dur-slow) var(--ease); } @keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } .toast__ico { display: inline-flex; flex: none; margin-top: 2px; line-height: 0; } .toast__ico svg { width: 15px; height: 15px; } /* «Mein Vergleich» im Partner-Portal (04.08., Anschluss partner_benchmark). */ .pp-vergleich { margin: 0; padding: 12px 16px; font-size: 14px; color: var(--text-primary); } .pp-vergleich__meta { display: block; margin-top: 4px; font-size: 12px; color: var(--text-tertiary); } /* Der Aktions-Knopf im Toast (04.08.): «Rückgängig» statt Rückfrage. */ .toast__aktion { flex: none; margin-left: 10px; padding: 4px 10px; min-height: 28px; border: 1px solid var(--border); border-radius: var(--radius-card); background: none; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; } .toast__aktion:hover { background: var(--surface-hover); } /* Der Schliess-Griff (Prüfblick W10 B-3): eine Meldung, die Bedienung verdecken kann, muss sich wegnehmen lassen — nicht nur ablaufen. */ .toast__zu { flex: none; display: grid; place-items: center; margin-left: 6px; width: 28px; height: 28px; border: 0; border-radius: var(--radius-card); background: none; color: var(--text-tertiary); cursor: pointer; } .toast__zu:hover { background: var(--surface-hover); color: var(--text-secondary); } .toast__zu svg { width: 14px; height: 14px; } @media (max-width: 1024px), (pointer: coarse) { .toast__aktion { min-height: 44px; padding: 8px 14px; } .toast__zu { width: 44px; height: 44px; } } .toast--error { box-shadow: inset 2.5px 0 0 var(--bad), var(--shadow-md); } .toast--error .toast__ico { color: var(--bad-strong); } .toast--info { box-shadow: inset 2.5px 0 0 var(--accent), var(--shadow-md); } .toast--info .toast__ico { color: var(--accent-strong); } .toast--success { box-shadow: inset 2.5px 0 0 var(--good), var(--shadow-md); } .toast--success .toast__ico { color: var(--good-strong); } /* ---------- Empty-State (Icon im Soft-Ring + Titel + Aktion) ---------- */ /* FLACH STATT KASTEN (Owner «Widget», 2026-08-13): der Leerzustand war ein gerundeter, eingelassener Kasten. Ein Satz, der sagt «hier ist nichts», braucht keine Flaeche unter sich — er steht jetzt auf dem Grund, wie im Konfigurator (`.kf-leer`). Waagerechtes Padding faellt weg (Ausrichtung an der Spaltenkante), senkrecht bleibt es. */ .empty-state { padding: 34px 0; text-align: center; color: var(--text-secondary); border: 0; border-radius: 0; background: transparent; } .empty-state__icon { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 12px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); box-shadow: 0 0 0 7px rgba(var(--accent-rgb), .05); } .empty-state__icon svg { width: 19px; height: 19px; } .empty-state h3 { margin: 0 0 6px; color: var(--text-primary); font-size: 15px; font-weight: 600; } .empty-state p { margin: 0; color: var(--text-secondary); font-size: 13.5px; line-height: 1.5; } .empty-state p + p { margin-top: 10px; } /* Die Wege unter dem Satz (03.09.2026, Owner-Farbwelt): zwei Knoepfe standen ohne Abstand aufeinander (Korb «Noch kein Gebiet», 1440 px). Eine Reihe mit Luft, die umbricht, wenn die Spalte schmal ist. */ .empty-state__tun { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; } .empty-state--inset { margin: 16px; } .empty-state--compact { padding: 16px; } .empty-state--compact .empty-state__icon { width: 36px; height: 36px; margin-bottom: 8px; } /* ---------- Die SPALTEN-Fassung: am Rechner der Satz, am Handy der Block --- Sie stand bis zum 22.08.2026 als `.kf-leer` in patch-konfigurator.css und war die einzige der vierzehn Eigenbauten, die den Kanon nicht ERSETZTE, sondern ihn je nach Breite anders anzog. Genau deshalb gehoert sie hierher: was der Kanon kann, steht beim Kanon — ein Blatt, das ihn in seiner Flaeche neu einkleidet, ist eine zweite Bauart (scripts/_muster_test.mjs, 13b). WAS SIE TUT, unveraendert uebernommen (Wortlaut der abgeloesten Fassung): In einer schmalen Seitenspalte (der Konfigurator-Korb ist 210 px breit und kurz) traegt ein Icon-Ring mit Titel und zwei Knoepfen ~45 px Ueberlauf — der Waechter «keine Seitenspalte laenger als ihre Hoehe» misst das. Dort bleibt der Leerzustand darum der blosse Satz, linksbuendig, ohne Polsterung; die Wege sind auf dieser Breite ohnehin schon offen, weil alle Zonen nebeneinander stehen. Am Handy IST diese Zone der ganze Schirm — dort gilt das volle Muster (Icon-Ring, Titel, Wege), sonst stuenden ~350 px schwarz (Owner-Befund 5, 08.08.). FLACH STATT KASTEN (Owner «Widget», 13.08.): kein Grund, kein Radius — gruppiert wird allein durch Abstand. Reihenfolge: NACH `--compact`, dessen `padding: 16px` sie ueberschreibt (gleiche Spezifitaet, spaeter gewinnt). Die zweite, zeichengleiche `--compact`-Kopie am Dateiende ist dafuer gefallen. */ .empty-state--spalte { text-align: left; padding: 0; background: transparent; border-radius: 0; } .empty-state--spalte .empty-state__icon, .empty-state--spalte .empty-state__tun, .empty-state--spalte h3 { display: none; } .empty-state--spalte p { margin: 6px 0 0; font-size: 11px; line-height: 1.45; color: var(--text-tertiary); } /* Eigener Block NACH der Basis (Memory project_css_cascade_mobile), und er greift auch auf dem Tablet und an jedem groben Zeigegeraet (Memory project_tablet_touch_breakpoint). Die 1080px sind die Breite, ab der die Zonen des Konfigurators untereinander stehen. */ @media (max-width: 1080px), (pointer: coarse) { .empty-state--spalte { text-align: center; padding: 22px 16px; margin-top: 4px; background: transparent; border-radius: 0; } .empty-state--spalte .empty-state__icon { display: grid; } .empty-state--spalte h3 { display: block; margin: 0 0 6px; font-size: 15px; } .empty-state--spalte p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); } .empty-state--spalte .empty-state__tun { display: grid; gap: 8px; margin-top: 14px; } .empty-state--spalte .empty-state__tun .primary-btn, .empty-state--spalte .empty-state__tun .ghost-btn { width: 100%; min-height: 44px; justify-content: center; } } /* ---------- Die ZEILE: ein ABSCHNITT ist leer, nicht die Flaeche ---------- Gemessen am 21.08.2026: neben dem Block oben gab es diese zweite Aussage VIERZEHNMAL unter eigenem Namen — `.vk-leer` `.ck-leer` `.gz-leer` `.ao-leer` `.gb-leer` `.sp-leer` `.ag-leer` `.kb-leer` `.kk-leer` und die namenlose Fassung `.gz .empty-state` in patch-zentrale.css. Sechs Schriftgroessen (12/12.5/13/13.5px), zwei Farben (secondary/tertiary), fuenf Abstaende — fuer EINEN Satz. Der Beweis, dass es dieselbe Sache ist: `views/manager-today.js` und `views/zentrale.js` trugen denselben Helfer zeichengleich, nur mit anderem Klassennamen. Warum nicht der Block: EINHEIT.md 4.11 («einzeilig, und nur wenn wirklich leer»). 34px Luft mit Icon in einem Panel, das drei gefuellte Abschnitte hat, ist der Grund, warum die vierzehn Eigenbauten entstanden sind. Warum zwei Klassen im Selektor (0,2,0): drei Blaetter tragen einen eigenen `.X .empty-state`-Selektor und stehen in der Kaskade NACH dem Grundstock — mit nur `.empty-state--zeile` (0,1,0) haette die Zeile dort verloren. Werte: DESIGN.md §4 «Empty-State» (Body 13 secondary), Geometrie aus der groessten der abgeloesten Fassungen (`.vk-leer`, 28 Vorkommen). */ .empty-state.empty-state--zeile { margin: 0; padding: 6px 0; text-align: left; color: var(--text-secondary); font-size: 13px; line-height: 1.5; } /* WARUM NICHT DURCHGEHEND `flex`, wie es alle vierzehn Fassungen hatten: in einem Flex-Behaelter ist jeder Textknoten ein eigenes Element. Der Schlusspunkt hinter einem Link wurde damit zum eigenen Kind — und `gap: 8px` schob ihn ab. Im Bildschirmfoto vom 21.08. steht darum «… mit der ersten angenommenen Offerte .» mit sichtbarer Luecke vor dem Punkt (views/sales-customer-detail.js, Reiter Buchungen). Ein Satz mit Textlink ist Fliesstext und bleibt Fliesstext; die Reihe braucht es nur, wo ein KNOPF danebensteht und mittig sitzen muss. */ .empty-state.empty-state--zeile:has(.primary-btn), .empty-state.empty-state--zeile:has(.ghost-btn) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .empty-state__weg { color: var(--accent-strong); font-weight: 600; text-decoration: none; } .empty-state__weg:hover { color: var(--accent-bright); } .empty-state__weg:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-card); } /* Am Finger 44 — der Block steht NACH der Basis, sonst waere er wirkungslos (Memory `project_css_cascade_mobile`), und er greift auch auf dem Tablet (Memory `project_tablet_touch_breakpoint`). Uebernommen aus patch-chat.css Zeile 365, wo `.ao-leer a` das als einzige der vierzehn Fassungen hielt. WARUM NICHT `min-height: 44px`, wie die abgeloesten Fassungen es machten: gemessen am 21.08. auf 390px blaeht das den Absatz um 24.5px auf (51 → 75.5), weil ein `inline-flex`-Kind mit 44px Hoehe die ganze Zeilenbox mitzieht — im Fliesstext reisst das den Satz auseinander. In einer eigenen Reihe (die alten Fassungen waren alle `flex`) fiel das nicht auf; als Fliesstext schon. Padding schafft die Tapflaeche, der negative Rand nimmt sie aus der Zeilenbox wieder heraus: die Flaeche unter dem Finger ist 45.5px, die Zeile bleibt 51px. Gemessen mit getBoundingClientRect, nicht geschaetzt. */ @media (max-width: 1024px), (pointer: coarse) { .empty-state__weg { display: inline-block; padding-block: 13px; margin-block: -13px; } } /* Ein Knopf statt eines Links als Weg (Kundenportal, «Werbung buchen»): auf dem Handy volle Breite statt eines Restknopfs am Zeilenende — die Regel stand bis heute als `.kk-leer .primary-btn` in patch-kundenzentrale.css. NUR wo wirklich ein Knopf steht (`:has`, wie `.table-wrap table:has(…)` weiter oben) — eine Zeile aus Satz + Textlink bleibt eine Zeile und bricht von selbst um. */ @media (max-width: 720px) { .empty-state.empty-state--zeile:has(.primary-btn) { align-items: stretch; flex-direction: column; } .empty-state.empty-state--zeile .primary-btn { width: 100%; } } .load-error { color: var(--bad-strong); font-size: 13.5px; padding: 10px 2px; margin: 0; } /* Buchhaltung · Abschluss: die eine positive Bilanz-Aussage (Welle 4.19). */ .lx-bilanzsumme { color: var(--text-secondary); font-size: 13.5px; padding: 10px 2px; margin: 0; } /* Buchhaltung · Abschluss «Belege dahinter» (Owner-Befund 20.08.2026: «was schulden wir Monat X an Mehrwertsteuer pro Rechnung»). Die Aufklapp- Geometrie ist die des P&L-Drilldowns — dieselbe Frage, dasselbe Bauteil, darum steht `.lx-belege__monat` oben NEBEN `.pnl-block` statt in einer zweiten Fassung. Neu ist hier nur, was es dort nicht gibt. */ .lx-belege__monat + .lx-belege__monat { margin-top: 8px; } .lx-belege__monat summary .panel-row__main { display: grid; gap: 2px; } .lx-belege__block + .lx-belege__block { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); } .lx-belege__block > .panel-row__meta { display: block; padding-bottom: 4px; } .lx-belegzeile { padding-top: 6px; padding-bottom: 6px; } /* Die Rundungsdifferenz ist ein HINWEIS, kein Befund: sie entsteht unter dem Saldosteuersatz zwangslaeufig, weil Monat und Periode je fuer sich runden. In Rot gelesen haette sie nach einem Fehler ausgesehen, den es nicht gibt. */ .lx-belege__diff { color: var(--warn-strong); } /* Buchhaltung · Kontenplan: Vorschlagsliste beim Erfassen (Welle 4.19). */ .lx-katg-pflege { padding: 10px 2px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; } .lx-katg-chips { display: flex; flex-wrap: wrap; gap: 6px; } .lx-katg-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 4px 6px 4px 10px; border-radius: var(--radius-badge); background: rgba(var(--accent-rgb), .10); color: var(--text-primary); } .lx-katg-chip button { border: 0; background: none; color: var(--text-secondary); cursor: pointer; font-size: 14px; line-height: 1; padding: 4px 6px; border-radius: var(--radius-badge); } .lx-katg-chip button:hover { color: var(--bad-strong); background: rgba(var(--bad-rgb), .12); } /* Aufgaben-Zeile: der Bezugs-Chip ist eine Tuer (Welle 4.15-Rest). 28.08.2026 — GEMESSEN, ZUM ERSTEN MAL: 183.1 x 22 px, auf ALLEN NEUN Geraetebreiten. Der Waechter verlangt 24 px am Zeigergeraet und 44 px unter dem Finger; dieser Chip lag ueberall darunter. Sechs Monate lang war die Tuer von «Heute» zu einer Firma damit am Handy kaum zu treffen — und niemand sah es, weil «Heute» in KEINER Messliste dieses Hauses stand (nachgetragen am selben Tag, scripts/lib/fundament-buehne.mjs · SCHIRME). Er waechst echt statt nur die Trefferflaeche zu strecken: der Waechter misst getBoundingClientRect, und ein Pseudo-Element aendert die nicht — eine gestreckte Huelle waere hier gruen und in der Hand trotzdem zu klein. EINE Regel, kein Basis-plus-@media-Paar: in diesen Blaettern darf jeder Selektor genau EINMAL stehen (_stil_einmalig_test.mjs, Grundlinie 1043 — der zweite Eintrag liess sie auf 1044 steigen und hat die Auslieferung angehalten). 44 px erfuellen beide Grenzen des Waechters zugleich, die 24 px am Zeigergeraet und die 44 unter dem Finger, und die Aufgabenzeile traegt neben dem Chip ohnehin den 44 px hohen Abhak-Knopf (.task-row__check) — die Zeilenhoehe aendert sich dadurch nicht. */ .task-row__bezug { display: inline-flex; align-items: center; gap: 4px; border: 0; padding: 4px 10px; margin: -2px 0; border-radius: var(--radius-card); min-height: 44px; background: rgba(var(--accent-rgb), .10); color: var(--accent-strong); font: inherit; font-size: inherit; cursor: pointer; } .task-row__bezug:hover { background: rgba(var(--accent-rgb), .18); } .task-row__bezug svg { width: 12px; height: 12px; } /* W2b 30.08.: Der Bezug OHNE offenen Weg (der Berater kommt nicht in die Kunden-Akte). Er bleibt die Auskunft, sieht aber nicht mehr aus wie eine Tuer — kein Akzent, kein Zeigefinger, kein Hover. Der Griffboden faellt mit: eine Textmarke braucht keine 44 px. */ .task-row__bezug--ohneweg { background: none; color: var(--muted); cursor: default; min-height: 0; padding: 0; margin: 0; } .task-row__bezug--ohneweg:hover { background: none; } /* Buchhaltung · Uebersicht: die drei Wege unter den Zahlen (Welle 4.19). */ .lx-wegzeile { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; } /* ---------- Login ---------- */ .no-topbar { background: var(--bg); } .login-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: radial-gradient(900px 520px at 50% -80px, rgba(var(--accent-rgb), .07), transparent 65%), var(--bg); } .login-card { max-width: 400px; width: 100%; padding: 36px 32px; background: var(--surface); box-shadow: var(--shadow-lg); } .login-logo { color: var(--text); margin-bottom: 22px; } .login-card .login-logo svg { width: 180px; } .login-card h1 { margin: 4px 0 20px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; } .login-card form { display: grid; gap: 14px; } .login-card .field input { padding: 11px 13px; background: var(--surface-inset); border: 1px solid var(--border); border-radius: var(--radius-button); color: var(--text); } .login-card .field input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); } .login-error { color: var(--bad-strong); margin: 6px 0 0; font-size: 13.5px; } .login-spinner { animation: none; } /* S2: «Passwort vergessen?» / «Zurück zur Anmeldung» — Textlink-Optik auf einem echten