@charset "UTF-8";
/* ===========================================================
   Summer 2026 — SOS campaign overrides        VERSION 1.1-dev
   Loaded AFTER /scripts/css/default2026.css, overrides only.

   Flat-design beach, seen from above: sand at the top, then a
   stack of opaque wave bands. Crisp edges on the water bands, no
   gradients inside the water — only the FOAM is soft (blurred).

   ALL FOAM SITS 10px LOWER than its drawn position: the caps'
   background-position-y is calc(100% + 10px) — static cap and the
   twins' WHITE layer only, the colour layers stay at 100%. The
   foam hugs the waterline, its lower half bleeding over the
   water. Tuned visually; change the 10px in all three places
   together.

   Ten #hero_surf spans, painting in DOM order:
     1  foam cap   white, cyan geometry +20px — the constant strip
     2  cyan   static   3  cyan twin    4  cyan structures
     5  teal   static   6  teal twin    7  teal structures
     8  deep   static   9  deep twin   10  deep structures
                           (deep twin wears no foam cap:
                            deep water does not break)

   The four static layers (1/2/5/8) breathe as one 15px tide.
   Twins are ghost waves: surge up, flatten (scaleY), fade slowly
   up and faster down. STRUCTURES are thin white streaks and
   bubbles riding pixel-locked on their twin (identical transform
   keyframes, same duration and delay) but with their own opacity
   curve: in quickly, gone by the twin's turn — they only live on
   the way up. Neighbouring static edges must never cross: height
   gap minus both amplitudes stays >= ~0.

   The water statics run at opacity 0.85 (lighter, sand shimmers
   through). The hand-over value to .mainbody is therefore the
   COMPOSITE colour at the hero's bottom edge (#2f77a8), not the
   raw deep-band colour — see the .mainbody rule. That rule lives
   HERE so the default campaign, which does not load this file,
   shows no blue in home at all.

   (The dev-only tuner is retired; its last source lives in
   temp/backups/summer2026_v1.0/ should tuning ever return.)
   =========================================================== */

/* --- Stage: sand -------------------------------------------- */

#hero_outer{
    height:500px;
    overflow:hidden;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(255,255,255,0.28), transparent 62%),
        linear-gradient(180deg,
            #f1cb8a   0%,   /* dry sand (warm)                 */
            #efc684  45%,
            #e9ba76  60%,
            #dda765  68%,   /* damp                            */
            #d29855  73%,   /* wet, right at the waterline     */
            #d29855 100%);  /* below here the water covers it  */
}

/* default2026 gives #hero_inner height:420px + overflow:hidden,
   which guillotines the content stack at 430px (padding included) —
   the 30-day line fell right on that edge. overflow:visible lifts
   the clip; #hero_outer's own overflow:hidden still contains
   everything within the hero. */
#hero_inner{
    position:relative;
    z-index:1;
    overflow:visible;
}

/* --- Surf ---------------------------------------------------- */

#hero_surf{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:230px;
    z-index:0;
    pointer-events:none;
}

#hero_surf span{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:block;
    background-repeat:repeat-x;
}

/* Every wave SVG is one full sine period whose tangent matches at
   both ends, so the repeat-x tiling shows no kink. Wavelengths
   differ per band and the tiles start phase-shifted, so crests
   never line up into a visible pattern.

   All static layers carry 15px surplus body below the hero edge so
   the tide never exposes the seam; twins carry B px, sized so their
   bottom edge lands exactly ON the hero edge at the turn
   (B = (c0 + lift - c0*s)/s, ty_turn = -B). */

/* 1 — foam cap on the static cyan: cyan geometry, 20px taller.
       Blurred — foam has no crisp edge. filter:blur() frays an
       element on ALL sides, so the cap overhangs the hero by 40px
       left and right (clipped by #hero_outer) to keep the fray off
       screen; the background-position compensates those 40px
       (-460 + 40 = -420), otherwise the crests would shift against
       the cyan band they must ride on.

       The strip fades DOWNWARD: only the upper edge stays defined.
       A straight vertical gradient cannot do that — the strip
       follows the wave curve, so a straight ramp would fade harder
       on crests than in troughs. Instead the cap is four curve-
       parallel sub-strips of falling opacity (1/.72/.45/.22); the
       blur melts the steps into a smooth, curve-following fade. */
#hero_surf span:nth-child(1){
    height:155px;
    bottom:-15px;
    left:-40px;
    right:-40px;
    filter:blur(2.5px);
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 890 155' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C148.33,6 296.67,6 445,24 C593.33,42 741.67,42 890,24 L890,31 C741.67,49 593.33,49 445,31 C296.67,13 148.33,13 0,31 Z' fill='%23ffffff'/%3E%3Cpath d='M0,31 C148.33,13 296.67,13 445,31 C593.33,49 741.67,49 890,31 L890,36 C741.67,54 593.33,54 445,36 C296.67,18 148.33,18 0,36 Z' fill='%23ffffff' fill-opacity='0.85'/%3E%3Cpath d='M0,36 C148.33,18 296.67,18 445,36 C593.33,54 741.67,54 890,36 L890,40 C741.67,58 593.33,58 445,40 C296.67,22 148.33,22 0,40 Z' fill='%23ffffff' fill-opacity='0.62'/%3E%3Cpath d='M0,40 C148.33,22 296.67,22 445,40 C593.33,58 741.67,58 890,40 L890,44 C741.67,62 593.33,62 445,44 C296.67,26 148.33,26 0,44 Z' fill='%23ffffff' fill-opacity='0.42'/%3E%3C/svg%3E");
    background-size:890px 155px;
    background-position:-420px calc(100% + 10px);
    /* tide (transform) + sideways drift (background-position) —
       different properties, so the two animations compose. Each
       layer shifts exactly ONE own tile width per loop (seamless
       wrap). The layers drift in alternating directions with
       falling speed toward the fish: foam+cyan R 25s (LOCKED -
       same clock, same 890px stride, the foam stays on its wave),
       teal L 32s, deep R 40s. */
    animation:sos-tide 12s ease-in-out infinite,
              sos-drift-cap 25s linear infinite;
}

/* 2 — static cyan. A whisper of blur on the wave edge (0.8px);
       like every blurred layer it overhangs the hero sideways
       (20px) with the tile phase compensated (-460 + 20 = -440).

       The two white strips ON TOP of the blue (0.26/0.12, first
       16px below the edge) are the static waterline's dissolve
       tails. They cannot live in the foam cap (span 1) — it paints
       BEFORE this band and would be covered — so the cyan carries
       them itself, and the foam bleeds into the water instead of
       stopping dead at the colour edge. */
