/* summer2026_suite.css — SSS / SPM / SAFE-specific overrides ON TOP of the full SOS
   beach (summer2026.css), which the heroes now also load. Loaded LAST, so it wins.
   Server: <docroot>/scripts/css/summer2026_suite.css (dev + live mirror). DEV-only until
   approved. Hard-refresh (Ctrl+Shift+R) after edits.

   Seit 2026-07-15 ist der komplette Strand inkl. Palmen (d1/d18), Familie (d7-d9),
   Produktbox (d17), Ball-Position und Easter Egg in summer2026.css GETEILT mit SOS.
   Hier leben nur noch die echten Produkt-Deltas: Checkmark-Farbe, Packshot-Cluster,
   SSS-Boxbild, gruener Bottom-Button + Gold-Chip, Faecher-Captions. */

/* Check marks in BRAND turquoise (SOS colours them red). The hero markup pins them to
   white via inline color:#fff !important; -webkit-text-fill-color beats that CSS-only. */
#hero_features span{
    color:#4dc9dc;
    -webkit-text-fill-color:#4dc9dc;
}

/* Packshots: KEEP the default-2026 cluster. summer2026.css fans them out as SOS's
   iPad(−4°)/iPhone(+4°)/window trio, which mangles SSS/SPM/SAFE's three window/phone
   screenshots. Restore the default positions (loaded last → wins); soft cast shadow for
   the beach instead of the white glow, drop-shadow reset. */
#hero_outer:not(.glitch-bg) #hero_packshots img.shot{
    height:260px;
    box-shadow:0 10px 30px rgba(10,40,70,0.20);
    filter:none;
}
/* z-order = default2026: Safe (shot1) back, PM (shot2) middle, Privacy-Suite (shot3) front */
#hero_outer:not(.glitch-bg) #hero_packshots img.shot1{ left:-25px; top:75px;  height:260px; transform:rotate(-2deg);  transform-origin:bottom left;  z-index:1; }
#hero_outer:not(.glitch-bg) #hero_packshots img.shot2{ left:60px;  top:22px;  height:260px; transform:rotate(1.5deg); transform-origin:top right;    z-index:2; }
#hero_outer:not(.glitch-bg) #hero_packshots img.shot3{ left:210px; top:160px; height:200px; transform:rotate(2deg);   transform-origin:bottom right; z-index:3; }
#hero_outer:not(.glitch-bg) #hero_packshots img.shot1:hover{ transform:rotate(0deg) scale(1.2); }
#hero_outer:not(.glitch-bg) #hero_packshots img.shot2:hover{ transform:rotate(0deg) scale(1.2); }
#hero_outer:not(.glitch-bg) #hero_packshots img.shot3:hover{ transform:rotate(0deg) scale(1.65); }

/* d17-Produktbox im Sand: Geometrie/Egg-Verhalten kommen aus summer2026.css —
   hier nur das SSS-Boxbild statt der SOS-Box (Default). */
#hero_deco .d17{
    background-image:url(/images/steganos/products/sos/summer2026/box_sss_de.webp);
}

/* Fächer-Hover-Captions: Basis-.shotcap + Hover-Fade (img.shotN:hover ~ .capN)
   kommen aus summer2026.css; hier nur die SSS-Fächer-Positionen. Zentriert über
   dem GEZOOMTEN Hover-Extent jedes Shots, vertikal an der nicht-wachsenden Kante:
   Der gehoverte Shot kommt per default2026-Hover auf z-index:5 nach VORN und
   zoomt — daher über dem GEZOOMTEN Extent zentriert (Center-x = fixe Kante ± Zoom):
     shot1 Safe  1.2 @bottom-left  -> 428x312, unten @340, Center-x 189
     shot2 PM    1.2 @top-right    -> 376x312, OBEN  @0,   Center-x 195
     shot3 Suite 1.65 @bottom-right-> 304x330, unten @360, Center-x 242
   cap1 (Safe) + cap2 (PM) stehen OBEN, cap3 (Suite) UNTEN. */
/* Bottom-Offer-Button (#button2) GRÜN wie safe/spm (default2026 #14a733) -
   summer2026.css färbt a.headerbutton rot; hier nur der untere Button zurück auf
   Brand-Grün (Hero-Button bleibt rot). ID-Scope schlägt das a.headerbutton-Rot. */
#button2.beach a.headerbutton{
    background:#14a733;
    box-shadow:0 6px 20px rgba(20,167,51,0.35), inset 0 1px 0 rgba(255,255,255,0.30);  /* grüner Glow statt rot */
}
#button2.beach a.button_hover:hover,
#button2.beach a.button_hover.chipglow{ background:#14883d; }

/* Bottom-Chip EXAKT wie der Header-Chip: Silber-Basis + Gold-::before-Fade,
   <b> auf z2 über dem Gold, eigener Kauflink (a::after = Klickfläche);
   .gold/.chipglow werden vom Hero-Script gesetzt (Button<->Chip-Verbund).
   Position bleibt oben-rechts am Button (top:-50px/left:-40px wie zuvor inline). */
#button2.beach > span{
    position:relative; top:-50px; left:-40px;
    padding:10px 20px; font-size:20px; font-weight:bold; border-radius:20px;
    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;
    transition:color 0.45s ease, box-shadow 0.45s ease, text-shadow 0.45s ease;
}
#button2.beach > 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;
}
#button2.beach > span b{ position:relative; z-index:2; }
#button2.beach > span a{ color:inherit; text-decoration:none; }
#button2.beach > span a::after{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:3; border-radius:20px; }
#button2.beach > a:hover + span,
#button2.beach > span:hover,
#button2.beach > 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);
}
#button2.beach > a:hover + span::before,
#button2.beach > span:hover::before,
#button2.beach > span.gold::before{ opacity:1; }

#hero_packshots .cap1{ left:9px;  top:-7px;  bottom:auto; }  /* Safe-Caption OBEN (umgeht Suite-Unterlauf) */
#hero_packshots .cap2{ left:5px;  top:-10px; bottom:auto; }
#hero_packshots .cap3{
    left:62px; top:366px; bottom:auto;
    /* steht unten IM WASSER - weiss statt Navy, leichter dunkler Schein
       gegen helle Schaumkronen */
    color:#fff;
    text-shadow:0 1px 6px rgba(10,40,70,0.45);
}