/* =============================================
   Base
   ============================================ */

.header-image {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
@supports (height: 100svh) {
    .header-image { height: 100svh; }
}

.header-image picture,
.header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    opacity: 0;
    /* zwei Animationen gleichzeitig */
    animation: fadeInFast 2s cubic-bezier(0.4, 0, 0.2, 1) forwards,
               zoomSlow 24s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Schnelles Fade-In */
@keyframes fadeInFast {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* Langsames Heranzoomen */
@keyframes zoomSlow {
    0%   { transform: scale(1.05); }
    100% { transform: scale(1.15); }
}

.text-element {
    position: absolute;
    max-width: 1600px;
    width: 100%;
    padding: 0 2rem;
    text-align: left;
    color: #fff;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Basis Textanimation */
@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Cinematic Headline-Animation (Fallback ohne Stagger) */
@keyframes fadeUpHeadline {
    0%   { opacity: 0; transform: translateY(30px); letter-spacing: 0.2em; }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0); letter-spacing: normal; }
}

.text-element h3 {
    font-size: clamp(1rem, 1.2vw + 0.8rem, 1.6rem);
    line-height: 1.25;
    margin: 0;
    font-weight: 300;
    text-transform: none;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 1s;
}

.text-element h1 {
    font-size: clamp(2rem, 3.5vw + 0.5rem, 3.5rem);
    line-height: 1.1;
    margin: 0.2em 0;
    font-weight: bold;
    text-transform: none;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUpHeadline 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 1.5s;
}

/* =============================
   STAGGER: Zeichen-für-Zeichen
   ============================= */
.text-element h1.is-staggered {
    animation: none;
    opacity: 1;
    transform: none;
    letter-spacing: normal;
    --stagger-base: 1.5s;
    --stagger-step: 60ms;
}
.text-element h1.is-staggered .char {
    display: inline-block;
    will-change: transform, opacity;
    opacity: 0;
    transform: translateY(30px);
    animation: charIn 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: calc(var(--stagger-base) + var(--i) * var(--stagger-step));
}
@keyframes charIn {
    0%   { opacity: 0; transform: translateY(30px); letter-spacing: 0.06em; }
    70%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0); letter-spacing: normal; }
}
.text-element h1.is-staggered .char.space { width: 0.25ch; }

/* =============================
   Fallback für Reduced Motion
   ============================= */
@media (prefers-reduced-motion: reduce) {
    .header-image picture,
    .header-image img {
        animation: none !important;
        transform: scale(1.1);
        opacity: 1;
    }
    .text-element h3,
    .text-element h1,
    .text-element h1 .char {
        animation: none !important;
        transform: translateY(0) !important;
        opacity: 1 !important;
        letter-spacing: normal !important;
    }
}

/* =============================================
   <= 767px (Mobile)
   ============================================ */
@media (max-width: 767px) {
    .text-element {
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }
    .text-element h3 {
        animation-duration: 0.8s;
        animation-delay: 0.5s;
    }
    .text-element h1.is-staggered {
        --stagger-base: 0.9s;   /* früher starten */
        --stagger-step: 45ms;   /* schneller staffeln */
    }
}

/* =============================================
   >= 768px (Tablet)
   ============================================ */
@media (min-width: 768px) {
    .text-element {
        padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
        padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
    }
    .text-element h1 { margin-top: 0.25em; }
}

/* =============================================
   >= 992px (Small Desktop)
   ============================================ */
@media (min-width: 992px) {
    /* hier kannst du bei Bedarf weitere Desktop-Optimierungen ergänzen */
}

/* =============================================
   >= 1200px (Desktop)
   ============================================ */
@media (min-width: 1200px) {
    /* bewusst schlank gehalten – clamp skaliert sauber bis 1600px */
}

/* =============================================
   >= 1600px (Large Desktop)
   ============================================ */
@media (min-width: 1600px) {
    .text-element {
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .text-element h1 {
        font-size: clamp(3rem, 2vw + 2rem, 4.5rem);
    }

    .text-element h3 {
        font-size: clamp(1.25rem, 0.8vw + 0.9rem, 1.75rem);
    }
}