#hero_surf span:nth-child(2){
    height:135px;
    bottom:-15px;
    left:-20px;
    right:-20px;
    filter:blur(0.8px);
    opacity:0.85;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 890 135' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C148.33,6 296.67,6 445,24 C593.33,42 741.67,42 890,24 L890,135 L0,135 Z' fill='%236fb7d8'/%3E%3Cpath d='M0,24 C148.33,6 296.67,6 445,24 C593.33,42 741.67,42 890,24 L890,32 C741.67,50 593.33,50 445,32 C296.67,14 148.33,14 0,32 Z' fill='%23ffffff' fill-opacity='0.26'/%3E%3Cpath d='M0,32 C148.33,14 296.67,14 445,32 C593.33,50 741.67,50 890,32 L890,40 C741.67,58 593.33,58 445,40 C296.67,22 148.33,22 0,40 Z' fill='%23ffffff' fill-opacity='0.12'/%3E%3C/svg%3E");
    background-size:890px 135px;
    background-position:-440px 100%;
    animation:sos-tide 12s ease-in-out infinite,
              sos-drift-cyan 25s linear infinite;
}

/* 3 — cyan twin: colour curve 20px below the white one = built-in
       cap. The WHITE layer is listed FIRST (= on top): its two tail
       strips (0.26/0.12) reach BELOW the colour edge and dissolve
       the foam INTO the water — the fix for the foam visually
       detaching from its wave when it faded into thin air above
       the colour edge. */
#hero_surf span:nth-child(3){
    height:267px;
    bottom:-127px;
    background-image:
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 890 267' preserveAspectRatio='none'%3E%3Cpath d='M0,24 C148.33,6 296.67,6 445,24 C593.33,42 741.67,42 890,24 L890,31 C741.67,49 593.33,49 445,31 C296.67,13 148.33,13 0,31 Z' fill='%23ffffff'/%3E%3Cpath d='M0,31 C148.33,13 296.67,13 445,31 C593.33,49 741.67,49 890,31 L890,36 C741.67,54 593.33,54 445,36 C296.67,18 148.33,18 0,36 Z' fill='%23ffffff' fill-opacity='0.85'/%3E%3Cpath d='M0,36 C148.33,18 296.67,18 445,36 C593.33,54 741.67,54 890,36 L890,40 C741.67,58 593.33,58 445,40 C296.67,22 148.33,22 0,40 Z' fill='%23ffffff' fill-opacity='0.62'/%3E%3Cpath d='M0,40 C148.33,22 296.67,22 445,40 C593.33,58 741.67,58 890,40 L890,44 C741.67,62 593.33,62 445,44 C296.67,26 148.33,26 0,44 Z' fill='%23ffffff' fill-opacity='0.42'/%3E%3Cpath d='M0,44 C148.33,26 296.67,26 445,44 C593.33,62 741.67,62 890,44 L890,52 C741.67,70 593.33,70 445,52 C296.67,34 148.33,34 0,52 Z' fill='%23ffffff' fill-opacity='0.26'/%3E%3Cpath d='M0,52 C148.33,34 296.67,34 445,52 C593.33,70 741.67,70 890,52 L890,60 C741.67,78 593.33,78 445,60 C296.67,42 148.33,42 0,60 Z' fill='%23ffffff' fill-opacity='0.12'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 890 267' preserveAspectRatio='none'%3E%3Cpath d='M0,44 C148.33,26 296.67,26 445,44 C593.33,62 741.67,62 890,44 L890,267 L0,267 Z' fill='%236fb7d8'/%3E%3C/svg%3E");
    background-size:890px 267px, 890px 267px;
    background-position:-460px calc(100% + 10px), -460px 100%;
    transform-origin:50% 100%;
    filter:blur(1.2px);
    /* Weicher Auslauf an der geraden Unterkante: beim Aufstieg mit
       scaleY-Abflachung hebt sich der flache Zwillings-Boden zeitweise
       ins Bild und stand als exakt gerade helle Linie im Wasser. Die
       Maske loest die untersten 18px in Transparenz auf - Geometrie
       und Keyframes bleiben unangetastet (gilt fuer alle 3 Zwillinge). */
    -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 18px), transparent);
    mask-image:linear-gradient(180deg, #000 calc(100% - 18px), transparent);
    animation:sos-twin2 9s infinite;
}

/* 4 — cyan structures: streaks + bubbles below the twin's crest */
#hero_surf span:nth-child(4){
    height:267px;
    bottom:-127px;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 890 267' preserveAspectRatio='none'%3E%3Cg stroke='%23ffffff' stroke-width='3' fill='none' stroke-linecap='round' opacity='0.55'%3E%3Cpath d='M0,60 C148.33,42 296.67,42 445,60 C593.33,78 741.67,78 890,60' stroke-dasharray='150 260 100 380' stroke-dashoffset='-60'/%3E%3Cpath d='M0,78 C148.33,60 296.67,60 445,78 C593.33,96 741.67,96 890,78' stroke-dasharray='120 330 80 360' stroke-dashoffset='-420'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.5'%3E%3Ccircle cx='133.5' cy='61' r='5'/%3E%3Ccircle cx='427.2' cy='64' r='4'/%3E%3Ccircle cx='747.6' cy='68' r='6'/%3E%3C/g%3E%3C/svg%3E");
    background-size:890px 267px;
    background-position:-460px 100%;
    transform-origin:50% 100%;
    animation:sos-tex2 9s infinite;
}

/* 5 — static teal (0.8px edge blur, 20px side overhang, phase
       compensated -190 + 20 = -170) */
#hero_surf span:nth-child(5){
    height:92px;
    bottom:-15px;
    left:-20px;
    right:-20px;
    filter:blur(1.2px);
    opacity:0.85;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 92' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C120,6 240,6 360,22 C480,38 600,38 720,22 L720,92 L0,92 Z' fill='%233f8fbe'/%3E%3C/svg%3E");
    background-size:720px 92px;
    background-position:-170px 100%;
    animation:sos-tide 12s ease-in-out infinite,
              sos-drift-teal 32s linear infinite;
}

/* 6 — teal twin */
#hero_surf span:nth-child(6){
    height:252px;
    bottom:-155px;
    background-image:
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 252' preserveAspectRatio='none'%3E%3Cpath d='M0,22 C120,6 240,6 360,22 C480,38 600,38 720,22 L720,29 C600,45 480,45 360,29 C240,13 120,13 0,29 Z' fill='%23ffffff'/%3E%3Cpath d='M0,29 C120,13 240,13 360,29 C480,45 600,45 720,29 L720,34 C600,50 480,50 360,34 C240,18 120,18 0,34 Z' fill='%23ffffff' fill-opacity='0.85'/%3E%3Cpath d='M0,34 C120,18 240,18 360,34 C480,50 600,50 720,34 L720,38 C600,54 480,54 360,38 C240,22 120,22 0,38 Z' fill='%23ffffff' fill-opacity='0.62'/%3E%3Cpath d='M0,38 C120,22 240,22 360,38 C480,54 600,54 720,38 L720,42 C600,58 480,58 360,42 C240,26 120,26 0,42 Z' fill='%23ffffff' fill-opacity='0.42'/%3E%3Cpath d='M0,42 C120,26 240,26 360,42 C480,58 600,58 720,42 L720,50 C600,66 480,66 360,50 C240,34 120,34 0,50 Z' fill='%23ffffff' fill-opacity='0.26'/%3E%3Cpath d='M0,50 C120,34 240,34 360,50 C480,66 600,66 720,50 L720,58 C600,74 480,74 360,58 C240,42 120,42 0,58 Z' fill='%23ffffff' fill-opacity='0.12'/%3E%3C/svg%3E"),
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 252' preserveAspectRatio='none'%3E%3Cpath d='M0,42 C120,26 240,26 360,42 C480,58 600,58 720,42 L720,252 L0,252 Z' fill='%233f8fbe'/%3E%3C/svg%3E");
    background-size:720px 252px, 720px 252px;
    background-position:-190px calc(100% + 10px), -190px 100%;
    transform-origin:50% 100%;
    filter:blur(1.2px);
    -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 18px), transparent);
    mask-image:linear-gradient(180deg, #000 calc(100% - 18px), transparent);
    animation:sos-twin3 11.5s infinite;
    animation-delay:-4s;
}

