/* Werte aus dem Design-Handoff (docs/handoff/README.md), pixelgenau übernommen. */
html { background: #ffffff; }
html[data-dark="1"] { background: #0f0f10; }
body { margin: 0; font-family: 'Geist', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
button { font-family: inherit; }
.page { min-height: 100vh; background: var(--bg); color: var(--fg); transition: background .2s, color .2s; }
.wrap { margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 56px; }

/* Icons-Ansicht */
.v-h { --bg: #ffffff; --fg: #151516; --muted: #8a8a87; }
html[data-dark="1"] .v-h { --bg: #0f0f10; --fg: #f1f1f0; --muted: #8b8b88; }
.v-h .wrap { max-width: 1080px; padding: 72px 24px 120px; }
.v-h header { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.v-h .greet { font-size: 15px; color: var(--muted); }
.v-h h1 { margin: 0; font-size: clamp(34px, 6vw, 52px); font-weight: 600; letter-spacing: -0.035em; }
.v-h .sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 24px; }
.v-h section { display: flex; flex-direction: column; gap: 28px; padding: 28px 24px 32px; border-radius: 28px; }
.v-h .sec-head { display: flex; justify-content: space-between; align-items: center; }
.v-h h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.v-h .count { font-size: 13px; color: var(--muted); }
.v-h .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 28px 8px; justify-items: center; }
.v-h .app { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100px; text-align: center; }
.v-h .tile {
  width: 72px; height: 72px; border-radius: 20px; color: #ffffff; display: flex; align-items: center; justify-content: center;
  font-size: 32px; font-weight: 600; letter-spacing: -0.04em; transition: transform .15s;
}
.v-h .app:hover .tile { transform: scale(1.07); }
.v-h .name { font-size: 13px; font-weight: 500; line-height: 1.25; }
.v-h .desc { font-size: 11px; line-height: 1.3; color: var(--muted); text-wrap: pretty; margin-top: -4px; }
.v-h .dark-btn { align-self: center; background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; }

/* Erweiterung: echte Logos, Symbole und Bereiche (nicht im Handoff, im selben Stil ergänzt) */
.tile.has-logo { overflow: hidden; background: transparent; }
.tile .logo { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .logo.pad { object-fit: contain; background: #ffffff; box-sizing: border-box; }
.group-label { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.v-h section { gap: 24px; }
.v-h .group { display: flex; flex-direction: column; gap: 16px; }
.v-h .group + .group { padding-top: 20px; border-top: 1px solid color-mix(in oklab, var(--fg) 8%, transparent); }
.v-h .tile .symbol { width: 34px; height: 34px; stroke-width: 1.9; }
.v-h .tile .logo.pad { padding: 12px; }

/* Drei Personen: der eigene Abschnitt (bzw. Marvin ohne „Ich“) über die volle Breite, die anderen nebeneinander */
.v-h .sections > section:first-child { grid-column: 1 / -1; }