@charset "UTF-8";
/* ===========================================================
   Summer 2026 campaign overrides — steganos2027
   Loaded AFTER default2027.css (product heroes) — additive only.
   HOME loads this directly (no default2027.css equivalent there).
   To revert after the campaign: stop loading this file (redeploy
   the default2027/ hero+body / home/home_de.html sources, which
   carry no <link> to this stylesheet) — nothing else to undo.
   =========================================================== */

/* ---------------------------------------------------------------
   Browserbar (nero.com-Muster): schlichter Slide-down direkt unter
   der Mainnav — sitzt im normalen Fluss ganz oben im Hero-Modul,
   kein position:fixed, scrollt mit der Seite weg. Markup + Countdown-
   /Close-Logik lebt in der Kampagnen-Hero-Datei selbst (JS braucht
   die Produkt-/Preis-Details je Seite).
   --------------------------------------------------------------- */
/* position:relative ist der Bezug fuer den Lichtstreif weiter unten — die
   Leiste selbst traegt ihn, weil ::before und ::after am inneren Element
   inzwischen die Palmen sind. `.pinned` setzt spaeter sticky, das ist
   ebenfalls ein Positionierungskontext, beide Zustaende passen also. */
/* ⚠️ Die Leiste haelt ihren Platz von Anfang an frei — sie waechst NICHT mehr
   aus `max-height:0` heraus (BE-1659, 2026-08-12).

   Vorher tat sie genau das: das Hero-JS setzte 300 ms nach `load`
   `style.maxHeight` auf die Inhaltshoehe, die Leiste fuhr ueber eine halbe
   Sekunde auf — und schob dabei die ganze Seite nach unten. Weil das animiert
   geschah, war es nicht ein Sprung, sondern ueber 80 kleine: **0,091 der
   0,147 CLS** stammten allein daher, bei einem Grenzwert von 0,1. Gemessen am
   28-Tage-Feldfenster von CrUX ist das der Unterschied zwischen bestanden und
   nicht bestanden.

   Jetzt steht die Leiste von Anfang an fertig da — kein Aufklappen mehr.

   ⚠️ Der erste Anlauf am selben Tag behielt die Bewegung: Huelle sofort auf
   voller Hoehe, Inhalt faehrt per `transform` herein. Messtechnisch ging das
   auf (CLS 0,147 -> 0,055), sah aber schlecht aus — das Hero-JS klappt erst
   300 ms nach `load` auf, also stand rund 1,8 Sekunden lang ein leerer
   Streifen zwischen Navigation und Hero. Reservierter Platz, den nichts
   fuellt, ist schlimmer als gar keine Animation (Nutzerurteil 2026-08-12).

   Deshalb ohne Einfahren. Der Countdown laeuft ohnehin sofort — `tick()` steht
   im Hero-JS direkt im IIFE, nicht im `load`-Handler; die Leiste zeigt vom
   ersten Bild an die richtige Zeit. Was das Hero-JS spaeter noch auf
   `max-height` setzt, ist genau die Hoehe, die sie ohnehin hat: wirkungslos.

   `transition:max-height` bleibt stehen — sie traegt weiterhin das ZUklappen
   ueber den Schliessen-Knopf, der `style.maxHeight = '0'` setzt. Dort soll der
   Platz ja wirklich verschwinden. */
.promobar{ position:relative; overflow:visible; z-index:1; transition:max-height .5s ease; }
/* ⚠️ Der geschlossene Zustand braucht seit dem Wegfall von `max-height:0` eine
   eigene Regel. Das Hero-JS merkt sich das Schliessen in der `sessionStorage`
   und steigt beim naechsten Seitenaufbau in seiner ERSTEN Zeile aus:

       if (sessionStorage.getItem(KEY_CLOSED)) { return; }

   Danach registriert es nichts mehr — keinen Countdown, keinen
   Schliessen-Knopf, und `style.maxHeight` setzt es auch nicht. Solange die
   Huelle `max-height:0` aus dem CSS trug, blieb die Leiste trotzdem
   verschwunden. Ohne diesen Startwert stand sie sichtbar, aber tot da: leerer
   Countdown `--:--:--`, X ohne Funktion (gefunden vom Nutzer 2026-08-12).
   Gesetzt wird die Klasse in user.js, das denselben Schluessel liest.
   `transition:none`, damit sie nicht erst sichtbar zuklappt. */
.promobar.promobar-zu{ max-height:0; overflow:hidden; transition:none; }

/* ---- Wandernder Lichtstreif ------------------------------------------
   Simuliert das Aufblitzen einer Metallplatte, wenn man den Kopf bewegt:
   haelt kurz ruhig, blitzt einmal diagonal durch, pausiert wieder.

   Sass frueher auf .promobar-inner::before. Weil dort jetzt die Palme liegt,
   wandert er eine Ebene nach aussen. Der Haken: die Klassen `shine-intro`
   und `shine-loop` setzt das Hero-JS weiterhin auf das INNERE Element, und
   das JS steckt in achtzig Artikeln. Statt es anzufassen, greift die Regel
   per :has() von aussen darauf zu. Faellt :has() aus (sehr alte Browser),
   bleibt der Glanz weg — die Leiste funktioniert unveraendert.

   ⚠️ `height:100%`, nicht die frueheren 160% mit `top:-30%`. Die Ueberhoehe
   war moeglich, solange das INNERE Element ihn beschnitten hat. Seit die
   Huelle im offenen Zustand `overflow:visible` traegt (fuer den Palmen-
   Ueberhang), gibt es diesen Beschnitt nicht mehr: der Streifen stand oben
   und unten aus der Leiste heraus und lief sichtbar durch den Hero. Bei
   einer 64px flachen, ueber 1000px breiten Leiste ist die Diagonale ohnehin
   so flach, dass die Ueberhoehe optisch nichts beitrug. */
.promobar::before{
    content:"";
    position:absolute; top:0; left:-90%; z-index:1;
    width:70%; height:100%;
    background:linear-gradient(315deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.1) 22%,rgba(255,255,255,.6) 50%,rgba(255,255,255,.1) 78%,rgba(255,255,255,0) 100%);
    pointer-events:none;
}
.promobar:has(.shine-intro)::before{ animation:promobar-shine-intro 2.2s ease-in-out 1; }
.promobar:has(.shine-loop)::before{  animation:promobar-shine 10s ease-in-out infinite; }
/* ⚠️ Bewegt wird per `transform`, NICHT per `left` (BE-1659, 2026-08-12).
   `left` ist eine Layout-Eigenschaft: jeder Zwischenschritt der Animation
   zaehlte als Layout-Verschiebung. Nachgemessen war dieser Streifen allein
   fuer **0,054 der 0,056 CLS** verantwortlich, die nach dem Umbau der Leiste
   noch uebrig waren — mit abgeschalteter Animation fiel der Wert auf 0,0021.
   `transform` laeuft im Compositor und beruehrt das Layout nicht.

   Die Prozentwerte sind nicht dieselben, weil sie sich auf Verschiedenes
   beziehen: `left` auf die Breite der Leiste, `translateX` auf die
   Eigenbreite des Streifens. Der Streifen ist `width:70%`, der Weg geht von
   -90% bis 135%, also 2,25 Leistenbreiten -> 2,25 / 0,7 = 321,43 % der
   Eigenbreite. `left:-90%` bleibt als Startpunkt stehen. Wer eine der beiden
   Zahlen aendert, muss diese Rechnung nachziehen. */