/* 7 — teal structures */
#hero_surf span:nth-child(7){
    height:252px;
    bottom:-155px;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 252' preserveAspectRatio='none'%3E%3Cg stroke='%23ffffff' stroke-width='3' fill='none' stroke-linecap='round' opacity='0.55'%3E%3Cpath d='M0,58 C120,42 240,42 360,58 C480,74 600,74 720,58' stroke-dasharray='130 210 90 290' stroke-dashoffset='-40'/%3E%3Cpath d='M0,76 C120,60 240,60 360,76 C480,92 600,92 720,76' stroke-dasharray='100 260 70 300' stroke-dashoffset='-330'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.5'%3E%3Ccircle cx='108' cy='60' r='5'/%3E%3Ccircle cx='345.6' cy='62' r='4'/%3E%3Ccircle cx='604.8' cy='64' r='6'/%3E%3C/g%3E%3C/svg%3E");
    background-size:720px 252px;
    background-position:-190px 100%;
    transform-origin:50% 100%;
    animation:sos-tex3 11.5s infinite;
    animation-delay:-4s;
}

/* 8 — static deep blue: bottom row solid (seam to .mainbody).
       0.8px edge blur; the 25px bottom overhang also swallows the
       blur's downward fray, so the seam colour stays solid. Phase
       compensated -640 + 20 = -620. */
#hero_surf span:nth-child(8){
    height:50px;
    bottom:-15px;
    left:-20px;
    right:-20px;
    filter:blur(1.2px);
    opacity:0.85;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 920 50' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C153.33,6 306.67,6 460,18 C613.33,30 766.67,30 920,18 L920,50 L0,50 Z' fill='%232a72a4'/%3E%3C/svg%3E");
    background-size:920px 50px;
    background-position:-620px 100%;
    animation:sos-tide 12s ease-in-out infinite,
              sos-drift-deep 40s linear infinite;
}

/* 9 — deep-blue twin. No foam cap: deep water does not break.
       Same whisper of edge blur as the static bands. */
#hero_surf span:nth-child(9){
    height:242px;
    bottom:-187px;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 920 242' preserveAspectRatio='none'%3E%3Cpath d='M0,38 C153.33,26 306.67,26 460,38 C613.33,50 766.67,50 920,38 L920,242 L0,242 Z' fill='%232a72a4'/%3E%3C/svg%3E");
    background-size:920px 242px;
    background-position:-640px 100%;
    transform-origin:50% 100%;
    filter:blur(1.3px);
    -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 18px), transparent);
    mask-image:linear-gradient(180deg, #000 calc(100% - 18px), transparent);
    animation:sos-twin4 13.5s infinite;
    animation-delay:-8s;
}

/* 10 — deep structures (drawn relative to the capless curve) */
#hero_surf span:nth-child(10){
    height:242px;
    bottom:-187px;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 920 242' preserveAspectRatio='none'%3E%3Cg stroke='%23ffffff' stroke-width='3' fill='none' stroke-linecap='round' opacity='0.55'%3E%3Cpath d='M0,34 C153.33,22 306.67,22 460,34 C613.33,46 766.67,46 920,34' stroke-dasharray='150 280 100 400' stroke-dashoffset='-70'/%3E%3Cpath d='M0,52 C153.33,40 306.67,40 460,52 C613.33,64 766.67,64 920,52' stroke-dasharray='120 350 90 370' stroke-dashoffset='-460'/%3E%3C/g%3E%3Cg fill='%23ffffff' opacity='0.5'%3E%3Ccircle cx='138' cy='38' r='5'/%3E%3Ccircle cx='441.6' cy='39' r='4'/%3E%3Ccircle cx='772.8' cy='38' r='6'/%3E%3C/g%3E%3C/svg%3E");
    background-size:920px 242px;
    background-position:-640px 100%;
    transform-origin:50% 100%;
    animation:sos-tex4 13.5s infinite;
    animation-delay:-8s;
}

/* The four static layers breathe as ONE tide: same keyframe, same
   duration, no delay. Sync is mandatory twice over — the foam cap
   must ride exactly with the cyan or the constant 20px strip breaks,
   and the cyan→teal crossing reserve is only 9px, so any relative
   motion between bands would cross their edges. */
@keyframes sos-tide{
    0%,100%{ transform:translateY(0);     }
       50% { transform:translateY(-15px); }
}

/* Sideways drift of the front (cyan) wave incl. its foam cap:
   one full 890px tile per loop = seamless wrap (the sine tiles
   are tangent-continuous). Keyframes are per-span because each
   carries its own phase offset. ONLY the -x longhand is animated:
   interpolating the shorthand with its calc() y-anchor made some
   engines drop the whole animation — the y stays on the base rule. */
@keyframes sos-drift-cap{
      0%{ background-position-x:-420px; }
    100%{ background-position-x:470px;  }
}

@keyframes sos-drift-cyan{
      0%{ background-position-x:-440px; }
    100%{ background-position-x:450px;  }
}

@keyframes sos-drift-teal{
      0%{ background-position-x:-170px; }
    100%{ background-position-x:-890px; }
}

@keyframes sos-drift-deep{
      0%{ background-position-x:-620px; }
    100%{ background-position-x:300px;  }
}

/* Twin cycle. Opacity 0 at both ends: at rest a twin's white cap
   sits ABOVE its static sibling's edge and would show as a stray
   white line, so twins only become visible once they move. Fade-in
   by 8%, slow fade toward the turn (rising), faster fade to zero by
   84% (draining) while the shape un-flattens home. */
@keyframes sos-twin2{
      0%{ transform:translateY(0) scaleY(1);        opacity:0;    animation-timing-function:ease-out; }
     10%{                                           opacity:0.35; animation-timing-function:ease-in-out; }
     22%{                                           opacity:0.9;  }
     45%{ transform:translateY(-127px) scaleY(0.68);  opacity:0.28; animation-timing-function:ease-in-out; }
     64%{                                           opacity:0;    }
    100%{ transform:translateY(0) scaleY(1);        opacity:0;    }
}

@keyframes sos-twin3{
      0%{ transform:translateY(0) scaleY(1);         opacity:0;    animation-timing-function:ease-out; }
     10%{                                            opacity:0.35; animation-timing-function:ease-in-out; }
     22%{                                            opacity:0.9;  }
     45%{ transform:translateY(-155px) scaleY(0.62); opacity:0.28;  animation-timing-function:ease-in-out; }
     64%{                                            opacity:0;    }
    100%{ transform:translateY(0) scaleY(1);         opacity:0;    }
}

