/* Alltag: Startseite mit Links zu allen Apps. Look wie Trio und CleanUp (dunkel, Kacheln). Wird von Hand gepflegt. */
/* Schriften liegen selbst auf dem Server (keine Anfrage an Google), Lizenz: SIL Open Font License */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 600 800; font-display: swap }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 400 700; font-display: swap }
:root {
  color-scheme: dark;
  --bg: #141d21;
  --surface: #1f2b31;
  --fg: #eef3f1;
  --muted: #95a6ab;
  --accent: #ffcf5c;
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --body: "Figtree", -apple-system, "Segoe UI", system-ui, sans-serif;
  --r: 22px;
}
*, *::before, *::after { box-sizing: border-box }
html { background: var(--bg) }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px }
.muted { color: var(--muted) }

.wrap { max-width: 560px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom)); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; gap: 28px }
.top { display: flex; flex-direction: column; gap: 6px }
.brand { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -.04em; margin-bottom: 18px }
.brand span { color: var(--accent); margin-left: 2px }
.eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted) }
h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 8vw, 40px); letter-spacing: -.03em; line-height: 1.1; text-wrap: balance }

/* Farbe je App: --cat Kachelton, --ink helle Variante */
.trio { --cat: #7a6cc4; --ink: #b9a8ff }
.cleanup { --cat: #4c6a88; --ink: #98b7d6 }
.dorf { --cat: #547e3f; --ink: #a9d38f }
.mahlzeit { --cat: #b0603c; --ink: #ffb86b }

.apps { display: flex; flex-direction: column; gap: 14px }
.app { display: flex; align-items: center; gap: 16px; padding: 16px 18px 16px 16px; border-radius: var(--r); text-decoration: none; color: var(--fg);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--cat) 38%, transparent), transparent 70%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--cat) 40%, transparent);
  transition: transform .15s ease, border-color .15s ease }
.app:hover { border-color: var(--ink) }
.app:active { transform: scale(.98) }
.app img { width: 64px; height: 64px; border-radius: 16px; flex: none; box-shadow: 0 6px 18px #0006; outline: 1px solid #ffffff1f; outline-offset: -1px }
.text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 }
.name { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; line-height: 1.15 }
.desc { color: var(--muted); font-size: 14px; line-height: 1.35 }
.go { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--cat) 55%, transparent); color: #fff; font-weight: 700; font-size: 18px }

.foot { margin-top: auto; font-size: 13px; text-align: center }

@media (prefers-reduced-motion: reduce) { .app { transition: none } .app:active { transform: none } }