/*************************************************************************************************** * App-Launcher-Kacheln fuer die Startseite (index.php) - "Kompass"-Layout + "Sticker, verfeinert" * * Icon-Set. Norbert Hohmann / 03.09.2026 * * * * Eigenstaendiges, index.php-exklusives Stylesheet (wie budget.css/todoliste.css) statt weiterer * * Ausdehnung von includes/theme.css - .app-kachel/.app-gruppe/.app-grid kamen bisher nur hier vor. * * * * Icon-SET-Architektur: nur die Piktogramme selbst (welches Symbol welche App zeigt) sind in PHP * * fest (includes/appRegistry.inc.php's 'icon'-Feld), alles Farbliche/Stilistische steckt * * ausschliesslich in den body[data-iconset="..."]-Bloecken unten. Ein rein farblich/stilistisch * * anderes zukuenftiges Set ist dadurch ein rein additiver zweiter Block hier, OHNE jede PHP- * * Aenderung. 'data-app' auf jeder Kachel ist eine reine Identitaets-ID (welche App), nie eine * * Farbe - die IDs->Farben-Zuordnung lebt komplett hier. * ***************************************************************************************************/ /* Derselbe Fallstrick wie an mehreren anderen Stellen dieses Projekts bereits real aufgetreten (Live-Spiele #vollbildBtn, dokumenteAnzeige.inc.php, einmal sogar ausgeliefert bei todoliste.css): [hidden] muss explizit gegen eine Layout-Klasse gleicher Spezifitaet gewinnen - .app-grid ist selbst display:grid, ohne diese Regel wuerden alle 5 Hub-Raster gleichzeitig sichtbar bleiben. */ [hidden] { display: none !important; } .favoriten-titel { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted-custom); margin-bottom: 0.6rem; padding-left: 0.15rem; } .favoriten-reihe { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1.4rem; } .fav-kachel { text-decoration: none; display: block; } .hub-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; } .hub-tab { font-family: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.45rem 1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-link); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .hub-tab:hover { border-color: var(--accent); } .hub-tab.aktiv { background: var(--accent); color: #fff; border-color: transparent; } .app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.65rem; } .app-kachel { display: flex; flex-direction: column; /* align-items:stretch (nicht center) ist Absicht, siehe CLAUDE.md-Trap: nur so bekommt das Label-Flex-Item eine an die Kachelbreite gebundene Breite, gegen die overflow-wrap:break-word ueberhaupt umbrechen kann - mit "center" blaeht sich ein langes Label (z.B. "Mensch ärgere dich nicht (live)") auf seine Max-Content-Breite auf und laeuft ueber die Nachbarkachel. Zentriert wird stattdessen ueber text-align. */ align-items: stretch; justify-content: center; gap: 0.5rem; min-width: 0; min-height: 100px; padding: 0.8rem 0.5rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; color: var(--text-link); text-decoration: none; text-align: center; font-size: 0.78rem; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; transition: border-color 0.15s ease, transform 0.1s ease; } .app-kachel:hover, .app-kachel:focus-visible { border-color: var(--accent); } .app-kachel:active { transform: scale(0.96); } .app-kachel__label { min-width: 0; overflow-wrap: break-word; hyphens: auto; } /* Badge-Grundgeometrie (setgueltig fuer jedes Icon-Set, nicht nur "Sticker, verfeinert") */ .app-kachel__badge, .fav-kachel__badge { width: 3.2rem; height: 3.2rem; border-radius: 15px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; flex-shrink: 0; } .fav-kachel__badge { width: 2.6rem; height: 2.6rem; border-radius: 12px; } .app-kachel__badge svg, .fav-kachel__badge svg { width: 70%; height: 70%; position: relative; z-index: 1; color: #fff; } /* ================================================================================================ * Icon-Set "Sticker, verfeinert" (Stand 03.09.2026, einziges bisher existierendes Set) * ================================================================================================ */ body[data-iconset="sticker_verfeinert"] .app-kachel__badge, body[data-iconset="sticker_verfeinert"] .fav-kachel__badge { background: linear-gradient(135deg, var(--c1, #6b7280), var(--c2, #8b93a3)); box-shadow: 0 10px 20px -8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.28); } body[data-iconset="sticker_verfeinert"] .app-kachel__badge::before, body[data-iconset="sticker_verfeinert"] .fav-kachel__badge::before { content: ''; position: absolute; top: -35%; left: -15%; width: 75%; height: 75%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.6), transparent 70%); } body[data-iconset="sticker_verfeinert"] .app-kachel:nth-child(odd) .app-kachel__badge, body[data-iconset="sticker_verfeinert"] .fav-kachel:nth-child(odd) .fav-kachel__badge { transform: rotate(-3deg); } body[data-iconset="sticker_verfeinert"] .app-kachel:nth-child(even) .app-kachel__badge, body[data-iconset="sticker_verfeinert"] .fav-kachel:nth-child(even) .fav-kachel__badge { transform: rotate(3deg); } /* Je-App feste Farb-Identitaet (gedaempft/entsaettigt, siehe CLAUDE.md) - dieselbe App traegt ueberall auf der Seite (Favoriten-Reihe wie Haupt-Raster) dieselbe Farbe. */ body[data-iconset="sticker_verfeinert"] [data-app="alben"] { --c1:#b3688b; --c2:#d28aac; } body[data-iconset="sticker_verfeinert"] [data-app="dokumente"] { --c1:#6080a6; --c2:#849fbd; } body[data-iconset="sticker_verfeinert"] [data-app="todo"] { --c1:#3e9265; --c2:#63b684; } body[data-iconset="sticker_verfeinert"] [data-app="termine"] { --c1:#c0784a; --c2:#d59d74; } body[data-iconset="sticker_verfeinert"] [data-app="notizen"] { --c1:#a28c41; --c2:#bbab78; } body[data-iconset="sticker_verfeinert"] [data-app="kichat"] { --c1:#7294c9; --c2:#87a7de; } body[data-iconset="sticker_verfeinert"] [data-app="chat_privat"] { --c1:#419ca2; --c2:#6eb4b8; } body[data-iconset="sticker_verfeinert"] [data-app="chat_oeffentlich"] { --c1:#4e9d65; --c2:#7bb68c; } body[data-iconset="sticker_verfeinert"] [data-app="schach"] { --c1:#8377c6; --c2:#ab9bde; } body[data-iconset="sticker_verfeinert"] [data-app="dame"] { --c1:#3596ab; --c2:#5bb3c1; } body[data-iconset="sticker_verfeinert"] [data-app="backgammon"] { --c1:#339483; --c2:#44afa0; } body[data-iconset="sticker_verfeinert"] [data-app="muehle"] { --c1:#c59245; --c2:#d4a963; } body[data-iconset="sticker_verfeinert"] [data-app="viergewinnt"] { --c1:#bf7d5f; --c2:#d9a189; } body[data-iconset="sticker_verfeinert"] [data-app="ludo"] { --c1:#9f6db5; --c2:#c7a8d6; } body[data-iconset="sticker_verfeinert"] [data-app="abalone"] { --c1:#bc668f; --c2:#db90b6; } body[data-iconset="sticker_verfeinert"] [data-app="mathe"] { --c1:#6b7eb8; --c2:#8d9ed0; } body[data-iconset="sticker_verfeinert"] [data-app="lesen"] { --c1:#a46542; --c2:#be9174; } body[data-iconset="sticker_verfeinert"] [data-app="deutschuebung"] { --c1:#6d8d4a; --c2:#91a876; } body[data-iconset="sticker_verfeinert"] [data-app="quiz"] { --c1:#ba738f; --c2:#d49ab0; } body[data-iconset="sticker_verfeinert"] [data-app="pdf_konverter"] { --c1:#637b94; --c2:#8c9fb2; } body[data-iconset="sticker_verfeinert"] [data-app="mehr"] { --c1:#7e838c; --c2:#a0a4ad; } body[data-iconset="sticker_verfeinert"] [data-app="dein_bereich"] { --c1:#7294c9; --c2:#87a7de; } body[data-iconset="sticker_verfeinert"] [data-app="budget"] { --c1:#bd9c3c; --c2:#d5be77; } body[data-iconset="sticker_verfeinert"] [data-app="rezeptsammlung"] { --c1:#ac6944; --c2:#c39478; } body[data-iconset="sticker_verfeinert"] [data-app="admin_bereich"] { --c1:#8d4b56; --c2:#ab7781; } /* ================================================================================================ * Icon-Set "Klassisch" (03.09.2026, US_USER_ICONSET) - die alten Foto-PNGs (/app-icons/*.png) und * rohen Emoji von vor dem Kompass-Umbau, admin-seitig pro Benutzer waehlbar (admin/modifyUser.php). * Keine Verlaufs-Badge/kein Glanzlicht/keine Dreh-Geometrie - genau die schlichte Optik, die vor * dem 03.09.2026-Umbau bestand. Piktogramm-Auswahl kommt aus appRegistry.inc.php's legacyImg/ * legacyEmoji-Feldern (appKachelBadgeHtml()), nicht aus dieser Datei - hier steht nur die Optik. * ================================================================================================ */ body[data-iconset="klassisch"] .app-kachel__badge, body[data-iconset="klassisch"] .fav-kachel__badge { background: none; box-shadow: none; border-radius: 12px; transform: none !important; } body[data-iconset="klassisch"] .app-kachel__badge::before, body[data-iconset="klassisch"] .fav-kachel__badge::before { content: none; } body[data-iconset="klassisch"] .app-kachel__badge img, body[data-iconset="klassisch"] .fav-kachel__badge img { width: 82%; height: 82%; object-fit: contain; } body[data-iconset="klassisch"] .app-kachel__badge .app-kachel__emoji { font-size: 1.9rem; line-height: 1; } body[data-iconset="klassisch"] .fav-kachel__badge .app-kachel__emoji { font-size: 1.5rem; line-height: 1; } /* ================================================================================================ * Wetter-Kachel (Startseite, nur eingeloggte Nicht-GAST-Benutzer, 03.09.2026) - eigenstaendiger * Block, NICHT ueber appKachelBadgeHtml()/[data-app] geroutet: reine Info-Anzeige, kein Link, * kein Eintrag in appRegistry.inc.php. Zeigt dieselben 7 SVG-Symbole unabhaengig vom gewaehlten * body[data-iconset] (sticker_verfeinert/klassisch), da es dafuer kein "altes" Foto-/Emoji- * Aequivalent gibt - deshalb ein fest verdrahteter Verlauf statt einer [data-app]-Farbvariable. * ================================================================================================ */ .wetter-kachel { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 1rem; margin-bottom: 1.4rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; } .wetter-kachel__badge { width: 2.8rem; height: 2.8rem; flex-shrink: 0; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4a7fb5, #6fa3d8); box-shadow: 0 8px 16px -8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.25); } .wetter-kachel__badge svg { width: 65%; height: 65%; color: #fff; } .wetter-kachel__info { min-width: 0; } .wetter-kachel__zeile1 { display: flex; align-items: baseline; gap: 0.5rem; font-weight: 700; } .wetter-kachel__ort { font-size: 0.85rem; color: var(--text-link); } .wetter-kachel__temp { font-size: 1.15rem; } .wetter-kachel__zeile2 { font-size: 0.75rem; color: var(--text-muted-custom); margin-top: 0.15rem; } .wetter-kachel__info--fehler { color: var(--text-muted-custom); font-size: 0.82rem; }