@keyframes sos-twin4{
      0%{ transform:translateY(0) scaleY(1);         opacity:0;    animation-timing-function:ease-out; }
      8%{                                            opacity:0.85; }
     45%{ transform:translateY(-187px) scaleY(0.55);  opacity:0.24; animation-timing-function:ease-in-out; }
     64%{                                            opacity:0;    }
    100%{ transform:translateY(0) scaleY(1);         opacity:0;    }
}

/* Structure cycle: transforms are a 1:1 copy of the twin's (same
   duration and delay too), so streaks and bubbles stay pixel-locked
   on their wave. Only the opacity differs: in quickly, faded OUT by
   the twin's turn — the structures live only on the way up, which is
   what gives the water its plasticity without cluttering the calm
   retreat. */
/* Structures VANISH INTO THE FOAM, spatially, not by fading: the
   keyframes animate a clip-path inset counter to the upward travel,
   so the clip edge stays roughly pinned at the waterline while the
   span rides up. Each streak is swallowed the moment it slides
   under the foam strip — upper streak first, bubbles, then the
   lower one. Inset at the turn per wave: P = H - (W + B - lift)/s
   with waterline W ≈ 104px (mid-foam). Between stops the linear
   clip interpolation drifts a few px against the eased transform —
   the 20px blurred foam swallows that.

   Opacity stays FULL through the ride; it cuts right after the
   turn, when everything is already inside the foam, so nothing
   re-emerges on the drain. */
@keyframes sos-tex2{
      0%{ transform:translateY(0) scaleY(1);         clip-path:inset(0 0 0 0);      opacity:0;    animation-timing-function:ease-out; }
      8%{                                                                           opacity:0.75; }
     45%{ transform:translateY(-127px) scaleY(0.68); clip-path:inset(114px 0 0 0);  opacity:0.75; animation-timing-function:ease-in-out; }
     46%{                                                                           opacity:0;    }
    100%{ transform:translateY(0) scaleY(1);         clip-path:inset(0 0 0 0);      opacity:0;    }
}

@keyframes sos-tex3{
      0%{ transform:translateY(0) scaleY(1);         clip-path:inset(0 0 0 0);      opacity:0;    animation-timing-function:ease-out; }
      8%{                                                                           opacity:0.75; }
     45%{ transform:translateY(-155px) scaleY(0.62); clip-path:inset(84px 0 0 0);   opacity:0.75; animation-timing-function:ease-in-out; }
     46%{                                                                           opacity:0;    }
    100%{ transform:translateY(0) scaleY(1);         clip-path:inset(0 0 0 0);      opacity:0;    }
}

@keyframes sos-tex4{
      0%{ transform:translateY(0) scaleY(1);         clip-path:inset(0 0 0 0);      opacity:0;    animation-timing-function:ease-out; }
      8%{                                                                           opacity:0.7;  }
     45%{ transform:translateY(-187px) scaleY(0.55); clip-path:inset(53px 0 0 0);   opacity:0.7;  animation-timing-function:ease-in-out; }
     46%{                                                                           opacity:0;    }
    100%{ transform:translateY(0) scaleY(1);         clip-path:inset(0 0 0 0);      opacity:0;    }
}

@media (prefers-reduced-motion:reduce){
    #hero_surf span{
        animation:none;
    }
    /* twins and structures are ghosts — without motion they are
       just stray lines */
    #hero_surf span:nth-child(3),
    #hero_surf span:nth-child(4),
    #hero_surf span:nth-child(6),
    #hero_surf span:nth-child(7),
    #hero_surf span:nth-child(9),
    #hero_surf span:nth-child(10){
        opacity:0;
    }
}

/* --- Stoerer (offer badge) ----------------------------------
   Sits above the H1. Blue, not red: the price and the -10 € badge
   already carry the red accent, and a third red element would
   flatten the hierarchy.

   #hero_product is pulled up so the H1 keeps the vertical position
   it had without the badge — the price column next to it is
   positioned independently and would otherwise fall out of
   alignment. ----------------------------------------------- */

#hero_product{
    top:41px;   /* 6px + 35px clearance from the top edge */
}

#hero_offer{
    display:inline-block;
    margin:0 0 8px 0;
    padding:6px 18px 7px 15px;
    border-radius:20px;
    background:#0060DC;
    box-shadow:0 4px 14px rgba(0,60,120,0.22);
    color:#fff;
    font-family:'PT Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-size:22px;
    font-weight:bold;
    line-height:1.2;
    letter-spacing:0.3px;
}

/* --- Type: was white on the dark hero, needs dark on sand --- */

#hero_product h1{
    color:#0d2b45;
}

#hero_features{
    color:#143a5c;
}

#hero_features span{
    color:#e4001f;   /* Haekchen in Brand-Rot (Nutzerwunsch); Inline-Farben der Default-Heroes sind aus den Sprach-Heroes gestrippt */
}

/* --- Price --------------------------------------------------- */

/* Red on warm sand loses its punch — a soft white halo lifts the
   price off the background without touching the colour semantics. */
.red{
    color:#e4001f;
    text-shadow:0 0 14px rgba(255,255,255,0.9), 0 1px 2px rgba(255,255,255,0.65);
}

#hero_price_outer > div#hero_price > s{
    color:#6b7c8c;
    opacity:1;
}

/* --- Buy button ----------------------------------------------
   Brand red (user's call over the earlier orange) with a glossy
   sheen: lighter crown fading into a deeper base, a hairline light
   catch on the top edge (inset) and a soft red ambient glow instead
   of a grey shadow. */

a.headerbutton{
    background:linear-gradient(180deg, #ff3448 0%, #e4001f 55%, #bf0019 100%);
    box-shadow:0 6px 20px rgba(228,0,31,0.35), inset 0 1px 0 rgba(255,255,255,0.30);
}

/* .chipglow = hover look forced by the hero script while the
   pointer sits on the -25 € chip (a separate element, so the
   button's own :hover cannot fire there) — chip and button light
   up as ONE unit in both directions. */
a.button_hover:hover,
a.button_hover.chipglow{
    background:linear-gradient(180deg, #e82135 0%, #c9001c 55%, #a30015 100%);
}

/* -25 € chip in metallic silver: white light catch across the
   crown, cool steel base — reads premium next to the red button
   without competing with it. Dark slate type for contrast.

   On buy-button hover the chip turns GOLD. Gradients cannot
   cross-fade, so the gold lives on ::before (opacity 0 -> 1).
   Layering WITHOUT the negative-z trick (which proved unreliable
   here): the pseudo sits at z-index:1 above the silver background,
   the chip text is wrapped in <b> at z-index:2 above the pseudo;
   z-index:0 on the chip keeps this sandwich in its own context. */
#hero_price_outer > #hero_buybutton > span{
    background:linear-gradient(160deg, #ffffff 0%, #e9eef4 34%, #c9d2dc 68%, #aab5c2 100%);
    color:#2f3b47;
    text-shadow:0 1px 0 rgba(255,255,255,0.55);
    box-shadow:0 2px 10px rgba(31,58,82,0.28),
               inset 0 1px 0 rgba(255,255,255,0.85),
               inset 0 -1px 0 rgba(90,104,120,0.40);
    z-index:0;
    /* the chip escapes #hero_price_outer's pointer-events:none so
       hovering the chip itself golds it too */
    pointer-events:auto;
    transition:color 0.45s ease, box-shadow 0.45s ease, text-shadow 0.45s ease;
}

#hero_price_outer > #hero_buybutton > span::before{
    content:"";
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    border-radius:20px;
    z-index:1;
    background:linear-gradient(160deg, #f8e39a 0%, #f1cd66 38%, #dda63c 72%, #c9902e 100%);
    opacity:0;
    transition:opacity 0.45s ease;
}

#hero_price_outer > #hero_buybutton > span b{
    position:relative;
    z-index:2;
}

/* The chip wraps its own buy link (same target as the button) —
   invisible dress: inherits the chip's colour transition, no
   underline. Sits above the gold fade like the <b> it contains.
   The anchor itself only spans the text; its ::after stretches an
   invisible hit plate over the WHOLE chip (anchored to the span,
   the chip's positioned box), so the padding clicks too. */
#hero_price_outer > #hero_buybutton > span a{
    color:inherit;
    text-decoration:none;
}

