.odin-hero{position:relative;width:100%;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:#0d0905;isolation:isolate}
    .odin-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
    /* Überblenden: das alte Slide bleibt voll sichtbar UNTER dem neuen, bis dieses ganz da ist (sonst dunkles Zwischenbild) */
    .odin-hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 0s linear 1.4s,visibility 0s linear 1.4s;z-index:1}
    .odin-hero-slide.is-active{opacity:1;visibility:visible;transition:opacity 1.4s ease,visibility 0s;z-index:2}
    .odin-hero-media,.odin-hero-media picture,.odin-hero-media img,.odin-hero-video{position:absolute;inset:0;width:100%;height:100%}
    .odin-hero-media img,.odin-hero-video{object-fit:cover;object-position:center center;display:block}
    .odin-hero-video{opacity:0;transition:opacity .8s ease}
    .odin-hero-slide.is-playing .odin-hero-video{opacity:1}
    /* Zoom läuft auch beim Ausblenden weiter (.is-leaving) – sonst springt das alte Bild beim Wechsel auf 100 % */
    .odin-hero-slide.is-active .odin-hero-media img,.odin-hero-slide.is-leaving .odin-hero-media img{animation:odinHeroZoom 14s ease-out both}
    .odin-hero-slide[data-key="asgard"] .odin-hero-media img{animation:none}
    @keyframes odinHeroZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
    /* Sorten-Slides: links hinter dem Text, unten zum Seitenrand, oben fürs Menü (helle Motive wie der Honig-Himmel) */
    .odin-hero-shade{position:absolute;inset:0;pointer-events:none;
        background:linear-gradient(180deg,rgba(13,9,5,.75) 0%,rgba(13,9,5,.35) 11%,rgba(13,9,5,0) 24%),linear-gradient(90deg,rgba(13,9,5,.8) 0%,rgba(13,9,5,.3) 45%,rgba(13,9,5,0) 70%),linear-gradient(0deg,rgba(13,9,5,.75) 0%,rgba(13,9,5,0) 35%)}
    /* Asgard: oben Vignette fürs Menü (heller Himmel), Rand + unten wie bisher */
    .odin-hero-slide[data-key="asgard"] .odin-hero-shade{background:linear-gradient(180deg,rgba(13,9,5,.9) 0%,rgba(13,9,5,.62) 11%,rgba(13,9,5,.25) 20%,rgba(13,9,5,0) 32%),radial-gradient(circle at center,transparent 45%,rgba(0,0,0,.55) 100%),linear-gradient(0deg,rgba(13,9,5,.7) 0%,rgba(13,9,5,0) 40%)}

    .odin-hero-content{position:absolute;z-index:3;display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px);
        opacity:0;transform:translateY(18px);transition:opacity .9s ease .5s,transform .9s ease .5s}
    .odin-hero-slide.is-active .odin-hero-content{opacity:1;transform:none}
    /* links mittig (unten links sitzt der Button „Trünke sammeln!“) */
    .odin-hero-content.layout-links{left:clamp(20px,7vw,120px);top:50%;transform:translateY(calc(-50% + 18px));max-width:min(620px,86vw);align-items:flex-start;text-align:left}
    .odin-hero-slide.is-active .odin-hero-content.layout-links{transform:translateY(-50%)}
    /* Desktop: die Flasche steht mittig im Motiv → Text bleibt links daneben (Titel bricht zweizeilig um) */
    @media (min-width:769px){ .odin-hero-content.layout-links{max-width:min(620px,34vw)} }
    /* Tablet hochkant: Text unten mittig wie am Handy (links neben der Flasche ist zu wenig Platz) */
    @media (min-width:769px) and (max-width:1199px) and (orientation:portrait){
        .odin-hero-content.layout-links{left:50%;top:auto;bottom:240px;width:80vw;max-width:80vw;align-items:center;text-align:center;transform:translate(-50%,18px)}
        .odin-hero-slide.is-active .odin-hero-content.layout-links{transform:translate(-50%,0)}
        .odin-hero-content.layout-links .odin-hero-actions{justify-content:center}
        .odin-hero-shade{background:linear-gradient(180deg,rgba(13,9,5,.6) 0%,rgba(13,9,5,0) 16%),linear-gradient(0deg,rgba(13,9,5,.94) 0%,rgba(13,9,5,.8) 28%,rgba(13,9,5,.4) 46%,rgba(13,9,5,0) 64%)}
    }