@keyframes promobar-shine-intro{
    0%{ transform:translateX(0); }
    100%{ transform:translateX(321.43%); }
}
@keyframes promobar-shine{
    0%,55%{ transform:translateX(0); }
    85%{ transform:translateX(321.43%); }
    100%{ transform:translateX(321.43%); }
}
@media (prefers-reduced-motion:reduce){
    .promobar:has(.shine-intro)::before,
    .promobar:has(.shine-loop)::before{ animation:none; }
}
/* Andockt unter die gepinnte Mainnav (html.s27-nav-pinned, siehe user.js),
   solange sie nicht geschlossen wurde. top wird per JS auf die aktuelle
   Navhoehe gesetzt, da die Nav responsiv unterschiedlich hoch ist. */
/* sticky statt fixed: bleibt im Fluss (Platz bleibt reserviert) -> kein
   Sprung der Seite im Moment des Andockens, anders als bei fixed. */
.promobar.pinned{ position:sticky; z-index:1999; }
/* Silber mit angedeuteten Palmenschatten (Nutzerentscheidung 2026-08-11).
   Das Blau des alten Verlaufs ist raus, es bleibt reines Weiss -> Silbergrau:
   derselbe Verlauf wie das Etikett "PRIVACY NEWSLETTER" (.dl-nl::after) und
   der Hero-Chip der Produktseiten, also kein neues Metall im Haus.

   ⚠️ Warum NICHT die waermere Sandfassung, die zwischendurch drin war: auf der
   SPM-Seite geht Sand nahtlos in den goldenen Markenhintergrund ueber, die
   Leiste verliert dort ihre Kante. Genau davor warnte schon der Kommentar zur
   Orange-Fassung. Silber grenzt sich gegen alle vier Produktfarben ab.

   Das Metall macht nicht der Verlauf, sondern die beiden Innenschatten: oben
   eine helle Lichtkante, unten eine dunkle. Ohne sie bleibt es graues Papier. */