#hero_price_outer > #hero_buybutton > span a::after{
    content:"";
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    z-index:3;
    border-radius:20px;
}

/* .gold is set by the hero script (mouseenter/-leave on button and
   chip) — class wiring instead of a:hover + span, so it works
   independent of sibling-selector quirks. NO direct background swap
   here: a gradient cannot cross-fade, an instant swap under the
   pseudo killed the smoothness — the gold arrives ONLY via the
   ::before opacity fade. */
#hero_price_outer > #hero_buybutton > a:hover + span,
#hero_price_outer > #hero_buybutton > span:hover,
#hero_price_outer > #hero_buybutton > span.gold{
    color:#4b2f05;
    text-shadow:0 1px 0 rgba(255,255,255,0.35);
    box-shadow:0 2px 12px rgba(180,130,30,0.45),
               inset 0 1px 0 rgba(255,255,255,0.55),
               inset 0 -1px 0 rgba(122,79,12,0.35);
}

#hero_price_outer > #hero_buybutton > a:hover + span::before,
#hero_price_outer > #hero_buybutton > span:hover::before,
#hero_price_outer > #hero_buybutton > span.gold::before{
    opacity:1;
}

/* --- 30-day guarantee ----------------------------------------
   margin-right:520px re-centres it under the buy button. The
   packshots are a 520px right-float; the button's line box is
   shortened by that float and centres in the remaining 630px,
   while this line falls BELOW the float, gets the full width and
   centred 260px (half the float) further right. Reserving the
   float's width restores a common centre axis. */

/* The line sits ON the water bands now — dark slate drowned on the
   mid blues. White with a soft cast shadow reads on every band; the
   chip inverts (white on blue water, blue type) so it stays a chip
   instead of dissolving into the sea. */
div#hero_30days{
    color:#fff;
    margin-right:520px;
}

#hero_30days > span:nth-child(1){
    background:#fff;
    color:#0060DC;
    font-weight:bold;
}

/* --- Packshots: swap the white glow for a soft cast shadow --- */

#hero_packshots img.shot{
    box-shadow:0 10px 30px rgba(10,40,70,0.20);
}

/* shot1 is the iPad render: the device does NOT fill its canvas
   (transparent margins, big rounded corners), so a box-shadow
   paints a detached rectangle glowing around it. drop-shadow
   follows the alpha contour of the device instead. */
#hero_packshots img.shot1{
    box-shadow:none;
    top:68px;   /* Faecher 15px tiefer (2026-07-13); Unterkante 68 + 272 = 340 */
    height:272px;
    filter:drop-shadow(0 10px 18px rgba(10,40,70,0.28));
    /* iPad vor dem Light-Fenster (default: shot2 liegt mit z2 vorn;
       Hover-z5 aus default2026 bleibt darueber) */
    z-index:3;
    /* Faecher-Anordnung (Variante 7): iPad -4, iPhone +4 Grad */
    transform:rotate(-4deg);
}

/* iPad hover zoom a notch bigger than the default 1.2 (z-index:5
   during hover comes from default2026). */
#hero_packshots img.shot1:hover{
    transform:rotate(0deg) scale(1.28);
}

/* shot3 = the connected iPhone, BEHIND the iPad (z2 like the
   window, but later in DOM = paints over it), peeking out on the
   iPad-s right side; hover (z5, default2026) pulls it to the front. Framed device render with
   transparent margins -> drop-shadow instead of box-shadow, like
   the iPad. Default2026's .shot3 geometry (200px, bottom-right
   origin, hover 1.65) is overridden wholesale. */
#hero_packshots img.shot3{
    height:260px;
    left:132px;
    top:80px;
    z-index:2;
    box-shadow:none;
    filter:drop-shadow(0 10px 18px rgba(10,40,70,0.30));
    transform:rotate(4deg);
    transform-origin:bottom right;
}

#hero_packshots img.shot3:hover{
    transform:rotate(0deg) scale(1.25);
}

/* Light window drops 40px now that the iPad fronts the stack
   (default2026 top:0), +15px fan shift 2026-07-13. Anker unten
   rechts (default: top right) — beim Hover-Zoom bleibt die untere
   rechte Ecke stehen, das Fenster waechst nach oben/links. */
#hero_packshots img.shot2{
    top:46px;
    transform-origin:bottom right;
}

/* --- Hover-Captions ueber den Packshots -----------------------
   Spans liegen als Geschwister HINTER den imgs im Packshot-Link
   (img:hover ~ span braucht denselben Parent). Zentriert ueber dem
   GEZOOMTEN Extent jedes Shots (Hover dreht auf 0deg):
     iPad   1.28 @ bottom-left  -> 269.8x348.2 @ -25/ -8
     Window 1.20 @ bottom-right -> 381.9x300   @   6/ -4
     iPhone 1.25 @ bottom-right -> 163.8x325   @  99/ 15
   bottom-verankert, damit mehrzeilige Sprachen nach OBEN wachsen
   statt ins Bild; pointer-events:none laesst die Link-Hitflaeche
   unveraendert. */
#hero_packshots .shotcap{
    position:absolute;
    width:360px;
    text-align:center;
    white-space:nowrap;  /* nie umbrechen; Ueberlaenge laeuft dank
                            text-align:center symmetrisch ueber beide
                            Boxkanten hinaus, bleibt also zentriert */
    font-size:17px;
    line-height:1.25;
    color:#0d2b45;          /* H1-Navy, liest sich auf dem Sand */
    opacity:0;
    transition:opacity 1s ease-in-out;
    pointer-events:none;
    z-index:6;              /* ueber dem Hover-z5 der Shots */
}
#hero_packshots .cap1{left:-70px;bottom:311px;}
/* cap2 +7px extra Luft: das Fenster-webp hat KEINEN transparenten
   Rand oben (Geraete-Renders schon), gleicher Rechenabstand wirkte
   dort zu knapp */