.odin-hero-content.layout-mitte{left:50%;bottom:clamp(110px,15vh,170px);transform:translate(-50%,18px);width:min(900px,90vw);align-items:center;text-align:center}
    .odin-hero-slide.is-active .odin-hero-content.layout-mitte{transform:translate(-50%,0)}

    .odin-hero-title{font-family:'ITC Odin Con',serif!important;font-weight:500;text-transform:uppercase;letter-spacing:.03em;
        font-size:clamp(2.6rem,6.2vw,6rem)!important;line-height:.98!important;margin:0!important;padding:0!important;
        color:#F4C064!important;background:linear-gradient(135deg,#F4C064 0%,#ffeeb0 50%,#F4C064 100%)!important;background-size:200% auto!important;
        -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;
        animation:odinHeroShimmer 8s ease-in-out infinite;filter:drop-shadow(0 0 14px rgba(244,192,100,.45)) drop-shadow(0 3px 6px rgba(0,0,0,.8))}
    .odin-hero-slide[data-key="asgard"] .odin-hero-title{font-size:clamp(1.7rem,3.6vw,3.4rem)!important;letter-spacing:.06em}
    @keyframes odinHeroShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
    .odin-hero-text{font-family:'ITC Odin Con',serif!important;font-size:clamp(1.15rem,1.7vw,1.6rem)!important;text-transform:uppercase;letter-spacing:.06em;
        color:#d6be9f!important;margin:0!important;text-shadow:0 2px 6px #000}

    .odin-hero-content.layout-mitte .odin-hero-actions{justify-content:center}

    .odin-hero-dots{position:absolute;z-index:5;left:50%;bottom:clamp(24px,4.5vh,44px);transform:translateX(-50%);display:flex;gap:6px}
    .odin-hero-dot{width:44px;height:44px;padding:0;border:0!important;background:transparent!important;cursor:pointer;display:grid;place-items:center}
    .odin-hero-dot span{display:block;width:11px;height:11px;transform:rotate(45deg);border:1.5px solid rgba(244,192,100,.75);transition:background .3s,transform .3s,box-shadow .3s}
    .odin-hero-dot.is-active span{background:#F4C064;box-shadow:0 0 10px rgba(244,192,100,.8);transform:rotate(45deg) scale(1.15)}
    .odin-hero-dot:focus-visible span{outline:2px solid #ffe3a0;outline-offset:3px}

    @media (max-width:768px){
        .odin-hero{min-height:480px}
        /* über der Sticky-Leiste unten */
        /* unten liegen „Trünke sammeln!“ + „Sorten entdecken“ übereinander (bis 150px) */
        .odin-hero-content.layout-links,.odin-hero-content.layout-mitte{left:50%;right:auto;top:auto;bottom:214px;width:88vw;max-width:88vw;align-items:center;text-align:center;transform:translate(-50%,18px)}
        .odin-hero-slide.is-active .odin-hero-content.layout-links,.odin-hero-slide.is-active .odin-hero-content.layout-mitte{transform:translate(-50%,0)}
        .odin-hero-actions{justify-content:center}
        .odin-hero-dots{bottom:158px}
        /* Text sitzt unten über dem Bild → kräftiger Verlauf (auch Asgard) */
        .odin-hero-shade,.odin-hero-slide[data-key="asgard"] .odin-hero-shade{background:linear-gradient(180deg,rgba(13,9,5,.45) 0%,rgba(13,9,5,0) 14%),linear-gradient(0deg,rgba(13,9,5,.94) 0%,rgba(13,9,5,.82) 30%,rgba(13,9,5,.45) 50%,rgba(13,9,5,0) 68%)}
        .odin-hero-btn{min-height:48px}
    }
    /* Tablets/kleine Laptops: Punkte über die Leiste „Trünke sammeln!“/„Sorten entdecken“ (lagen sonst darauf, z. B. iPad mini quer) */
    @media (min-width:769px) and (max-width:1199px){ .odin-hero-dots{bottom:100px} }
    /* Tablet hochkant (769–820px): Buttons liegen dort ebenfalls übereinander in der Mitte */
    @media (min-width:769px) and (max-width:820px){ .odin-hero-dots{bottom:158px} }
    /* Slider-Punkte ÜBERALL senkrecht, rechts mittig (Wunsch 05.10.) – ID-Selektor schlägt alle Einzelregeln oben */
    #odinHero .odin-hero-dots{left:auto;right:clamp(4px,2vw,30px);top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;gap:2px}
    /* Handy hochkant: Textblock schmaler, damit er nie unter den Punkten liegt */
    @media (max-width:768px) and (orientation:portrait){ #odinHero .odin-hero-content.layout-links,#odinHero .odin-hero-content.layout-mitte{width:calc(100vw - 104px);max-width:calc(100vw - 104px)} }
    /* Handy quer (niedrig): Text unter dem Logo, kompakt, oberhalb der Leiste unten; Punkte senkrecht am rechten Rand */
    @media (orientation:landscape) and (max-height:520px){
        .odin-hero{min-height:0}
        .odin-hero-content.layout-links,.odin-hero-content.layout-mitte{left:clamp(20px,7vw,90px);right:auto;bottom:auto;top:max(112px,30vh);width:auto;
            max-width:min(560px,62vw);align-items:flex-start;text-align:left;gap:8px;transform:translateY(12px)}
        .odin-hero-slide.is-active .odin-hero-content.layout-links,.odin-hero-slide.is-active .odin-hero-content.layout-mitte{transform:none}
        .odin-hero-actions{justify-content:flex-start;gap:10px;margin-top:2px}
        .odin-hero-title{font-size:clamp(1.6rem,9vh,2.3rem)!important}
        .odin-hero-text{font-size:.95rem!important}
        .odin-hero-kicker{font-size:.8rem;padding:4px 12px 3px}
        .odin-hero-btn{min-height:38px!important;font-size:.95rem;padding:0 18px}
        .odin-hero-dots{left:auto;right:8px;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column;gap:0}
        .odin-hero-dot{width:36px;height:36px}
        .odin-hero-shade,.odin-hero-slide[data-key="asgard"] .odin-hero-shade{background:linear-gradient(180deg,rgba(13,9,5,.7) 0%,rgba(13,9,5,0) 30%),
            linear-gradient(90deg,rgba(13,9,5,.85) 0%,rgba(13,9,5,.4) 50%,rgba(13,9,5,0) 75%),linear-gradient(0deg,rgba(13,9,5,.8) 0%,rgba(13,9,5,0) 35%)}
    }
    /* Touch: Das Theme kürzt dort alle Übergänge auf 0,1s (style.css) – der Slider behält seine Überblendung */
    @media (hover:none) and (pointer:coarse){
        #odinHero .odin-hero-slide{transition-duration:1.4s,0s!important}
        #odinHero .odin-hero-content{transition-duration:.9s,.9s!important}
        #odinHero .odin-hero-slide .odin-hero-media img{animation:none!important}
    }
    @media (prefers-reduced-motion:reduce){
        #odinHero .odin-hero-slide,#odinHero .odin-hero-content,#odinHero .odin-hero-video{transition:none!important}
        #odinHero .odin-hero-slide .odin-hero-media img,#odinHero .odin-hero-title{animation:none!important}
    }