.hero {
    overflow: hidden;
    padding: clamp(56px, 8vw, 104px) 0;
}

.hero--home {
    background: var(--color-soft);
}

.hero__grid {
    align-items: center;
    display: grid;
    gap: clamp(28px, 5vw, 56px);
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.76fr);
}

.hero h1 {
    font-size: clamp(2.85rem, 6.4vw, 5.75rem);
    hyphens: auto;
    line-height: 0.94;
    letter-spacing: 0;
    margin-top: 12px;
    max-width: 760px;
    overflow-wrap: break-word;
}

.hero__subtitle {
    color: var(--color-ink-2);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    margin-top: 22px;
    max-width: 710px;
}

.event-strip {
    border-block: 1px solid var(--color-line);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 28px;
    padding: 14px 0;
}

.event-strip span {
    font-weight: 700;
}

.hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero__media {
    background: var(--color-ink);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--color-white);
    min-height: 420px;
    padding: clamp(22px, 4vw, 34px);
}

.sensory-board {
    list-style: none;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sense-tile {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-sm);
    min-height: 96px;
    padding: 14px;
}

.sense-tile__mark {
    color: var(--color-lime);
    display: block;
    font-size: 0.8rem;
    font-weight: 900;
}

.sense-tile__name {
    display: block;
    font-size: clamp(0.98rem, 1.5vw, 1.1rem);
    font-weight: 900;
    margin-top: 18px;
    overflow-wrap: break-word;
}

/* Einstiegs-Loop (W1): 5:4-Video im Ink-Panel (components/media_loop.html, Stil in components.css).
   Die Kachel des gerade gezeigten Sinns wird per media-loop.js markiert. */
.hero-loop {
    /* bleeds to the panel edges: the video's own ink margin takes the place of the panel padding */
    --hero-pad: clamp(22px, 4vw, 34px);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin: calc(-1 * var(--hero-pad)) calc(-1 * var(--hero-pad)) 12px;
}

.hero-loop .media-loop__video {
    aspect-ratio: 5 / 4;
}

.hero-loop .media-loop__bar {
    padding: 0 var(--hero-pad);
}

.hero__media {
    container-type: inline-size;
}

/* in the hero panel the tiles stay compact (two columns even on phones, where .sensory-board is one column) */
.hero__media .sensory-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* two columns by default; three only when the panel is wide enough for «Interaktion», «Interazione» … */
@container (min-width: 400px) {
    .hero__media .sensory-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.hero__media .sense-tile {
    min-height: 72px;
    padding: 10px 12px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.hero__media .sense-tile__name {
    font-size: 0.95rem;
    margin-top: 8px;
}

.hero__media .sense-tile.is-active {
    background: rgba(229, 255, 75, 0.1);
    border-color: var(--color-lime);
}

@media (prefers-reduced-motion: reduce) {
    .hero__media .sense-tile {
        transition: none;
    }
}

.hero__media-note {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.92rem;
    margin-top: 18px;
}

/* Startseite: the H1 never breaks inside a word (E2E P2a, E16/W-04). It shrinks until its longest
   word fits the column: home.html sets --fit-em (Renderer::fitEm, width of the longest word in em),
   .hero__copy is the inline-size container, so 100cqi is the column width. Browsers without
   container units keep the size above. */
@supports (width: 1cqi) {
    .hero--home .hero__copy {
        container-type: inline-size;
    }

    .hero--home h1 {
        font-size: clamp(1.25rem, 100cqi / var(--fit-em, 0.01), clamp(2.85rem, 6.4vw, 5.75rem));
    }
}