#hero_packshots .cap2{left:17px;bottom:314px;}
#hero_packshots .cap3{left:1px;bottom:288px;}
#hero_packshots img.shot1:hover ~ .cap1,
#hero_packshots img.shot2:hover ~ .cap2,
#hero_packshots img.shot3:hover ~ .cap3{
    opacity:1;
}

/* --- Beach deco -----------------------------------------------
   Standalone SVGs under /images/steganos/products/sos/summer2026/
   (they must be uploaded to LIVE along with this stylesheet). The
   container sits BEFORE #hero_surf in the DOM, so the running
   twins wash over ball and starfish.

   Every piece is anchored to the PAGE CENTRE (left:calc(50% + X))
   so its distance to the content zone stays constant across
   viewport widths; on narrow screens the outer pieces slide out
   of frame instead of under the content. Values tuned via the dev
   panel — X/Y/Winkel/Groesse per asset. */

#hero_deco{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:0;
    pointer-events:none;
}

#hero_deco span{
    position:absolute;
    display:block;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
}

#hero_deco .d1{ left:calc(50% - 1083px); top:-72px; width:210px; height:210px; transform:rotate(12deg) scale(1.9);  background-image:url(/images/steganos/products/sos/summer2026/palm.svg?v=2); }
#hero_deco .d2{ left:calc(50% - 798px);  top:115px; width:150px; height:150px; --base:rotate(-6deg) scale(1.45); transform:var(--base); z-index:2; pointer-events:auto; background-image:url(/images/steganos/products/sos/summer2026/parasol-red.svg?v=2); }
#hero_deco .d3{ left:calc(50% - 696px);  top:196px; width:66px;  height:115px; transform:rotate(-17deg) scale(1.2);  background-image:url(/images/steganos/products/sos/summer2026/towel-orange.svg?v=2); }
#hero_deco .d4{ left:calc(50% - 823px);  top:246px; width:120px; height:107px; transform:rotate(14deg) scale(0.4);   background-image:url(/images/steganos/products/sos/summer2026/snorkelmask.svg?v=2); }
#hero_deco .d5{ left:calc(50% + 830px);  top:185px; width:100px; height:100px; --base:rotate(20deg) scale(0.35); transform:var(--base); pointer-events:auto; background-image:url(/images/steganos/products/sos/summer2026/beachball.svg?v=2); }
#hero_deco .d6{ left:calc(50% - 194px);  top:332px; width:110px; height:108px; transform:rotate(36deg) scale(0.9);   background-image:url(/images/steganos/products/sos/summer2026/starfish-orange.svg?v=2); }
#hero_deco .d7{ left:calc(50% + 683px);  top:121px; width:78px;  height:135px; transform:rotate(7deg) scale(1.1);   background-image:url(/images/steganos/products/sos/summer2026/mat-blue.svg?v=2); }
#hero_deco .d8{ left:calc(50% + 760px);  top:138px; width:78px;  height:135px; transform:rotate(-2deg) scale(1.1);    background-image:url(/images/steganos/products/sos/summer2026/mat-blue.svg?v=2); }
#hero_deco .d9{ left:calc(50% + 841px);  top:129px; width:48px;  height:86px;  transform:rotate(11deg) scale(1);     background-image:url(/images/steganos/products/sos/summer2026/towel-small-blue.svg?v=2); }
#hero_deco .d10{ left:calc(50% + 683px); top:328px; width:92px;  height:86px;  transform:rotate(-20deg) scale(0.85); background-image:url(/images/steganos/products/sos/summer2026/starfish-blue.svg?v=2); }
#hero_deco .d11{ left:calc(50% + 700px); top:33px;  width:150px; height:150px; --base:rotate(9deg) scale(1.55); transform:var(--base); pointer-events:auto; background-image:url(/images/steganos/products/sos/summer2026/parasol-blue.svg?v=2); }
/* d12: Zehen nach OBEN (statt urspruenglich -161deg abwaerts) UND
   Bogen gespiegelt: scale(-…) flippt die Kurve, rotate(-19) statt 19
   kompensiert die Spiegelung (M∘R(-19) = R(19)∘M) */
#hero_deco .d12{ left:calc(50% - 751px); top:-37px; width:200px; height:260px; transform:scale(-1.15,1.15) rotate(-7deg); background-image:url(/images/steganos/products/sos/summer2026/footprints.svg?v=4); }
#hero_deco .d13{ left:calc(50% - 300px); top:335px; width:92px;  height:86px;  transform:rotate(16deg) scale(0.9); background-image:url(/images/steganos/products/sos/summer2026/starfish-blue.svg?v=2); }
#hero_deco .d14{ left:calc(50% - 925px); top:315px; width:92px;  height:86px;  transform:rotate(-24deg) scale(0.9); background-image:url(/images/steganos/products/sos/summer2026/starfish-violet.svg); }

/* --- Home sea continuation -----------------------------------
   The sea does not stop at the hero. .mainbody is the full-width
   wrapper around the home_XX article (the hero sits ABOVE it,
   outside it), so a gradient here continues the water down into
   the page and fades it out to the white body behind.

   This is why it lives in summer2026.css and NOT in home_XX.html:
   the article markup stays campaign-neutral. Swap the summer hero
   back to the default one — which does not load this stylesheet —
   and the blue is simply gone, no edit to home needed.

   Its top colour MUST equal the EFFECTIVE colour at the hero's
   bottom edge. Since the static bands run at opacity 0.85, that is
   no longer the raw band colour but the composite of three 85%
   layers over the wet sand: deep(.85) over teal(.85) over
   cyan(.85) over #cda05a = #2f77a8. Change any band opacity or
   colour and this value must be recomputed. */
.mainbody{
    margin-top:0;
    position:relative;
    z-index:0;   /* Stacking-Kontext: ohne ihn faellt der Fisch-Schwarm (z-index:-1) HINTER den .mainbody-Verlauf */
    background:linear-gradient(180deg,
        #2f77a8    0,
        #548fba   80px,
        #9ac4da  190px,
        #d9eaf3  300px,
        rgba(255,255,255,0) 400px) no-repeat top center;
}

/* --- Fish school ----------------------------------------------
   #home_fish is the ONE campaign element inside home_XX.html — an
   inert, empty div that renders as nothing when this stylesheet is
   absent (default campaign: no cleanup needed). The school swims
   left to right along a serpentine: the keyframes advance `left`
   monotonically while `top` swings between stops; the per-segment
   ease-in-out bends the path AND subtly varies the speed, like a
   real school.

   z-index:-1 tucks it between .mainbody's background and the
   article content, so it never covers the trust cards.

   THE FLEE: the fish image lives on ::after. On hover it darts
   right (ease-in) and fades; the reverse transition carries a
   9999s delay, so once fled it STAYS gone (until reload) even
   though the pointer inevitably loses it mid-dash — without the
   delay it would snap back the moment the mouse is left behind. */
#home_fish{
    position:absolute;
    top:8px;
    left:-12%;
    width:205px;
    height:64px;
    z-index:-1;
    animation:fish-swim 58s linear infinite;
}

