/* =========================================================================== Aufbau: KACHELBRETT Startseite als Raster grosser anklickbarer Felder statt eines Menüs. Wofür: Sammlungen von Werkzeugen und Rechnern, Startseiten für Mitarbeiter, alles was mit Handschuhen oder unterwegs bedient wird. seite_kopf() setzt am automatisch die Klasse a-kachelbrett. Nach basis.css einbinden. HTML-Gerüst: references/aufbauten.md ========================================================================= */ :root { --luft: 18px; } .brett__kopf { display: flex; justify-content: space-between; align-items: center; gap: 14px; background: var(--flaeche); padding: 16px 26px; border-bottom: 1px solid var(--rand); } .brett__kopf b { font-size: 1.05rem; font-family: var(--schrift-titel); } .brett__nutzer { display: flex; gap: 8px; align-items: center; color: var(--schwach); font-size: .87rem; } .brett__nutzer .kreis { width: 34px; height: 34px; border-radius: 50%; flex: none; background: var(--akzent); color: var(--akzent-text); display: grid; place-items: center; font-size: .78rem; font-weight: 700; } .brett__gruss { padding: 24px 26px 2px; } .brett__gruss h1 { margin: 0 0 3px; font-size: 1.6rem; letter-spacing: -.02em; } .brett__gruss p { margin: 0; color: var(--schwach); } .brett { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px 26px 30px; } .fliese { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 128px; padding: 18px; background: var(--flaeche); color: var(--text); text-decoration: none; border: 1px solid var(--rand); border-radius: var(--radius-gross); box-shadow: var(--schatten); cursor: pointer; } .fliese:hover { border-color: var(--akzent); } .fliese:active { filter: brightness(.98); } .fliese__sym { width: 42px; height: 42px; border-radius: var(--radius); flex: none; display: grid; place-items: center; background: var(--flaeche2); color: var(--akzent); border: 1px solid var(--rand-fein); } .fliese__sym svg { width: 21px; height: 21px; } .fliese b { display: block; font-size: 1rem; } .fliese span { font-size: .85rem; color: var(--schwach); } /* Hervorgehobene Kachel für die wichtigste Aufgabe */ .fliese--gross { grid-column: span 2; background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); } .fliese--gross span { color: var(--akzent-text); opacity: .82; } .fliese--gross .fliese__sym { background: rgba(255,255,255,.18); border-color: transparent; color: var(--akzent-text); } /* feste-farbe-ok: durchscheinende Aufhellung */ .fliese--gross:hover { border-color: var(--akzent); filter: brightness(1.06); } @media (max-width: 860px) { .brett { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .brett__kopf, .brett__gruss { padding-left: 16px; padding-right: 16px; } .brett { padding: 14px 16px 70px; gap: 11px; } .fliese { min-height: 108px; padding: 15px; } }