.promobar-inner{
    position:relative;
    overflow:hidden;
    display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap;
    padding:14px 56px; text-align:center; font-family:'PT Sans'; color:#2f3b47;
    background:linear-gradient(160deg,#ffffff 0%,#e9eef4 34%,#c9d2dc 68%,#aab5c2 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(90,104,120,.40);
}

/* ---- Palmwedel links und rechts --------------------------------------
   Bewusst als ::before/::after statt als Markup: die Leiste steckt in den
   Kampagnen-Heroes von vier Produkten in je zwanzig Sprachen — zwei
   zusaetzliche <span> wuerden achtzig Artikel-Deploys kosten. So bleibt es
   bei dieser einen Datei.

   ⚠️ palm5.svg / palm4c.svg sind KRONEN IN DRAUFSICHT, keine Palmen mit
   Stamm. Deshalb wird die Krone auf 420px aufgeblasen und ihr Mittelpunkt
   AUSSERHALB der Leiste geparkt, sodass nur einzelne Wedel hereinragen —
   die ganze Krone in das 64px hohe Band gequetscht ergibt einen gruenen Klumpen.

       Mittelpunkt = (+20 | -50) zur Leisten-Oberkante, Wedelradius 210px
       -> reicht rund 160px in die Leiste und 230px weit nach innen

   Wer die Groesse aendert, muss `top` mitziehen: top = -(H/2 + 5).

   ⚠️ `top` gilt in JEDEM Zustand gleich. Es stand hier einmal ein zweiter,
   45px tieferer Wert fuer die offene Leiste — und weil die Klasse
   `.promobar-offen` erst NACH der Aufklapp-Animation gesetzt wird, sprangen
   die Wedel im Moment des Ausfahrens sichtbar nach unten. Zustandsabhaengige
   Geometrie gehoert hier nicht hin; unterschiedlich ist nur der Beschnitt.

   ⚠️ Als BILD einbinden, nicht als Maske (Nutzerkorrektur 2026-08-11). Die
   Wedel hingen zwischenzeitlich an `mask-image` mit `background:#256a42` —
   das stammte noch aus der Schatten-Fassung, wo eine Silhouette gewollt war.
   Eine Maske wirft die Farbinformation weg: heraus kam ein durchgehend
   einfarbiges Gruen, waehrend dieselben Dateien auf der Startseite ihre
   Schattierungen, Aderung und die braunen Blattansaetze zeigen. Als
   `background-image` sind es exakt die Palmen des Beach-Heros. */
.promobar-inner::before,
.promobar-inner::after{
    content:"";
    /* z-index 2: ueber dem Lichtstreif (1), unter Text und Knopf (3/4).
       Der Streifen soll UNTER den Wedeln durchlaufen, als laege das Blatt auf
       dem Metall (Nutzerwunsch 2026-08-12) — vorher lag er darueber und
       blitzte quer durchs Blatt. Die vollstaendige Folge, von unten:
       Metall-Verlauf (Hintergrund von .promobar-inner) - Lichtstreif (1) -
       Palmwedel (2) - Text und Knopf (3) - Schliessen-X (4). */
    position:absolute; top:-215px; z-index:2;
    width:420px; height:420px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center;
    pointer-events:none;
}
.promobar-inner::before{
    left:-190px; transform:rotate(8deg);
    background-image:url(/images/steganos/home/summer2026/palm5.svg);
}
.promobar-inner::after{
    right:-190px; transform:rotate(-10deg);
    background-image:url(/images/steganos/home/summer2026/palm4c.svg);
}
/* ---- Ueberhang in den Hero -------------------------------------------
   Die Wedel sollen unten aus der Leiste herausragen (Nutzerwunsch, 100px).
   Nur DIESE eine Kante darf offen sein — nach oben liefen sie sonst in die
   Navigation. `clip-path: inset(oben rechts unten links)` mit negativem
   Wert unten macht genau das; `overflow` kann es nicht, es kennt keine
   einzelne Kante.

   ⚠️ Das reicht allein NICHT: die Huelle `.promobar` traegt ihrerseits
   `overflow:hidden`, und das ist kein Schmuck, sondern der Slide-down (das
   Hero-JS klappt sie ueber `max-height` auf). Wer es pauschal entfernt,
   sieht die Leiste im geschlossenen Zustand offen stehen. Die Freigabe
   passiert deshalb erst NACH dem Aufklappen, gesteuert aus user.js ueber
   die Klasse `.promobar-offen` — siehe dort. Ohne user.js bleibt schlicht
   der Ueberhang weg, die Leiste funktioniert unveraendert. */
/* z-index:1 ist nicht Kosmetik: der Hero (.s27-hero-wide) steht NACH der
   Leiste im DOM, ist `position:relative` und hat einen deckenden Hintergrund.
   Ohne Stapelwert malt der Browser ihn zuletzt — der Ueberhang lag zwar da,
   war aber verdeckt (nachgemessen 2026-08-11). `.pinned` liegt mit 1999
   ohnehin darueber.

   ⚠️ Beides gilt seit dem 2026-08-12 SOFORT und nicht mehr erst mit der Klasse
   `.promobar-offen`. Die setzte user.js nach `DOMContentLoaded`, also nach dem
   ersten Bild — sichtbare Folge: die Palmwedel erschienen zuerst HINTER dem
   Hero und sprangen einen Wimpernschlag spaeter nach vorn (Nutzerbefund).
   Solange die Leiste erst 1,8 s spaeter aufklappte, fiel das niemandem auf;
   seit sie sofort dasteht, schon. Die Zustaende sind darum umgedreht: offen
   mit Ueberhang ist der Normalfall, geschlossen die Ausnahme. */
/* ⚠️ Der Beschnitt sitzt auf der HUELLE, nicht auf `.promobar-inner`
   (2026-08-12). `clip-path` macht ein Element zum eigenen Stapelkontext —
   lag er innen, blieben die Palmwedel darin gefangen und konnten den
   Lichtstreif auf `.promobar::before` nicht ueberdecken, egal welchen
   `z-index` sie trugen. Aussen beschnitten stehen Wedel und Streifen im
   selben Kontext und lassen sich ordnen (siehe Stapelfolge unten).
   Nebeneffekt, erwuenscht: die linke und rechte Kante beschneiden jetzt auch
   den Lichtstreif, der vorher an den Leistenenden hinauslief. */
.promobar{ clip-path:inset(0 0 -100px 0); }
.promobar-inner{ overflow:visible; }
/* Geschlossen — beim Seitenaufbau aus der sessionStorage. Hart, ohne
   Uebergang: hier war die Leiste nie sichtbar. */
.promobar.promobar-zu{ overflow:hidden; z-index:auto; clip-path:none; }
/* Schliesst gerade — der Klick aufs X. Den Ueberhang sofort einziehen, damit
   keine Wedel neben der zusammenfahrenden Leiste stehenbleiben; die Hoehe
   animiert das inline gesetzte `max-height` ueber die Transition oben. */
.promobar.promobar-schliesst{ overflow:hidden; z-index:auto; clip-path:none; }
/* ⚠️ Hier stand bis zum 2026-08-12 eine `clip-path`-Animation
   (`promobar-wedel`, .35s), die den Ueberhang weich herausfaltete. Sie hatte
   ihren Sinn, solange die Leiste erst 1,8 s nach dem Seitenaufbau aufklappte:
   ohne sie waeren die unteren 100px schlagartig erschienen, mitten in eine
   schon stehende Seite hinein.
   Seit die Leiste sofort fertig dasteht, gibt es diesen Moment nicht mehr —
   die Palmen fuhren stattdessen sichtbar nach unten aus, obwohl ringsum nichts
   mehr passierte. Das sah seltsam aus (Nutzerurteil), also faellt die
   Animation weg: der Ueberhang ist vom ersten Bild an da.
   Die `prefers-reduced-motion`-Ausnahme entfaellt damit ebenfalls, es bewegt
   sich hier nichts mehr. */

/* Ab hier wird die Mitte zu schmal: die Wedel liefen sonst unter den Text. */
@media (max-width:900px){
    .promobar-inner::before,.promobar-inner::after{ display:none; }
}

/* Text und Knopf ueber die Deko heben. Die Wedel liegen seit dem 2026-08-12
   auf 2, damit der Lichtstreif unter ihnen durchlaeuft — deshalb hier 3 und
   fuer das X 4 (vorher 1 und 2). */
.promobar-text{ position:relative; z-index:3; font-size:18px; font-weight:700; letter-spacing:.4px;
    text-shadow:0 1px 0 rgba(255,255,255,.55); }
/* Countdown: das Marken-Rot #e4001f kommt am dunklen Ende des Verlaufs
   (#aab5c2) nur auf 2,3:1 — es steht dort seit jeher zu hell. #8f0014 ist
   derselbe Farbeindruck und erreicht 4,6:1. Schwelle 4,5:1, siehe die
   BFSG-Hinweise in user.css. */
.promobar-cd{ white-space:nowrap; color:#8f0014; }
/* Knopfgruen = das Gruen der Kaufen-Knoepfe im Hero (`.headerbutton`,
   `.buybutton`): #14a733, nachgemessen an der Produktseite. Leiste und Seite
   zeigen damit dasselbe Kaufsignal — Nutzerentscheidung gegen das dunklere
   #14883d des Cookie-Banners, das mit weisser Schrift zwar 4,55:1 statt
   3,2:1 erreicht, hier aber wie ein zweiter, fremder Knopf gewirkt haette. */
.promobar-cta{ position:relative; z-index:3; display:inline-flex; align-items:center; gap:8px; background:#14a733; color:#fff; font-weight:700; font-size:18px; letter-spacing:.4px; padding:8px 18px; border-radius:10px; text-decoration:none; white-space:nowrap; box-shadow:0 10px 24px rgba(20,167,51,.3); }
.promobar-cta:hover{ background:#14883d; color:#fff; }
/* Preisschilder statt Einkaufswagen (Nutzerwunsch 2026-08-12). Der schwebende
   Kauf-Knopf, der beim Scrollen von unten hereinfaehrt, macht dasselbe — er
   ist ein Klon des Hero-Knopfes und tauscht das Symbol per JS aus
   (`ci.className = 'fa fa-tags'`). Hier geht das nicht auf demselben Weg: der
   Knopf steckt im Artikel-Markup, und das liegt in 140 Kampagnen-Heroes.

   Also im CSS. Font Awesome 6 haelt sein Zeichen in der Variablen `--fa`, die
   `content` dann ausliest — es genuegt, sie zu ueberschreiben. `\f02c` ist
   `fa-tags`, nachgesehen in der ausgelieferten joomla-fontawesome.min.css
   (der Einkaufswagen dort ist `\f218`). Beide sind `solid`, die Schriftart
   bleibt also dieselbe.

   Bewusst nicht per JS wie beim schwebenden Knopf: der laeuft erst nach
   `DOMContentLoaded`, hier saehe man den Wagen kurz aufblitzen. */
.promobar-cta .fa{ --fa:"\f02c"; position:relative; top:1.5px; }
/* Die 1,5px sind kein Augenmass, sondern der gemessene Unterschied zum
   schwebenden Knopf (Nutzerbefund 2026-08-12: "1px zu hoch"). Beide Knoepfe
   richten ihr Symbol verschieden aus:

       Leiste     `align-items:center`, Knopf 36px hoch -> Symbol exakt auf der
                  geometrischen Mitte (gemessen: 0,0)
       schwebend  `align-items:normal` + `inline-block`, Knopf 43px -> Symbol
                  sitzt auf der Schriftlinie, also 1,5px unter der Mitte

   Die geometrische Mitte ist rechnerisch korrekt und sieht neben Text
   trotzdem zu hoch aus — Grossbuchstaben haben ihre optische Mitte weiter
   unten. Angeglichen wird deshalb die Leiste, nicht der schwebende Knopf. */
/* ⚠️ Das × sitzt bei `right:18px` — und damit MITTEN auf dem rechten Wedel:
   der reicht von der Kante bis 230px nach innen und ist an dieser Stelle
   dicht. Dunkelgrau auf Dunkelgruen sind 1,75:1, praktisch unsichtbar
   (nachgemessen an einem 6-fach vergroesserten Ausschnitt). Weiss auf dem
   Wedel sind 6,5:1.

   Der Schatten faengt die Luecken zwischen den Blattfingern ab, wo stellen-
   weise das helle Metall durchscheint. */
.promobar-close{ position:absolute; top:50%; right:18px; transform:translateY(-50%); z-index:4; background:transparent; border:0; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); opacity:.85; font-size:22px; line-height:1; cursor:pointer; padding:0 4px; }
.promobar-close:hover{ opacity:1; }
/* Unter 900px sind die Wedel ausgeblendet — dort laege Weiss auf hellem
   Silber (2,08:1) und waere ebenso unsichtbar. Also zurueck auf Dunkel
   (5,5:1). Die Farbe des × haengt an der Deko, nicht am Geschmack: wer den
   Umbruchpunkt der Wedel verschiebt, muss diesen hier mitziehen. */
@media (max-width:900px){
    .promobar-close{ color:#2f3b47; text-shadow:none; opacity:.65; }
}

/* Der Metall-Glanz sitzt jetzt auf .promobar::before (eine Ebene weiter
   aussen), weil ::before und ::after am inneren Element die Palmen sind. */

/* =================================================================
   HOME Beach-Hero — portiert & vereinfacht aus steganos2021
   products/sos/summer2026/summer2026.css (dort seit 2026-07-13 live
   erprobt). V1: Wellen+Schaum, Palmen (Boe-Hover), Sonnenschirme,
   Ball (Roll-Hover), Seesterne, Handtuch, Schnorchelmaske, Fuss-
   spuren, Fischschwarm (Flucht-Hover), Wal (weckt bei erster Fisch-
   Flucht). NICHT uebernommen (Assets nur auf dem 2021er-Server,
   nicht lokal gespiegelt): Familie auf Liegen, Produktbox-Egg,
   Kokosnuss-Egg, Schirm-Wobble.
   ================================================================= */
/* Der site-weite Weltkarten-Parallax-Hintergrund (#s27home::before, siehe
   user.css "HOME-Hintergrundbild mit Parallax") passt nicht zum Beach-Look
   und wird fuer die Sommerkampagne komplett deaktiviert (User-Wunsch). */
#s27home::before{display:none}
/* Full-Bleed-Beach-Hero soll direkt unter der Nav anschliessen. Das Template
   reserviert normalerweise oben Luft am .container-component/.site-grid
   (fuer gewoehnliche Inhaltsseiten passend) - bei #s27home sichtbar als
   weisser Spalt vor dem Sand, seit die Weltkarte oben nicht mehr durchscheint. */
body:has(#s27home) .site-grid,
body:has(#s27home) .container-component{margin-top:0 !important;padding-top:0 !important}
/* Der eigentliche Spalt: Cassiopeia gibt JEDEM ersten Kind von .container-
   component per Basisregel `margin-top:1em`, auch wenn es (wie hier)
   #system-message-container ist - leer, aber trotzdem mit Aussenabstand.
   .container-component selbst stand schon auf 0 (s.o.), die Luecke sass also
   ein Level tiefer. ⚠️ Cassiopeia setzt margin-top:1em GLEICH ZWEIMAL - einmal
   auf :first-child (hier #system-message-container), UNABHAENGIG davon auch
   auf jedes weitere Kind ueber :first-child~*+* (hier <main>, das 2. Kind
   traegt seinen eigenen margin-top, nicht nur "geerbt" vom ersten) - beide
   Selektoren muessen ueberschrieben werden, sonst bleibt <main> selbst um 1em
   verschoben. */
body:has(#s27home) .container-component>*{margin-top:0 !important}

#s27home .hero{
  /* z-index:0 (statt auto) ist noetig, damit .hero einen EIGENEN Stapelkontext
     aufmacht - sonst "entkommen" die Deko-Kinder mit z-index bis 4 (Palmen etc.)
     ihrem lokalen Rahmen und werden GLOBAL mit .scen-sec verglichen, das selbst
     kein z-index hat -> Welle/Deko lagen dann ueber den Karten, unabhaengig von
     der DOM-Reihenfolge. */
  position:relative;z-index:0;overflow:hidden;min-height:520px;padding:0;text-align:center;
  /* Full-bleed-Breakout: die Home sitzt in einer schmaleren Content-Spalte
     (Joomla-Template-Container), der Strand muss aber ueber die GANZE
     Viewport-Breite gehen, nicht nur innerhalb dieser Spalte. */
  width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  background:
    radial-gradient(ellipse at 50% -10%,rgba(255,255,255,.28),transparent 62%),
    linear-gradient(180deg,#f1cb8a 0%,#efc684 45%,#e9ba76 60%,#dda765 68%,#d29855 73%,#d29855 100%);
}
#s27home .hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:24px;
  background:linear-gradient(to top,#2f77a8 0,#2f77a8 5px,rgba(47,119,168,0) 24px);
  z-index:1;pointer-events:none;
}
#s27home .hero-content{position:relative;z-index:2;padding:40px 24px 200px;max-width:1320px;margin:0 auto}

/* Sea-Fade-Fortsetzung (portiert aus steganos2021 .mainbody-Regel): das
   Meer läuft optisch unter dem Hero weiter und löst sich nach unten in
   Weiß auf, bevor die naechste Sektion beginnt. Gleicher Full-Bleed-
   Breakout wie der Hero, sonst zeigt die Fade nur die schmale Spalte. */
#s27home .scen-sec{
  position:relative;z-index:1;
  width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;
  padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);
  padding-top:20px;
  /* Zieht die GANZE Sektion (Ueberschrift + Karten) hoch ueber das untere Ende
     der Welle - malt im DOM NACH .hero, liegt also automatisch darueber, kein
     z-index noetig. Ueberschrift landet auf Wellenhoehe, Karten folgen direkt
     danach (User-Wunsch: beide zusammen hoch, nicht nur die Ueberschrift).
     KEIN eigener Hintergrund mehr hier: die ECHTE animierte Welle aus .hero
     soll im Ueberlappungsbereich durchscheinen, nicht von einem Fade-Verlauf
     zugedeckt werden. */
  margin-top:-170px;
  /* Sea-Fade wie auf LIVE (.mainbody-Muster): die ersten 170px bleiben
     TRANSPARENT - das ist genau die Ueberlappungszone mit .hero, wo die
     ECHTE animierte Welle durchscheinen soll. Erst AB 170px (= dort, wo
     .hero tatsaechlich endet) beginnt der Verlauf, farblich nahtlos an die
     Welle anschliessend (#2f77a8 = deren Tiefwasser-Farbe), und faedet dann
     nach unten ins Weisse aus - kein harter Schnitt mehr auf Weiss. */
  background:linear-gradient(180deg,
      transparent 0, transparent 170px,
      #2f77a8 170px, #548fba 250px, #9ac4da 360px, #d9eaf3 470px, rgba(255,255,255,0) 570px
    ) no-repeat top center;
}
/* Angebots-Stoerer als Kreidetafel der Strandbar. Vorher war es eine blaue
   Pille mit Schlagschatten - also exakt die Formensprache der beiden echten
   CTA-Knoepfe zwei Zeilen darunter, weshalb sie sich als toter Button las
   (Nutzerbefund). Holzrahmen + Schiefer + Kreideschrift sind ein Gegenstand
   und kein Bedienelement; 1 Grad Schraeglage und die zwei Schraubenkoepfe in
   den oberen Rahmenecken nehmen den Rest an UI-Anmutung raus.
   Die Aenderung ist rein visuell, das Markup bleibt unangetastet - sie gilt
   damit ohne Artikel-Deploy fuer alle 20 Sprachen. Einzige Mitzieh-Pflicht:
   der ?v=-Stempel am <link> der Home-Artikel, denn diese Datei wird mit
   max-age=604800 (7 Tage) ausgeliefert. */
#s27home .hero-offer{
  display:inline-block;position:relative;margin:0 0 18px;padding:12px 34px 13px;
  border:7px solid #b0713a;border-radius:5px;
  background:
    radial-gradient(ellipse at 30% 25%,rgba(255,255,255,.07),transparent 60%),
    linear-gradient(180deg,#3b474d,#2a343a);
  box-shadow:0 7px 16px rgba(60,40,10,.34),inset 0 0 22px rgba(0,0,0,.45);
  color:#f7f3e6;font-size:21px;font-weight:700;letter-spacing:1.2px;
  text-shadow:0 0 4px rgba(255,255,255,.28);
  transform:rotate(-1deg);
}
/* Schraubenkoepfe: sitzen bewusst IM Holzrahmen (top/left negativ), der
   Bezugsrahmen absolut positionierter Kinder ist die Padding-Box. */
#s27home .hero-offer::before,#s27home .hero-offer::after{
  content:"";position:absolute;top:-4px;width:5px;height:5px;border-radius:50%;
  background:#e6d3ae;box-shadow:0 1px 1px rgba(0,0,0,.4);
}
#s27home .hero-offer::before{left:-4px}
#s27home .hero-offer::after{right:-4px}
/* Font-Deckel abgesenkt (78px->68px): clamp() skaliert mit der VIEWPORT-Breite,
   nicht mit der jetzt bei 1320px gedeckelten Content-Breite - ab ~1582px
   Fensterbreite war der Font schon am Maximum, waehrend der Container fix
   blieb -> Umbruch. Kleinerer Deckel passt sicher in 1320px. */
#s27home .hero h1{color:#0d2b45;background:none;-webkit-text-fill-color:#0d2b45;text-shadow:none;font-size:clamp(36px,4.4vw,68px)}
#s27home .hero p{color:#1c3b57}
/* Ueberschrift+Unterzeile in .scen-sec liegt jetzt ueber der Welle statt auf
   weiss - das helle Grau (--muted) ging dort fast unter. Dunkles Navy wie im
   Hero-Untertitel statt dessen. */
#s27home .scen-sec .sec-head p{color:#0d2b45}
#s27home .scen-sec .sec-head p a{color:#0a2342}
/* Rabatt-Badge (Karten + Vergleichstabelle): kein roter Kreis mehr - der
   Preis sitzt direkt auf der gelb-orangen SVG-Sonne, die Sonnen-Silhouette
   selbst ist die Badge-Form (kein border-radius/box-shadow/border noetig,
   die transparenten Ecken der SVG geben die Zacken-Kontur). Dunkles
   Marken-Navy als Text statt Weiss+Schatten - komplementaer zur warmen
   Sonnenfarbe, dadurch von Natur aus kontrastreich, kein Textschatten noetig. */
#s27home .s .card .save,
#s27home .prod-h .save{
  background:url(/images/steganos/home/summer2026/sun.svg?v=2) no-repeat center/contain;
  border-radius:0;box-shadow:none;border:0;
  color:#0d2b45;text-shadow:none;
}
#s27home .s .card .save{font-size:18px}
#s27home .prod-h .save{font-size:12px}
/* Leichter weisser Glow probeweise fuer bessere Lesbarkeit auf der Welle
   (wechselt zwischen heller Gischt und dunklerem Blau darunter). */
#s27home .scen-sec .sec-head h2{text-shadow:0 0 14px rgba(255,255,255,.65),0 1px 3px rgba(255,255,255,.5)}
#s27home .scen-sec .sec-head p{text-shadow:0 0 10px rgba(255,255,255,.55),0 1px 2px rgba(255,255,255,.45)}

/* --- Wellen (10 Spans, 1:1-Geometrie aus summer2026.css) --- */
#s27home .beach-surf{position:absolute;left:0;right:0;bottom:0;height:230px;z-index:0;pointer-events:none}
#s27home .beach-surf span{position:absolute;left:0;right:0;bottom:0;display:block;background-repeat:repeat-x}
#s27home .beach-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);animation:s27-tide 12s ease-in-out infinite,s27-drift-cap 25s linear infinite}
#s27home .beach-surf span:nth-child(2){height:135px;bottom:-15px;left:-20px;right:-20px;filter:blur(.8px);opacity:.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:s27-tide 12s ease-in-out infinite,s27-drift-cyan 25s linear infinite}
#s27home .beach-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);-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 18px),transparent);animation:s27-twin2 9s infinite}
#s27home .beach-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:s27-tex2 9s infinite}
#s27home .beach-surf span:nth-child(5){height:92px;bottom:-15px;left:-20px;right:-20px;filter:blur(1.2px);opacity:.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:s27-tide 12s ease-in-out infinite,s27-drift-teal 32s linear infinite}
#s27home .beach-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:s27-twin3 11.5s infinite;animation-delay:-4s}
#s27home .beach-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:s27-tex3 11.5s infinite;animation-delay:-4s}
#s27home .beach-surf span:nth-child(8){height:50px;bottom:-15px;left:-20px;right:-20px;filter:blur(1.2px);opacity:.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:s27-tide 12s ease-in-out infinite,s27-drift-deep 40s linear infinite}
#s27home .beach-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:s27-twin4 13.5s infinite;animation-delay:-8s}
#s27home .beach-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:s27-tex4 13.5s infinite;animation-delay:-8s}
@keyframes s27-tide{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes s27-drift-cap{0%{background-position-x:-420px}100%{background-position-x:470px}}
@keyframes s27-drift-cyan{0%{background-position-x:-440px}100%{background-position-x:450px}}
@keyframes s27-drift-teal{0%{background-position-x:-170px}100%{background-position-x:-890px}}
@keyframes s27-drift-deep{0%{background-position-x:-620px}100%{background-position-x:300px}}
@keyframes s27-twin2{0%{transform:translateY(0) scaleY(1);opacity:0;animation-timing-function:ease-out}10%{opacity:.35;animation-timing-function:ease-in-out}22%{opacity:.9}45%{transform:translateY(-127px) scaleY(.68);opacity:.28;animation-timing-function:ease-in-out}64%{opacity:0}100%{transform:translateY(0) scaleY(1);opacity:0}}
@keyframes s27-twin3{0%{transform:translateY(0) scaleY(1);opacity:0;animation-timing-function:ease-out}10%{opacity:.35;animation-timing-function:ease-in-out}22%{opacity:.9}45%{transform:translateY(-155px) scaleY(.62);opacity:.28;animation-timing-function:ease-in-out}64%{opacity:0}100%{transform:translateY(0) scaleY(1);opacity:0}}
@keyframes s27-twin4{0%{transform:translateY(0) scaleY(1);opacity:0;animation-timing-function:ease-out}8%{opacity:.85}45%{transform:translateY(-187px) scaleY(.55);opacity:.24;animation-timing-function:ease-in-out}64%{opacity:0}100%{transform:translateY(0) scaleY(1);opacity:0}}
@keyframes s27-tex2{0%{transform:translateY(0) scaleY(1);clip-path:inset(0 0 0 0);opacity:0;animation-timing-function:ease-out}8%{opacity:.75}45%{transform:translateY(-127px) scaleY(.68);clip-path:inset(114px 0 0 0);opacity:.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 s27-tex3{0%{transform:translateY(0) scaleY(1);clip-path:inset(0 0 0 0);opacity:0;animation-timing-function:ease-out}8%{opacity:.75}45%{transform:translateY(-155px) scaleY(.62);clip-path:inset(84px 0 0 0);opacity:.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 s27-tex4{0%{transform:translateY(0) scaleY(1);clip-path:inset(0 0 0 0);opacity:0;animation-timing-function:ease-out}8%{opacity:.7}45%{transform:translateY(-187px) scaleY(.55);clip-path:inset(53px 0 0 0);opacity:.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){
  #s27home .beach-surf span{animation:none}
  #s27home .beach-surf span:nth-child(3),#s27home .beach-surf span:nth-child(4),
  #s27home .beach-surf span:nth-child(6),#s27home .beach-surf span:nth-child(7),
  #s27home .beach-surf span:nth-child(9),#s27home .beach-surf span:nth-child(10){opacity:0}
}

/* --- Deko: 1:1-Koordinaten aus steganos2021 #hero_deco .d1-.d18 (Live-
   Anordnung), nur die Familie/Box/Kokosnuss-Stuecke fehlen (Assets nicht
   lokal verfuegbar). d-Nummern in Kommentaren zur Rueckverfolgung. */
#s27home .beach-deco{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none}
#s27home .beach-deco span{position:absolute;display:block;background-repeat:no-repeat;background-size:contain;background-position:center}
/* d1 */ #s27home .bd-palml{left:calc(50% - 1053px);top:-42px;width:210px;height:210px;--base:rotate(12deg) scale(2.42);transform:var(--base);z-index:4;background-image:url(/images/steganos/home/summer2026/palm5.svg)}
/* d18 */ #s27home .bd-palmr{left:calc(50% + 873px);top:-72px;width:210px;height:210px;--base:rotate(-14deg) scale(1.9);transform:var(--base);z-index:4;background-image:url(/images/steganos/home/summer2026/palm4c.svg)}
/* d2 */ #s27home .bd-parasolr{left:calc(50% - 838px);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/home/summer2026/parasol-red.svg)}
/* d11 */ #s27home .bd-parasolb{left:calc(50% + 720px);top:33px;width:150px;height:150px;--base:rotate(9deg) scale(1.705);transform:var(--base);z-index:3;pointer-events:auto;background-image:url(/images/steganos/home/summer2026/parasol-blue.svg)}
/* Schirm-Wobble: Hero-Script misst Anstossrichtung (--ax/--ay), 3D-Kippen
   (rotate3d) laesst den Schirm gedaempft in die Ruhelage zurueckschwingen. */
#s27home .bd-parasolr.wobble,
#s27home .bd-parasolb.wobble{animation:s27-parasol-wobble .9s ease-out}
@keyframes s27-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)}
}
/* d7-d9: Familie auf Sonnenliegen, neben dem blauen Schirm (d11). z2 = unter dem Schirm (z3). */
#s27home .bd-fam1,#s27home .bd-fam2,#s27home .bd-fam3{z-index:2;filter:drop-shadow(4px 6px 6px rgba(90,60,20,.22))}
/* d7 */ #s27home .bd-fam1{left:calc(50% + 683px);top:121px;width:78px;height:159px;transform:rotate(7deg);background-image:url(/images/steganos/home/summer2026/lounger_laptop.webp)}
/* d8 */ #s27home .bd-fam2{left:calc(50% + 760px);top:138px;width:78px;height:167px;transform:rotate(-2deg);background-image:url(/images/steganos/home/summer2026/lounger_man.webp)}
/* d9 */ #s27home .bd-fam3{left:calc(50% + 836px);top:134px;width:50px;height:96px;transform:rotate(-7deg);background-image:url(/images/steganos/home/summer2026/lounger_child.webp)}
/* d17: Produktbox im Sand, Ziel des Easter Eggs (s.u.). z1 = unter der Liege,
   ueber Sand. Bewusst KEIN cursor:pointer (Egg bleibt versteckt); Klick-
   Handling per Dokument-Hit-Test im Hero-Script. */
#s27home .bd-box{left:calc(50% + 640px);top:143px;width:42px;height:59px;z-index:1;pointer-events:auto;transform:rotate(-7deg);background-image:url(/images/steganos/home/summer2026/box_sos.webp);filter:drop-shadow(4px 5px 5px rgba(90,60,20,.28))}

/* --- Easter Egg: Mamas Laptop (portiert 1:1 aus steganos2021, gleiche
   lounger_laptop.webp-Groesse 78x159 -> Pixelwerte unveraendert uebernommen).
   Screen "atmet" rot (X) bis die Produktbox (.bd-box) geklickt wird -> Box
   fliegt spinnend zum X, dann .secure = gruen + steganos-Logo. GATED per
   .egg-Klasse (setzt das Hero-Script beim Laden). */
#s27home .bd-fam1.egg::before{
    content:"";position:absolute;left:14.8px;top:85.9px;width:37.4px;height:11.6px;
    background:#2a3440;border-radius:2px;
}
#s27home .bd-fam1.egg::after{
    content:"";position:absolute;left:16.1px;top:87.2px;width:34.8px;height:9px;
    border-radius:1px;background-color:#d0342c;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.4 2.4 L7.6 7.6 M7.6 2.4 L2.4 7.6' stroke='white' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:6px 6px;
    animation:s27-mama-screen 3.4s ease-in-out infinite alternate;
}
@keyframes s27-mama-screen{
    from{background-color:#d0342c}
    to{background-color:#7d1410}
}
#s27home .bd-fam1.egg.secure::after{
    animation:none;background-color:#14a733;
    background-image:url(/images/steganos/home/summer2026/icon_logo_white.png);
    background-size:auto 7px;
}
/* d5 */ #s27home .bd-ball{left:calc(50% + 830px);top:205px;width:100px;height:100px;--base:rotate(20deg) scale(.35);transform:var(--base);z-index:2;pointer-events:auto;background-image:url(/images/steganos/home/summer2026/beachball.svg)}
/* d6: nach rechts verschoben (war -194), jetzt etwas links vom rechten
   blauen Seestern statt links der Mitte. */
#s27home .bd-sfo{left:calc(50% + 560px);top:332px;width:110px;height:108px;transform:rotate(36deg) scale(.9);background-image:url(/images/steganos/home/summer2026/starfish-orange.svg)}
/* d10 */ #s27home .bd-sfb{left:calc(50% + 683px);top:328px;width:92px;height:86px;transform:rotate(-20deg) scale(.85);background-image:url(/images/steganos/home/summer2026/starfish-blue.svg)}
/* d13 (linker hellblauer Seestern) entfernt - nicht mehr gebraucht. */
/* d14 */ #s27home .bd-sfv{left:calc(50% - 925px);top:315px;width:92px;height:86px;transform:rotate(-24deg) scale(.9);background-image:url(/images/steganos/home/summer2026/starfish-violet.svg)}
/* d3 */ #s27home .bd-towel{left:calc(50% - 736px);top:196px;width:66px;height:115px;transform:rotate(-17deg) scale(1.2);background-image:url(/images/steganos/home/summer2026/towel-orange.svg)}
/* d4 */ #s27home .bd-mask{left:calc(50% - 863px);top:246px;width:120px;height:107px;transform:rotate(14deg) scale(.4);background-image:url(/images/steganos/home/summer2026/snorkelmask.svg)}
/* d12 */ #s27home .bd-foot{left:calc(50% - 791px);top:-37px;width:200px;height:260px;transform:scale(-1.15,1.15) rotate(-7deg);background-image:url(/images/steganos/home/summer2026/footprints.svg)}
/* Kokosnuss-Egg: wer die LINKE Palme laenger schuettelt, loest EINMAL eine
   Kokosnuss aus (JS erzeugt span.dcoco + .drop). Erscheint UNTER den Wedeln
   (z1 < Palme z4), kullert den Strand hinab ins Wasser und versinkt dort.
   Koordinaten 1:1 aus steganos2021 (gleiches d1/bd-palml-Koordinatensystem). */
#s27home .dcoco{
    position:absolute;left:calc(50% - 950px);top:130px;width:30px;height:30px;
    background:url(/images/steganos/home/summer2026/coconut.svg) no-repeat center/contain;
    z-index:1;opacity:0;pointer-events:none;
}
#s27home .dcoco.drop{animation:s27-coco-roll 5.8s linear forwards}
@keyframes s27-coco-roll{
    /* Bremspunkt (50%) ~70px spaeter entlang der Bahn (User: bremste zu frueh
       in diesem Layout) - Endpunkt (100%) unveraendert, die Punkte dazwischen
       proportional auf die kuerzere Reststrecke neu verteilt. */
    0%{opacity:0;transform:translate(0,0) rotate(0deg);animation-timing-function:ease-in}
    1.7%{opacity:1;animation-timing-function:ease-in}
    50%{opacity:1;transform:translate(114px,259px) rotate(772deg);animation-timing-function:ease-out}
    69%{opacity:1;transform:translate(124px,276px) rotate(812deg);animation-timing-function:ease-out}
    96%{opacity:1;transform:translate(139px,300px) rotate(862deg);animation-timing-function:ease-out}
    100%{opacity:0;transform:translate(141px,304px) rotate(866deg)}
}
/* Gedaempfte Schwingung ueber viele eng gesetzte Zwischenschritte + LINEARE
   Interpolation - die Kurve selbst bildet die Beschleunigung/Bremsung ab,
   dadurch keine Stop-and-Go-Ruckler an harten Segmentgrenzen (wie zuvor mit
   nur 3 Keyframes + ease-in-out an jedem einzelnen). */
@keyframes s27-gust-l{
    0%{transform:rotate(12deg) scale(2.42)}
    10%{transform:rotate(14deg) scale(2.42)}
    20%{transform:rotate(14.1deg) scale(2.42)}
    30%{transform:rotate(13.1deg) scale(2.42)}
    40%{transform:rotate(11.8deg) scale(2.42)}
    50%{transform:rotate(11.2deg) scale(2.42)}
    60%{transform:rotate(11.2deg) scale(2.42)}
    70%{transform:rotate(11.7deg) scale(2.42)}
    80%{transform:rotate(12.1deg) scale(2.42)}
    90%{transform:rotate(12.3deg) scale(2.42)}
    100%{transform:rotate(12deg) scale(2.42)}
}
@keyframes s27-gust-r{
    0%{transform:rotate(-14deg) scale(1.9)}
    10%{transform:rotate(-12deg) scale(1.9)}
    20%{transform:rotate(-11.9deg) scale(1.9)}
    30%{transform:rotate(-12.9deg) scale(1.9)}
    40%{transform:rotate(-14.2deg) scale(1.9)}
    50%{transform:rotate(-14.8deg) scale(1.9)}
    60%{transform:rotate(-14.8deg) scale(1.9)}
    70%{transform:rotate(-14.3deg) scale(1.9)}
    80%{transform:rotate(-13.9deg) scale(1.9)}
    90%{transform:rotate(-13.7deg) scale(1.9)}
    100%{transform:rotate(-14deg) scale(1.9)}
}
#s27home .bd-palml.gust{animation:s27-gust-l 1.7s linear}
#s27home .bd-palmr.gust{animation:s27-gust-r 1.7s linear}
/* Ball rollt bei Anstoss EINMAL nach unten ins Wasser (leicht nach rechts
   gebogen), bremst auf der gleichen absoluten Hoehe wie die Kokosnuss (389px
   von der Hero-Oberkante; Ball startet bei top:205px -> 184px bis zum
   Bremspunkt, dann weiter bis er im Wasser verschwindet). Kein Zurueckrollen -
   nach dem Verschwinden setzt das JS die Klasse zurueck, damit er am
   Ausgangspunkt wieder erscheint und erneut angestossen werden kann. */
/* Ball bleibt die GANZE Zeit sichtbar (opacity:1) und treibt weiter ins
   offene Meer - sinkt/verblasst erst in den letzten ~8% der Laufzeit, kurz
   vor dem unteren Rand von .hero (overflow:hidden schneidet bei 520px Hoehe
   ab; Ball startet bei top:205px -> nur ~300px Spielraum bleiben sichtbar).
   Phase 1 (0-45%): schneller Roll+Bremsen (ease-in -> ease-out). Phase 2
   (45-92%): langsames, sacht schaukelndes Abtreiben (Rotation pendelt um die
   Endlage). Phase 3 (92-100%): sinkt/verblasst kurz vor dem Rand. */
/* Bremspunkt jetzt viel spaeter (55% Zeit = ~80% der Strecke, wie bei der
   Kokosnuss: fast die ganze Fahrt ist der schnelle Roll, gebremst wird kurz
   VOR der Wasserkante). Danach 2 volle, deutlichere Schaukel-Schwuenge
   (+-25-30deg statt vorher +-8deg) waehrend er die letzten ~65px langsam
   weitertreibt, bevor er ganz am Ende verblasst. */
/* Bremspunkt jetzt bei 80% der ZEIT (nicht nur der Strecke) - die schnelle
   Roll-Phase dauert also die meiste Zeit der Animation, bremsen+schaukeln
   passiert erst ganz am Schluss, kurz vor dem Verblassen. */
/* Bremspunkt nochmal deutlich spaeter (88% statt 80%) - der schnelle Roll
   nutzt jetzt fast den gesamten verfuegbaren Weg (Hero ist 520px hoch, Ball
   startet bei top:205px -> ~310px sind das physische Maximum, bevor
   overflow:hidden greift). Das Schaukeln passiert erst auf dem letzten kurzen
   Rest davor. */
/* Roll-Phase (einmalig, endet exakt am Ruhepunkt): 0-66% weiter
   beschleunigend, 66-100% sanft abbremsend statt hartem Cut. Danach uebernimmt
   die INFINITE Schaukel-Animation (separate Klasse, per JS nach Roll-Ende
   gesetzt) - oszilliert endlos um den Ruhepunkt (Start=Ende identisch fuer
   nahtlose Schleife), mit spuerbarer Vertikal-Komponente (runter-hoch-runter-
   hoch). Kein Verblassen/Schrumpfen mehr - der Ball schaukelt einfach ewig. */
@keyframes s27-ball-roll{
    0%{transform:var(--base) translate(0,0) rotate(0deg);animation-timing-function:ease-in}
    66%{transform:var(--base) translate(75px,270px) rotate(290deg);animation-timing-function:ease-out}
    100%{transform:var(--base) translate(100px,360px) rotate(378deg);animation-timing-function:ease-in-out}
}
#s27home .bd-ball.roll{animation:s27-ball-roll 2.2s forwards}
/* Haelt den Ball dauerhaft an der Roll-Endposition (sonst faellt er nach
   Entfernen der .roll-Klasse auf die Basis-Transform = Startposition vor
   dem Rollen zurueck = "verschwindet" von seinem Ruhepunkt). Bleibt die
   ganze Zeit gesetzt; .sway kommt bei Bedarf zusaetzlich drauf und muss
   deshalb SPAETER in der CSS stehen, um zu gewinnen. */
#s27home .bd-ball.rested{transform:var(--base) translate(100px,360px) rotate(378deg)}
@keyframes s27-ball-sway{
    0%{transform:var(--base) translate(100px,360px) rotate(378deg)}
    25%{transform:var(--base) translate(104px,366px) rotate(390deg)}
    50%{transform:var(--base) translate(107px,362px) rotate(358deg)}
    75%{transform:var(--base) translate(110px,368px) rotate(385deg)}
    100%{transform:var(--base) translate(100px,360px) rotate(378deg)}
}
#s27home .bd-ball.sway{animation:s27-ball-sway 6.5s ease-in-out 1}
@media(max-width:1700px){
  #s27home .bd-palml,#s27home .bd-palmr,#s27home .bd-foot,#s27home .bd-sfv,#s27home .bd-sfb,#s27home .bd-sfo{display:none}
}
@media(max-width:1300px){
  #s27home .bd-parasolr,#s27home .bd-parasolb,#s27home .bd-mask,#s27home .bd-ball{display:none}
}

/* --- Fischschwarm + Wal (portiert aus #home_fish/#home_whale) ---
   Leben in der Sea-Fade-Zone von .scen-sec (wie im Original in .mainbody),
   NICHT im turbulenten Wellenbereich des Hero. z-index:-1 = hinter den
   Karten, aber ueber dem Fade-Hintergrund (.scen-sec ist position:relative). */
#s27home .s27-fish{position:absolute;top:230px;left:-12%;width:205px;height:64px;z-index:-1;animation:s27-fish-swim 58s linear infinite}
#s27home .s27-fish span{position:absolute;width:24px;height:12px;filter:blur(.4px);opacity:.9;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}
#s27home .s27-fish span:nth-child(1){left:6px;top:8px;--fr:-5deg;transform:rotate(var(--fr))}
#s27home .s27-fish span:nth-child(2){left:38px;top:2px;--fr:4deg;transform:rotate(var(--fr));width:20px}
#s27home .s27-fish span:nth-child(3){left:70px;top:14px;--fr:-2deg;transform:rotate(var(--fr))}
#s27home .s27-fish span:nth-child(4){left:22px;top:30px;--fr:6deg;transform:rotate(var(--fr));width:19px;opacity:.8}
#s27home .s27-fish span:nth-child(5){left:54px;top:37px;--fr:-6deg;transform:rotate(var(--fr))}
#s27home .s27-fish span:nth-child(6){left:90px;top:31px;--fr:3deg;transform:rotate(var(--fr));width:21px}
#s27home .s27-fish span:nth-child(7){left:120px;top:16px;--fr:-4deg;transform:rotate(var(--fr));width:27px}
#s27home .s27-fish span:nth-child(8){left:102px;top:48px;--fr:7deg;transform:rotate(var(--fr));width:18px;opacity:.8}
#s27home .s27-fish span:nth-child(9){left:150px;top:6px;--fr:5deg;transform:rotate(var(--fr));width:20px}
#s27home .s27-fish span:nth-child(10){left:160px;top:36px;--fr:-3deg;transform:rotate(var(--fr));width:23px;opacity:.85}
#s27home .s27-fish span:nth-child(11){left:36px;top:52px;--fr:-6deg;transform:rotate(var(--fr));width:17px;opacity:.75}
#s27home .s27-fish.fled{pointer-events:none}
#s27home .s27-fish.fled span{opacity:0;transition:transform 1.2s ease-in 0s,opacity .8s ease-in .35s}
#s27home .s27-fish.fled span:nth-child(1){transform:translate(-190px,110px) rotate(150deg)}
#s27home .s27-fish.fled span:nth-child(2){transform:translate(-120px,180px) rotate(124deg)}
#s27home .s27-fish.fled span:nth-child(3){transform:translate(60px,200px) rotate(73deg)}
#s27home .s27-fish.fled span:nth-child(4){transform:translate(-230px,60px) rotate(165deg)}
#s27home .s27-fish.fled span:nth-child(5){transform:translate(30px,240px) rotate(83deg)}
#s27home .s27-fish.fled span:nth-child(6){transform:translate(180px,140px) rotate(38deg)}
#s27home .s27-fish.fled span:nth-child(7){transform:translate(240px,90px) rotate(21deg)}
#s27home .s27-fish.fled span:nth-child(8){transform:translate(110px,220px) rotate(63deg)}
#s27home .s27-fish.fled span:nth-child(9){transform:translate(200px,170px) rotate(40deg)}
#s27home .s27-fish.fled span:nth-child(10){transform:translate(255px,130px) rotate(27deg)}
#s27home .s27-fish.fled span:nth-child(11){transform:translate(-60px,230px) rotate(104deg)}
#s27home .s27-fish.gone{display:none}
@keyframes s27-fish-swim{0%{left:-12%;top:266px;animation-timing-function:ease-in-out}11.6%{left:3%;top:302px;animation-timing-function:ease-in-out}22.3%{left:18%;top:274px;animation-timing-function:ease-in-out}34.8%{left:35%;top:310px;animation-timing-function:ease-in-out}45.5%{left:50%;top:280px;animation-timing-function:ease-in-out}57.9%{left:66%;top:306px;animation-timing-function:ease-in-out}69.5%{left:83%;top:272px;animation-timing-function:ease-in-out}82.8%{left:104%;top:294px}82.9%{left:-12%;top:266px}100%{left:-12%;top:266px}}
#s27home .s27-whale{position:absolute;top:120px;left:104%;width:340px;height:136px;z-index:-1;opacity:.2;filter:blur(1.2px);transform:scaleX(-1);background:url(/images/steganos/home/summer2026/whale.svg) no-repeat center/contain}
#s27home .s27-whale.on{animation:s27-whale-swim 150s linear infinite}
@keyframes s27-whale-swim{0%{left:104%;top:366px;opacity:.2;transform:scaleX(-1) scale(1)}80%{left:-16%;top:556px;opacity:.02;transform:scaleX(-1) scale(.55)}80.1%{left:104%;top:366px;opacity:.2;transform:scaleX(-1) scale(1)}100%{left:104%;top:366px;opacity:.2;transform:scaleX(-1) scale(1)}}
@media(prefers-reduced-motion:reduce){#s27home .s27-fish,#s27home .s27-whale{animation:none;opacity:.15}}