/* Each span is ONE fish, top-down: slim torpedo body with a forked
   tail, dark blue-grey — no side-profile eye. Individual elements
   because the scatter needs per-fish directions.

   THE FLED STATE IS A CLASS, NOT :hover. The school keeps swimming
   under the pointer, so plain :hover breaks off mid-flight and the
   fish freeze in the air. A three-line script in hero_XX.html adds
   .fled on the FIRST mouseenter (once); the class persists, the
   flight completes, the school stays gone until reload. */
#home_fish span{
    position:absolute;
    width:24px;
    height:12px;
    filter:blur(0.4px);
    background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'%3E%3Cpath d='M7,7 L1,3 L3,7 L1,11 Z' fill='%23385369'/%3E%3Cpath d='M6,7 Q10,3.6 15,3.2 Q21,3.4 25,7 Q21,10.6 15,10.8 Q10,10.4 6,7 Z' fill='%23425f78'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity:0.9;
}

#home_fish span:nth-child(1){ left:6px;   top:8px;  --fr:-5deg; transform:rotate(var(--fr)); }
#home_fish span:nth-child(2){ left:38px;  top:2px;  --fr:4deg; transform:rotate(var(--fr));  width:20px; }
#home_fish span:nth-child(3){ left:70px;  top:14px; --fr:-2deg; transform:rotate(var(--fr)); }
#home_fish span:nth-child(4){ left:22px;  top:30px; --fr:6deg; transform:rotate(var(--fr));  width:19px; opacity:0.8; }
#home_fish span:nth-child(5){ left:54px;  top:37px; --fr:-6deg; transform:rotate(var(--fr)); }
#home_fish span:nth-child(6){ left:90px;  top:31px; --fr:3deg; transform:rotate(var(--fr));  width:21px; }
#home_fish span:nth-child(7){ left:120px; top:16px; --fr:-4deg; transform:rotate(var(--fr)); width:27px; }
#home_fish span:nth-child(8){ left:102px; top:48px; --fr:7deg; transform:rotate(var(--fr));  width:18px; opacity:0.8; }
#home_fish span:nth-child(9){ left:150px; top:6px;  --fr:5deg; transform:rotate(var(--fr));  width:20px; }
#home_fish span:nth-child(10){ left:160px; top:36px; --fr:-3deg; transform:rotate(var(--fr)); width:23px; opacity:0.85; }
#home_fish span:nth-child(11){ left:36px;  top:52px; --fr:-6deg; transform:rotate(var(--fr)); width:17px; opacity:0.75; }

/* Scatter: every fish darts off in its own direction and fades,
   the NOSE turned into the flight direction (rotate = atan2(dy,dx)
   of its translation — the artwork faces right). */
#home_fish.fled span{
    opacity:0;
    transition:transform 1.2s ease-in 0s, opacity 0.8s ease-in 0.35s;
}
#home_fish.fled span:nth-child(1){ transform:translate(-190px,110px) rotate(150deg); }
#home_fish.fled span:nth-child(2){ transform:translate(-120px,180px) rotate(124deg); }
#home_fish.fled span:nth-child(3){ transform:translate(60px,200px)   rotate(73deg);  }
#home_fish.fled span:nth-child(4){ transform:translate(-230px,60px)  rotate(165deg); }
#home_fish.fled span:nth-child(5){ transform:translate(30px,240px)   rotate(83deg);  }
#home_fish.fled span:nth-child(6){ transform:translate(180px,140px)  rotate(38deg);  }
#home_fish.fled span:nth-child(7){ transform:translate(240px,90px)   rotate(21deg);  }
#home_fish.fled span:nth-child(8){ transform:translate(110px,220px)  rotate(63deg);  }
#home_fish.fled span:nth-child(9){ transform:translate(200px,170px)  rotate(40deg);  }
#home_fish.fled span:nth-child(10){ transform:translate(255px,130px) rotate(27deg);  }
#home_fish.fled span:nth-child(11){ transform:translate(-60px,230px) rotate(104deg); }


/* Schwebe-Zustand (.waiting, vom Cursor-Waechter im Hero-Script):
   die Schwimmbahn ist sanft auf 0 gebremst, die Fische treiben
   minimal auf der Stelle (1-2px, leichte Nasendrehung) statt wie
   eingefroren zu stehen. Start/Ende exakt in der Basispose, daher
   kein Sprung; Tempi/Phasen pro Fisch versetzt. */
#home_fish.waiting span{
    animation:fish-hover 2.8s ease-in-out infinite;
}

#home_fish.waiting span:nth-child(2n){ animation-duration:3.4s; animation-delay:-1.1s; }
#home_fish.waiting span:nth-child(3n){ animation-delay:-1.9s; }

@keyframes fish-hover{
    0%,100%{ transform:translate(0,0)           rotate(var(--fr)); }
        30%{ transform:translate(1.4px,-1.6px)  rotate(calc(var(--fr) - 2deg)); }
        60%{ transform:translate(-1.2px,1.4px)  rotate(calc(var(--fr) + 2deg)); }
        80%{ transform:translate(0.8px,0.8px)   rotate(var(--fr)); }
}

/* .gone hides the container between flee and re-entry (script). */
#home_fish.gone{
    display:none;
}

/* Once fled, the swim loop stops too — an invisible box endlessly
   patrolling the page would keep eating hover events. */
#home_fish.fled{
    animation-play-state:paused;
    pointer-events:none;
}

@keyframes fish-swim{
      0%{ left:-12%;  top:8px;  animation-timing-function:ease-in-out; }
     11.6%{ left:3%;   top:44px; animation-timing-function:ease-in-out; }
     22.3%{ left:18%;  top:16px; animation-timing-function:ease-in-out; }
     34.8%{ left:35%;  top:52px; animation-timing-function:ease-in-out; }
     45.5%{ left:50%;  top:22px; animation-timing-function:ease-in-out; }
     57.9%{ left:66%;  top:48px; animation-timing-function:ease-in-out; }
     69.5%{ left:83%;  top:14px; animation-timing-function:ease-in-out; }
     82.8%{ left:104%; top:36px; }
    /* Parkzone: unsichtbarer Sprung nach links (beide Positionen
       offscreen) und dort ~10s warten, dann beginnt die Schleife
       mit dem Einschwimmen von links. */
     82.9%{ left:-12%;  top:8px;  }
    100%{ left:-12%;  top:8px;  }
}

/* --- Buckelwal ------------------------------------------------
   Tiefwasser-Silhouette UNTER dem Fischschwarm, zieht gemaechlich
   von rechts nach links (Artwork schaut nach rechts, daher
   scaleX(-1)). Der Flossenschlag steckt IM SVG (CSS-Animation in
   der Datei, laeuft auch als background-image). Wie #home_fish ein
   inertes Element: ohne dieses Stylesheet unsichtbar. */
#home_whale{
    position:absolute;
    top:140px;
    left:104%;
    width:405px;
    height:162px;
    z-index:-1;
    opacity:0.2;
    filter:blur(1.2px);
    transform:scaleX(-1);
    background:url(/images/steganos/products/sos/summer2026/whale.svg?v=4) no-repeat center / contain;
}

