/* ---------- Hero der Anleitungs-Ansicht (#ig-anleitung) ----------
   Dasselbe Tempelbild wie Szene 1; Klick startet die Buehne. */
#ig-article-hero {
    position: relative;
    height: clamp(240px, 42vh, 430px);
    margin: 0 0 1.4rem;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    background-image: url('/images/iging/scene-temple-outside.webp');
    background-size: cover;
    background-position: 62% 50%;
}
#ig-article-hero .ig-ah-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 100% at 50% 45%, transparent 58%, rgba(3, 8, 7, 0.55) 100%);
}
#ig-article-hero .ig-ah-ui {
    position: absolute;
    top: 9%;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
    padding: 0 1rem;
}
#ig-article-hero .ig-ah-title {
    margin: 0;
    font-size: clamp(1.5rem, 4.5vw, 2.4rem);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #9fd8c6;
    text-shadow: 0 2px 14px rgba(8, 18, 16, 0.95), 0 0 30px rgba(8, 18, 16, 0.9);
}
#ig-article-hero .ig-ah-sub {
    margin: 0.4rem 0 0;
    font-style: italic;
    font-size: clamp(0.85rem, 2.2vw, 1.05rem);
    color: #d2e2db;
    text-shadow: 0 2px 10px rgba(8, 18, 16, 0.95), 0 0 20px rgba(8, 18, 16, 0.8);
}
#ig-article-hero .ig-ah-foot {
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
}
#ig-article-hero .ig-ah-hint {
    font-size: clamp(0.8rem, 2vw, 0.95rem);
    letter-spacing: 0.08em;
    color: #e6c98d;
    text-shadow: 0 2px 10px rgba(8, 18, 16, 0.95);
    animation: hint-pulse 2.4s ease-in-out infinite;
}
#ig-article-hero:focus-visible {
    outline: 2px solid #9fd8c6;
    outline-offset: 3px;
}