/* ========================================================================== Kachel-Startseite (/startseite) ========================================================================== Zusaetzlicher Einstieg neben der rollenabhaengigen Landung nach dem Login. Quadratische Auswahlfelder mit Symbol und Beschriftung, gegliedert nach den sechs Menuegruppen. ACHTUNG: Alle Masse in PIXELN, nicht in rem. screen.css:8 setzt die Wurzel-Schriftgroesse auf 9pt = 12px - eine rem-Angabe waere hier also ein Viertel kleiner als erwartet. */ /* Der Innenabstand kommt inzwischen seitenuebergreifend von .cs-inhalt in shell.css - hier bleibt nur die Lesebreite. Vorher setzte diese Seite ihren Abstand selbst, weil der Befund noch nicht global geloest war. */ .cs-neu .cs-start { max-width: 1200px; } /* ---- Willkommenstext ---------------------------------------------------- Steht ueber dem Raster. Fuer Guides mit Tagesbezug ("du hast heute zwei Einsaetze"), fuer die Verwaltung neutral - entschieden im Controller. */ .cs-neu .cs-willkommen { margin-bottom: var(--cs-abstand-5); padding: var(--cs-abstand-3) var(--cs-abstand-4); background: var(--cs-flaeche); border: 1px solid var(--cs-linie); border-left: 3px solid var(--cs-gruen-hell); border-radius: var(--cs-radius); } .cs-neu .cs-willkommen__gruss { margin: 0; font-size: var(--cs-schrift-gross); line-height: 1.35; } .cs-neu .cs-willkommen__gruss strong { color: var(--cs-gruen-dunkel); font-weight: 700; } .cs-neu .cs-willkommen__zeile { margin: var(--cs-abstand-1) 0 0; font-size: var(--cs-schrift-klein); color: var(--cs-text-leise); } /* ---- Gruppen ------------------------------------------------------------ */ .cs-neu .cs-kacheln { /* Der Umschaltpunkt richtet sich nach dem Platz, den das RASTER hat - nicht nach der Fensterbreite, genau wie bei .cs-liste. In einem schmalen Panel bleibt es dadurch auch am Schreibtisch zweispaltig. Eigener Containername, weil .cs-inhalt bereits den Container "formular" traegt (formular.css) - Container Queries loesen gegen den naechsten Vorfahren mit PASSENDEM Namen auf. */ container-type: inline-size; container-name: kacheln; margin-bottom: var(--cs-abstand-5); } .cs-neu .cs-kacheln__titel { margin: 0 0 var(--cs-abstand-2); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-text-leise); font-family: var(--cs-schrift-ui); } /* ---- Raster ------------------------------------------------------------- Der Umschaltpunkt richtet sich nach dem Platz, den das RASTER hat, nicht nach der Fensterbreite - beides als Container Query: 1. ab 480px fuellt sich das Raster selbst UND die Kachel wird quadratisch. Diese Stufe ist noetig, weil eine quadratische Kachel mit ihrer Spalte MITWAECHST: bei 768px Fenster und festen Spalten wurde sie 368 x 368px gross, ein Viertel Bildschirm fuer ein Symbol und ein Wort. 2. ab 880px derselbe Punkt wie in liste.css - dort wird es luftiger. Nachgemessen (Kantenlaenge): 320 -> 3 x 93px, 390 -> 3 x 117px, 768 -> 4 x 180px, 1440 -> 7 x 155px. */ /* DREI Spalten auf dem Handy, nicht zwei. Mit zwei quadratischen Spalten ergaben 25 Kacheln rund 13 Reihen - die Seite war ueber 2300px lang und man scrollte an der Haelfte der Bereiche vorbei. Drei Spalten halbieren das. Bei 390px sind das rund 114px je Kachel, also weit ueber dem Klickziel. */ .cs-neu .cs-kacheln__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cs-abstand-2); } @container kacheln (min-width: 480px) { .cs-neu .cs-kacheln__raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } /* Erst ab hier ist die Kachel breit genug, dass ein Quadrat gut aussieht. Auf dem Handy waere es verschenkte Hoehe - siehe unten. */ .cs-neu .cs-kachel { aspect-ratio: 1 / 1; } } @container kacheln (min-width: 880px) { .cs-neu .cs-kacheln__raster { gap: var(--cs-abstand-3); } } /* ---- Kachel ------------------------------------------------------------- Auf dem Handy KEIN Quadrat: bei drei Spalten waere eine quadratische Kachel nur so hoch wie breit (~114px) und die Beschriftung muesste in drei Zeilen umbrechen, waehrend darunter Platz verschenkt wird. Stattdessen bestimmt der Inhalt die Hoehe, mit 96px als Untergrenze. Grid gleicht die Hoehen innerhalb einer Reihe ohnehin aus, das Raster bleibt also ruhig. Quadratisch wird sie erst ab 480px (Block darueber). Die Mindestmasse sind die Untergrenze des Klickziels, nicht die Zielgroesse. */ .cs-neu .cs-kachel { min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--cs-abstand-2); min-width: var(--cs-ziel); padding: var(--cs-abstand-2); background: var(--cs-flaeche); border: 1px solid var(--cs-linie); border-radius: var(--cs-radius); color: var(--cs-text); text-decoration: none; text-align: center; transition: border-color .15s ease, box-shadow .15s ease; } .cs-neu .cs-kachel:hover, .cs-neu .cs-kachel:focus-visible { border-color: var(--cs-gruen-hell); box-shadow: 0 2px 8px rgba(0,0,0,.08); } .cs-neu .cs-kachel:focus-visible { outline: 2px solid var(--cs-gruen-mittel); outline-offset: 2px; } /* Symbolgroesse gestaffelt: Im Dreierraster ist die Kachel bei 390px nur rund 117px breit - ein 30px-Symbol nimmt darin zu viel Raum und laesst der Beschriftung zu wenig. Darum 22px auf dem Handy, 28px erst dort, wo die Kachel quadratisch und breiter wird (ab 480px, siehe oben). (Die Regel in base.css, die aus jedem mit Symbolkind eine 44px-Schaltflaeche macht, schliesst .cs-kachel inzwischen aus - sonst gewaenne sie mit (0,2,2) gegen (0,2,0) und die Kachel blieb 74px hoch.) */ .cs-neu .cs-kachel__symbol { font-size: 22px; line-height: 1; color: var(--cs-gruen-mittel); } @container kacheln (min-width: 480px) { .cs-neu .cs-kachel__symbol { font-size: 28px; } } .cs-neu .cs-kachel__text { font-size: var(--cs-schrift-normal); line-height: 1.25; /* Lange Beschriftungen wie "Tour-Beschreibungen" muessen brechen duerfen, sonst waechst die Kachel ueber ihre Spalte hinaus. */ overflow-wrap: anywhere; } @media (prefers-reduced-motion: reduce) { .cs-neu .cs-kachel { transition: none; } }