/* Der Wal schwimmt erst los, nachdem der Fischschwarm zum ERSTEN
   Mal verscheucht wurde (.on setzt das Hero-Script beim Fliehen).
   Ohne Interaktion bleibt er unsichtbar rechts geparkt. */
#home_whale.on{
    animation:whale-swim 150s linear infinite;
}

/* geradlinig leicht schraeg abtauchend ins offene Meer, dabei
   bis zum linken Rand auf 0.02 Opacity verblassend und auf 55%
   schrumpfend (Tiefen-Perspektive; scaleX(-1) = Blickrichtung links
   muss in jedem Frame mitgefuehrt werden) */
@keyframes whale-swim{
      0%{ left:104%; top:140px; opacity:0.2;  transform:scaleX(-1) scale(1);    }
     80%{ left:-16%; top:380px; opacity:0.02; transform:scaleX(-1) scale(0.55); }
   80.1%{ left:104%; top:140px; opacity:0.2;  transform:scaleX(-1) scale(1);    }
    100%{ left:104%; top:140px; opacity:0.2;  transform:scaleX(-1) scale(1);    }
}

@media (prefers-reduced-motion:reduce){
    #home_fish{
        animation:none;
        left:20%;
        top:20px;
    }
    #home_whale{
        animation:none;
        left:60%;
    }
}

/* --- Parasol wobble -------------------------------------------
   Direction-aware: the hero script measures from which side the
   pointer enters and sets --ax/--ay (the 3D tilt axis) per event.
   perspective + rotate3d genuinely tips the flat canopy in space —
   one side foreshortens, which reads as the umbrella rocking away
   from the push. Damped swing back to rest; the placement lives in
   --base so wobble and tuning never fight over `transform`. */
#hero_deco span.wobble{
    animation:parasol-wobble 0.9s ease-out;
}

@keyframes parasol-wobble{
      0%{ transform:var(--base) perspective(600px) rotate3d(var(--ax,0),var(--ay,1),0,0deg);    }
     18%{ transform:var(--base) perspective(600px) rotate3d(var(--ax,0),var(--ay,1),0,13deg);   }
     40%{ transform:var(--base) perspective(600px) rotate3d(var(--ax,0),var(--ay,1),0,-8deg);   }
     62%{ transform:var(--base) perspective(600px) rotate3d(var(--ax,0),var(--ay,1),0,4.5deg);  }
     82%{ transform:var(--base) perspective(600px) rotate3d(var(--ax,0),var(--ay,1),0,-1.5deg); }
    100%{ transform:var(--base) perspective(600px) rotate3d(var(--ax,0),var(--ay,1),0,0deg);    }
}

/* --- Right-side deco hover fix --------------------------------
   TWO full-width blocks are shifted right in default2026 and sit
   as transparent boxes on #hero_inner's z-index:1 ABOVE the deco:
   #hero_price_outer (left:370px, reaches ~+955px from centre) and
   #hero_product (left:500px, reaches ~+1075px, from ~y55 down).
   Together they swallowed the pointer over the blue parasol's
   lower half and the whole ball. (default2026 pulls the same trick
   itself: #hero_windows already carries pointer-events:none.)
   Only links actually need the mouse, so the boxes go transparent
   to events and any anchor inside opts back in. */
#hero_price_outer,
#hero_product{
    pointer-events:none;
}
#hero_price_outer a,
#hero_product a{
    pointer-events:auto;
}

/* On top of that, shrink #hero_product's box to its content
   (H1 + features end well inside the content zone) instead of
   full width — the invisible overhang disappears entirely.
   fit-content instead of inline-block: same shrink-wrap, but the
   box stays in BLOCK formatting, so no baseline whitespace nudges
   the price/button stack below. */
#hero_product{
    width:fit-content;
}

/* --- Beach ball roll ------------------------------------------
   Nudge on mouseenter: the hero script sets --mx/--my (unit vector
   AWAY from the pointer) and --sp (spin sign), then the ball rolls
   off a short way and rocks back to rest like in a shallow sand
   dip. translate() sits BEFORE var(--base) so the distances are
   real screen pixels (after the base scale(0.35) they would shrink
   to a third). Spin is matched to the distance for rolling without
   slipping: on-screen radius ~17.5px -> 14px of travel = ~46deg. */
#hero_deco span.roll{
    animation:ball-roll 2.8s ease-out;
}

@keyframes ball-roll{
      0%{ transform:translate(0,0) var(--base) rotate(0deg);
          animation-timing-function:ease-out; }
     34%{ transform:translate(calc(var(--mx,1)*14px),calc(var(--my,0)*14px)) var(--base) rotate(calc(var(--sp,1)*46deg));
          animation-timing-function:ease-in-out; }
     62%{ transform:translate(calc(var(--mx,1)*-5px),calc(var(--my,0)*-5px)) var(--base) rotate(calc(var(--sp,1)*-16deg));
          animation-timing-function:ease-in-out; }
     84%{ transform:translate(calc(var(--mx,1)*2px),calc(var(--my,0)*2px)) var(--base) rotate(calc(var(--sp,1)*7deg));
          animation-timing-function:ease-out; }
    100%{ transform:translate(0,0) var(--base) rotate(0deg); }
}

/* --- Fish overflow clip ---------------------------------------
   The swim loop exits at left:104% and the scatter throws fish up
   to 235px past the school box — both poke out of .mainbody's
   right edge and grew a page-wide horizontal scrollbar. clip cuts
   them off WITHOUT turning .mainbody into a scroll container
   (hidden first as fallback for pre-clip browsers). */
.mainbody{
    overflow-x:hidden;
    overflow-x:clip;
}

/* --- Sticky buy bar --------------------------------------------
   A CLONE of the hero buy button + chip, fixed to the bottom edge.
   The hero script shows it (.on) once the original button has
   scrolled out ABOVE the viewport and hides it again as soon as
   the three purchase options at the page bottom become visible —
   both directions, driven by two IntersectionObservers.
   Button only (the -25 chip stays in the hero); a click scrolls to
   the purchase options instead of jumping straight into the shop. */
#sos_stickybuy{
    position:fixed;
    left:50%;
    bottom:16px;
    z-index:9000;
    display:flex;
    align-items:center;
    gap:14px;
    transform:translate(-50%,240%);
    transition:transform 0.5s cubic-bezier(0.4,0,0.2,1);
    pointer-events:none;
}

#sos_stickybuy.on{
    transform:translate(-50%,0);
    pointer-events:auto;
}

/* The sticky button dresses like the GREEN purchase-option buttons
   (button.green in custom.css: #14a733, 28px bold, 15px/45px pads,
   radius 20, hover #14883d) instead of the hero's red gloss — the
   ID scope outranks the a.headerbutton/button_hover red rules. */
#sos_stickybuy a.headerbutton{
    position:static;
    background:#14a733;
    box-shadow:0 6px 18px rgba(31,58,82,0.30);
    border-radius:20px;
    font-size:28px;
    font-weight:bold;
    padding:15px 45px;
    white-space:nowrap;
    transition:background-color 0.5s ease;
}

#sos_stickybuy a.headerbutton:hover{
    background:#14883d;
}