/* css/desktop-layout.css — Was auf dem Telefon richtig ist, ist es am Bildschirm nicht * * DER BEFUND (Stefan 2026-08-01: „teilweise habe ich riesen karten auf desktop") * * Die Oberflaeche ist fuer das Telefon entworfen. Dort heisst „drei Kacheln * nebeneinander" `flex: 1` oder `repeat(3, 1fr)` — bei 390 px Breite werden das * drei handliche Kacheln zu je 120 px. Dieselbe Regel bei 1440 px ergibt drei * Kacheln zu je 380 px, in denen eine einzige Zahl steht. Nichts daran ist * kaputt; die Regel hat nur nie erfahren, dass es breite Bildschirme gibt. * * DIE BEIDEN EINGRIFFE * * 1. **Die Spalte hat eine Obergrenze.** Fliesstext wird ab etwa 75 Zeichen * Zeilenlaenge unangenehm zu lesen — das Auge findet den Zeilenanfang nicht * mehr. Der Inhalt bekommt deshalb eine Hoechstbreite und steht mittig, * statt sich ueber die ganze Scheibe zu ziehen. * * 2. **Kachel-Raster fuellen auf, statt zu strecken.** Aus „genau drei Spalten" * wird „so viele Spalten, wie bei 200-280 px Kachelbreite hineinpassen". * Auf dem Telefon aendert sich dadurch nichts (dort passt genau eine Reihe), * am Bildschirm entstehen mehr, kleinere Kacheln statt weniger riesiger. * * WAS BEWUSST NICHT PASSIERT * Keine Aenderung an den Telefon-Regeln. Alles hier steht in einer * `@media (min-width: 1024px)`-Klammer. Was Stefan auf dem Telefon abgenommen * hat, bleibt Zeichen fuer Zeichen, wie es ist. * * NACHGEMESSEN, NICHT GESCHAETZT: `tools/ui-vorschau.cjs` meldet Kacheln, die * am Bildschirm breiter als 520 px sind und dabei fast nichts enthalten. Vor * dieser Datei waren es 14, danach 0. * * VERLINKUNGEN: css/app-chrome.css (Rahmen), css/keeva-ui.css (Tokens + * Telefon-Regeln), tools/ui-vorschau.cjs (Messung), docs/DEVLOG.md 2026-08-01. */ @media (min-width: 1024px) { /* ── 1. Obergrenze fuer die Inhaltsspalte ──────────────────────────── */ /* `#dash-content` ist die Buehne aller Module — eine Stelle genuegt. */ #dash-content { max-width: 1180px; margin-left: auto; margin-right: auto; padding-left: 28px; padding-right: 28px; box-sizing: border-box; } /* ── 2. Kachel-Raster fuellen auf ──────────────────────────────────── */ /* Die Telefon-Regeln stehen mit `!important` in ios-grouped.css; damit sie hier weichen, braucht es dasselbe Gewicht. Ungern, aber die Alternative waere, die Telefon-Regeln umzubauen — und die sind abgenommen. */ /* Raus 2026-08-29: `.nv-stat-grid` regelt seine Spalten selbst. Hier stand `repeat(auto-fill, minmax(200px,1fr)) !important` — mit `auto-fill` statt `auto-fit`, also mit LEEREN Spalten am Schreibtisch. Vier Kacheln standen damit nicht als Vierer da, sondern als Vierer plus Luecken. */ .k-home-stats-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; } .k-home-stat-box { flex: none; } /* Kachel-Raster der Startseite („Für mich", Schnellzugriffe) */ .k-home-quick-grid, .k-spaces-grid, .nv-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } /* Zwei-Spalten-Bloecke (Gestern / August) duerfen nicht zu Feldern werden. */ .k-home-duo, .nv-duo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } /* ── 3. Kacheln bleiben kompakt ────────────────────────────────────── */ /* Eine Kachel mit einer Zahl darin braucht keine 90 px Hoehe und kein 28-px-Polster — beides war fuer Fingerkuppen gedacht, nicht fuer Mauszeiger. */ .nv-stat-item { padding: 16px 12px !important; } .k-home-stat-box { padding: 18px 14px; } /* ── 4. Listen bleiben lesbar ──────────────────────────────────────── */ /* Termin- und Kundenzeilen mit 1100 px Breite reissen Uhrzeit und Preis so weit auseinander, dass man beim Lesen die Zeile verliert. */ .k-glass-card > .k-list, .nv-list--wide { max-width: 900px; } } /* ── Rahmen und Seitenleiste ───────────────────────────────────────────── Hier standen bis 2026-08-02 Regeln, die die app-weite Kopfzeile hinter der Seitenleiste beginnen liessen. Die Kopfzeile ist entfallen (siehe css/app-chrome.css); auf dem Bildschirm fuehrt allein die Seitenleiste, und die Pille ist ab 769 px ohnehin ausgeblendet. Damit ist hier nichts mehr auszurichten. */ /* ══════════════════════════════════════════════════════════════════════════ AM BILDSCHIRM SIND ES DIALOGE, KEINE KARTEN VOM UNTEREN RAND (2026-08-03) DER BEFUND Stefan: „generell desktopversion ist nicht gut. öffnet viel mit karten anstatt als seite" — nachgemessen bei 1440 x 900: das Fenster „Neue Mail" klebte mit 560 px Breite am unteren Rand, unten abgeschnitten, oben abgerundet, unten eckig. Auf dem Telefon ist genau das richtig: die Karte kommt von unten, wo der Daumen ist, und der Griff sagt „hier kannst du wegwischen". Mit einer Maus stimmt beides nicht — es gibt keinen Daumen und keine Wischgeste, und der untere Rand ist die am weitesten entfernte Stelle des Bildschirms. WAS SICH AENDERT Dieselben Fenster erscheinen mittig, allseitig abgerundet, mit Abstand zum Rand. Der Griff verschwindet — er verspricht eine Geste, die es hier nicht gibt. Der Inhalt bleibt Zeichen fuer Zeichen derselbe; es ist eine reine Frage der Lage. WARUM ALLE VIER AUF EINMAL Es gibt vier gewachsene Wege, eine Karte von unten zu zeigen: `.nv-sheet`, `.k-sheet`, `.bottom-sheet` und das eigene Fenster des Mail-Moduls. Das ist Stefans zweiter Punkt („wir haben viele verschiedene ansichten und styles … finde ich nicht gut"). Sie hier auf EINE Erscheinung zu bringen kostet ein paar Zeilen; sie im Programmcode zusammenzulegen waere ein eigener Umbau mit Regressionsrisiko in jedem Modul. Erst die Erscheinung, dann irgendwann der Unterbau. MITTIG UEBER DEM INHALT, NICHT UEBER DEM FENSTER Die Seitenleiste ist 260 px breit (plus 12 px Einzug = 284 px, eingeklappt 96 px). Ein Dialog, der auf die Fenstermitte zentriert ist, sitzt daneben sichtbar links der Inhaltsmitte. Deshalb dieselbe Verschiebung, die nv-consistency.css schon fuer `.k-bsheet` verwendet: die halbe Seitenleisten-Breite. MOBIL AENDERT SICH NICHTS — alles steht in der 1024-px-Klammer. WARUM DIE 769-PX-REGEL IN style.css STEHEN BLEIBT Dort bekommt `.bottom-sheet` ab 769 px schon eine schwebende Form (schmaler, 20 px vom Rand, Schatten). Das ist KEIN Duplikat, sondern das Zwischenband: zwischen 769 und 1023 px — Tablet in der Hand — bleibt die Karte unten, weil dort der Daumen wirklich unten ist. Erst ab 1024 px, wo mit Maus gearbeitet wird, wird daraus ein mittiger Dialog. Wer eine der beiden Stellen aendert, soll die andere kennen. VERLINKUNGEN: css/style.css (.nv-sheet, .bottom-sheet, .nv-overlay-page), css/keeva-ui.css (.k-sheet), css/nv-consistency.css (.k-bsheet, gleiches Muster), js/kommunikation.js (_kSheet), docs/DEVLOG.md 2026-08-03. ══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { /* ── Die drei Klassen-Wege ─────────────────────────────────────────── */ /* ⚠ `.k-sheet` ist hier RAUS 2026-08-29 (P8). Seine Bildschirmstufe steht jetzt AM Bauteil im Katalog (system.css §Blatt) — Kanon §5a: eine Bildschirmstufe wird am Bauteil deklariert, nie an der Aufrufstelle. `.nv-sheet` und `.bottom-sheet` sind (noch) keine Katalog-Bauteile und bleiben deshalb hier. */ /* `.nv-sheet` ist hier RAUS 2026-08-30 (E1) — wie `.k-sheet` 2026-08-29. Seine Bildschirmstufe steht am Bauteil im Katalog (system.css §33). Diese Datei laedt NACH system.css; waere die Zeile geblieben, haette sie die Katalogregel still ueberstimmt. */ .bottom-sheet { position: fixed; top: 50%; bottom: auto; left: 50%; right: auto; width: min(680px, 76vw); max-width: none; max-height: 84vh; margin-inline: 0; border-radius: 22px; padding-bottom: 12px; box-shadow: 0 24px 80px rgba(0, 0, 0, .22); /* Leicht kleiner und ein Stueck hoeher starten: das liest sich als „kommt nach vorn", nicht als „faehrt von unten herein". */ transform: translate(-50%, -47%) scale(.97); opacity: 0; transition: transform .26s var(--k-ease, cubic-bezier(.4, 0, .2, 1)), opacity .26s var(--k-ease, cubic-bezier(.4, 0, .2, 1)); } .bottom-sheet-overlay.active .bottom-sheet { transform: translate(-50%, -50%) scale(1); opacity: 1; } .bottom-sheet-overlay.closing .bottom-sheet { transform: translate(-50%, -47%) scale(.97); opacity: 0; } /* Der Griff verspricht eine Wischgeste, die es mit der Maus nicht gibt. */ /* `.nv-sheet-handle` / `.k-sheet-handle`: am Bauteil, Katalog §33. */ /* Die Rundung von `.bottom-sheet` steht an vier Stellen — zweimal in style.css (hell/dunkel), einmal in ios-grouped.css, und einmal in keeva-ui.css mit `!important` in der Ebene `overrides`. Die letzte gewinnt gegen alles hier: bei WICHTIGEN Angaben ist die Ebenen-Reihenfolge umgekehrt, eine geschichtete `!important`-Angabe schlaegt eine ungeschichtete. Ein Gegen-`!important` an dieser Stelle blieb wirkungslos (nachgemessen: 25 px). Loesung an der Quelle: keeva-ui.css liest die Rundung jetzt aus `--k-sheet-radius`. Eine Variable wird erst beim Benutzen aufgeloest und steht damit ausserhalb des Ebenen-Streits. Hier wird sie gesetzt — eine Stelle, ein Wert. */ body { --k-sheet-radius: 22px; } .bottom-sheet { border-radius: 22px; } /* Verdunkelung liegt ueber ALLEM, auch ueber der Seitenleiste — sonst sieht der Dialog aus wie ein Kasten neben dem Menue statt davor. */ body.has-sidebar .nv-sheet-overlay { left: 0; } /* Mittig ueber dem Inhalt (halbe Seitenleisten-Breite als Versatz). */ body.has-sidebar .bottom-sheet { left: calc(50% + 48px); right: auto; width: min(680px, 76vw); } body.has-sidebar.sidebar-expanded .bottom-sheet { left: calc(50% + 142px); } /* ── Das eigene Fenster des Mail-Moduls ────────────────────────────── */ /* Es traegt seine Lage inline (`align-items:flex-end`), damit das Modul ohne fremde CSS-Datei lauffaehig bleibt. Inline schlaegt jede Regel — hier ist `!important` deshalb kein Notnagel, sondern der einzige Weg. */ #komm-sheet { align-items: center !important; padding-left: 0; } body.has-sidebar #komm-sheet { padding-left: 96px; } body.has-sidebar.sidebar-expanded #komm-sheet { padding-left: 284px; } #komm-sheet > div { border-radius: 22px !important; max-height: 84vh !important; max-width: 640px !important; box-shadow: 0 24px 80px rgba(0, 0, 0, .22); } /* ── Ganzseitige Ansichten lassen das Menue stehen ─────────────────── */ /* Kundenprofil und Termin-Ansicht legten sich bisher ueber die ganze Scheibe, Seitenleiste inbegriffen. Am Telefon ist das richtig (es gibt nichts daneben), am Bildschirm verliert man die Navigation und kommt nur ueber „Zurueck" wieder heraus. Sie beginnen jetzt rechts der Leiste — das ist der Unterschied zwischen „Seite" und „Deckel". */ /* !important: mehrere Panels setzen `inset:0`/`left:0` INLINE (z.B. einstellungen-admin, oeffnungszeiten-admin) — Inline schlaegt jede normale Regel, und die Panels lagen trotz korrekter Klasse wieder ueber der Seitenleiste (Nacht-Sweep 2026-08-22). */ body.has-sidebar .nv-overlay-page, body.has-sidebar .nv-panel, body.has-sidebar #reglement-sig-overlay, body.has-sidebar .kunden-profil-overlay, body.has-sidebar .kunden-form-overlay, body.has-sidebar .termin-erstellen-overlay { left: 96px !important; } body.has-sidebar.sidebar-expanded .nv-overlay-page, body.has-sidebar.sidebar-expanded .nv-panel, body.has-sidebar.sidebar-expanded #reglement-sig-overlay, body.has-sidebar.sidebar-expanded .kunden-profil-overlay, body.has-sidebar.sidebar-expanded .kunden-form-overlay, body.has-sidebar.sidebar-expanded .termin-erstellen-overlay { left: 284px !important; } /* WARUM AUCH .nv-panel (2026-08-22, Stefan «im Reglement … nicht mehr verlassbar auf anderes Modul»): Vollbild-Panels (Reglement, MediaHub, Chat …) lagen mit inset:0 UEBER der Seitenleiste — man kam nur ueber den Zurueck-Knopf des Panels heraus, nie ueber das Menue. Jetzt beginnen sie rechts der Leiste wie die Overlay-Pages: Menue bleibt klickbar, und das Panel folgt dem Auf-/Zuklappen der Leiste (wie der Kalender). */ }