.elementor-1941 .elementor-element.elementor-element-0bb2885{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:1.5em;--padding-bottom:1.5em;--padding-left:0em;--padding-right:0em;}.elementor-1941 .elementor-element.elementor-element-0bb2885:not(.elementor-motion-effects-element-type-background), .elementor-1941 .elementor-element.elementor-element-0bb2885 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-9813614 );}.elementor-1941 .elementor-element.elementor-element-f756f00{--display:flex;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:1em;--padding-bottom:1em;--padding-left:1em;--padding-right:1em;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-1941 .elementor-element.elementor-element-572e8aa{text-align:left;}.elementor-1941 .elementor-element.elementor-element-572e8aa .elementor-heading-title{font-family:var( --e-global-typography-eec3319-font-family ), Sans-serif;font-size:var( --e-global-typography-eec3319-font-size );text-transform:var( --e-global-typography-eec3319-text-transform );line-height:var( --e-global-typography-eec3319-line-height );letter-spacing:var( --e-global-typography-eec3319-letter-spacing );color:var( --e-global-color-a740b67 );}.elementor-1941 .elementor-element.elementor-element-22bece9{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:3em;--padding-bottom:3em;--padding-left:0em;--padding-right:0em;}.elementor-1941 .elementor-element.elementor-element-16e49c5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:1em;--padding-bottom:1em;--padding-left:1em;--padding-right:1em;--z-index:21;}.elementor-1941 .elementor-element.elementor-element-16e49c5:not(.elementor-motion-effects-element-type-background), .elementor-1941 .elementor-element.elementor-element-16e49c5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #FFFFFF00 0%, #FFFFFF 30%);}.elementor-1941 .elementor-element.elementor-element-4873dc0 .elementor-heading-title{font-family:var( --e-global-typography-744de03-font-family ), Sans-serif;font-size:var( --e-global-typography-744de03-font-size );font-weight:var( --e-global-typography-744de03-font-weight );text-transform:var( --e-global-typography-744de03-text-transform );line-height:var( --e-global-typography-744de03-line-height );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-1941 .elementor-element.elementor-element-06a9802 > .elementor-widget-container{margin:1em 0em 1em 0em;}.elementor-1941 .elementor-element.elementor-element-06a9802{font-family:var( --e-global-typography-33c3a88-font-family ), Sans-serif;font-size:var( --e-global-typography-33c3a88-font-size );letter-spacing:var( --e-global-typography-33c3a88-letter-spacing );}.elementor-widget-image .widget-image-caption{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-1941 .elementor-element.elementor-element-85d31e2{text-align:left;}.elementor-1941 .elementor-element.elementor-element-85d31e2 img{width:280px;}:root{--page-title-display:none;}@media(min-width:720px){.elementor-1941 .elementor-element.elementor-element-16e49c5{--width:66.6666%;}}@media(max-width:1240px){.elementor-1941 .elementor-element.elementor-element-0bb2885{--margin-top:60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}}@media(max-width:1024px){.elementor-1941 .elementor-element.elementor-element-0bb2885{--margin-top:85px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-1941 .elementor-element.elementor-element-f756f00{--padding-top:1em;--padding-bottom:1em;--padding-left:2em;--padding-right:2em;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-1941 .elementor-element.elementor-element-572e8aa .elementor-heading-title{font-size:var( --e-global-typography-eec3319-font-size );line-height:var( --e-global-typography-eec3319-line-height );letter-spacing:var( --e-global-typography-eec3319-letter-spacing );}.elementor-1941 .elementor-element.elementor-element-16e49c5{--padding-top:2em;--padding-bottom:2em;--padding-left:2em;--padding-right:2em;}.elementor-1941 .elementor-element.elementor-element-4873dc0 .elementor-heading-title{font-size:var( --e-global-typography-744de03-font-size );line-height:var( --e-global-typography-744de03-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-1941 .elementor-element.elementor-element-06a9802{font-size:var( --e-global-typography-33c3a88-font-size );letter-spacing:var( --e-global-typography-33c3a88-letter-spacing );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}}@media(max-width:719px){.elementor-1941 .elementor-element.elementor-element-0bb2885{--margin-top:60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:1em;--padding-bottom:1em;--padding-left:1em;--padding-right:1em;}.elementor-1941 .elementor-element.elementor-element-f756f00{--width:100%;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-1941 .elementor-element.elementor-element-572e8aa{text-align:center;}.elementor-1941 .elementor-element.elementor-element-572e8aa .elementor-heading-title{font-size:var( --e-global-typography-eec3319-font-size );line-height:var( --e-global-typography-eec3319-line-height );letter-spacing:var( --e-global-typography-eec3319-letter-spacing );}.elementor-1941 .elementor-element.elementor-element-4873dc0 .elementor-heading-title{font-size:var( --e-global-typography-744de03-font-size );line-height:var( --e-global-typography-744de03-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-1941 .elementor-element.elementor-element-06a9802{font-size:var( --e-global-typography-33c3a88-font-size );letter-spacing:var( --e-global-typography-33c3a88-letter-spacing );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS *//* NEU: ELTERN-CONTAINER FÜR DIE FLASCHEN-ANIMATION */ /* Weise diese Klasse dem direkten Eltern-Container deiner beiden Flaschen-Widgets zu. Du hast erwähnt, dass dies ein Flex-Container ist; das ist okay, aber für die absolute Positionierung der Kinder sind position:relative und feste Maße entscheidend. */ .flaschen-animations-behaelter { position: relative; /* WICHTIG: Feste Breite und Höhe für die "Bühne" der Animation definieren! Diese Werte sind Beispiele und müssen an dein Layout angepasst werden. */ width: 350px; /* Beispiel */ height: 450px; /* Beispiel */ margin: 20px auto; /* Beispiel für Abstand und Zentrierung, falls gewünscht */ /* Ggf. overflow: hidden; wenn Teile der Animation nicht überstehen sollen */ } /* BASIS-STILE FÜR BEIDE FLASCHEN (werden absolut positioniert) */ #ts-classic-flasche-glas, #ts-classic-flasche-pet { cursor: pointer; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; position: absolute; /* WICHTIG: Flaschen werden absolut innerhalb des Animations-Behälters positioniert */ transform-origin: bottom center; /* Wichtig für die Skalierung vom Flaschenboden aus */ /* Basis-Breite der Flaschenbilder VOR der Transformation. Passe dies an die tatsächliche Breite deiner Bilddateien an, oder was gut aussieht. */ width: 120px; /* Beispiel */ height: auto; /* Startpositionen werden durch die Positionsklassen .flasche-pos-vorne und .flasche-pos-hinten definiert. Man könnte hier aber auch eine gemeinsame Ausgangsbasis festlegen, z.B.: */ left: 50%; /* Zentriert als Ausgangspunkt für translateX in den Positionsklassen */ bottom: 0; /* Am Boden des Containers ausgerichtet */ /* NEU: Um den blauen Schein/Rahmen zu entfernen */ outline: none !important; /* Entfernt den Standard-Fokusrahmen */ -webkit-tap-highlight-color: transparent; /* Entfernt die Tipp-Hervorhebung in WebKit-Browsern (Chrome, Safari, Mobile) */ } /* BASIS-STILE FÜR BEIDE FLASCHEN (werden absolut positioniert) */ #ts-medium-flasche-glas, #ts-medium-flasche-pet { cursor: pointer; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; position: absolute; /* WICHTIG: Flaschen werden absolut innerhalb des Animations-Behälters positioniert */ transform-origin: bottom center; /* Wichtig für die Skalierung vom Flaschenboden aus */ /* Basis-Breite der Flaschenbilder VOR der Transformation. Passe dies an die tatsächliche Breite deiner Bilddateien an, oder was gut aussieht. */ width: 120px; /* Beispiel */ height: auto; /* Startpositionen werden durch die Positionsklassen .flasche-pos-vorne und .flasche-pos-hinten definiert. Man könnte hier aber auch eine gemeinsame Ausgangsbasis festlegen, z.B.: */ left: 50%; /* Zentriert als Ausgangspunkt für translateX in den Positionsklassen */ bottom: 0; /* Am Boden des Containers ausgerichtet */ /* NEU: Um den blauen Schein/Rahmen zu entfernen */ outline: none !important; /* Entfernt den Standard-Fokusrahmen */ -webkit-tap-highlight-color: transparent; /* Entfernt die Tipp-Hervorhebung in WebKit-Browsern (Chrome, Safari, Mobile) */ } /* BASIS-STILE FÜR BEIDE FLASCHEN (werden absolut positioniert) */ #ts-mild-flasche-glas, #ts-mild-flasche-pet { cursor: pointer; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; position: absolute; /* WICHTIG: Flaschen werden absolut innerhalb des Animations-Behälters positioniert */ transform-origin: bottom center; /* Wichtig für die Skalierung vom Flaschenboden aus */ /* Basis-Breite der Flaschenbilder VOR der Transformation. Passe dies an die tatsächliche Breite deiner Bilddateien an, oder was gut aussieht. */ width: 120px; /* Beispiel */ height: auto; /* Startpositionen werden durch die Positionsklassen .flasche-pos-vorne und .flasche-pos-hinten definiert. Man könnte hier aber auch eine gemeinsame Ausgangsbasis festlegen, z.B.: */ left: 50%; /* Zentriert als Ausgangspunkt für translateX in den Positionsklassen */ bottom: 0; /* Am Boden des Containers ausgerichtet */ /* NEU: Um den blauen Schein/Rahmen zu entfernen */ outline: none !important; /* Entfernt den Standard-Fokusrahmen */ -webkit-tap-highlight-color: transparent; /* Entfernt die Tipp-Hervorhebung in WebKit-Browsern (Chrome, Safari, Mobile) */ } /* BASIS-STILE FÜR BEIDE FLASCHEN (werden absolut positioniert) */ #ts-naturelle-flasche-glas, #ts-naturelle-flasche-pet { cursor: pointer; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; position: absolute; /* WICHTIG: Flaschen werden absolut innerhalb des Animations-Behälters positioniert */ transform-origin: bottom center; /* Wichtig für die Skalierung vom Flaschenboden aus */ /* Basis-Breite der Flaschenbilder VOR der Transformation. Passe dies an die tatsächliche Breite deiner Bilddateien an, oder was gut aussieht. */ width: 120px; /* Beispiel */ height: auto; /* Startpositionen werden durch die Positionsklassen .flasche-pos-vorne und .flasche-pos-hinten definiert. Man könnte hier aber auch eine gemeinsame Ausgangsbasis festlegen, z.B.: */ left: 50%; /* Zentriert als Ausgangspunkt für translateX in den Positionsklassen */ bottom: 0; /* Am Boden des Containers ausgerichtet */ /* NEU: Um den blauen Schein/Rahmen zu entfernen */ outline: none !important; /* Entfernt den Standard-Fokusrahmen */ -webkit-tap-highlight-color: transparent; /* Entfernt die Tipp-Hervorhebung in WebKit-Browsern (Chrome, Safari, Mobile) */ } /* ZUSTAND/POSITION: FLASCHE IST VORNE, GROSS */ .flasche-pos-vorne { /* translateX und scale bleiben wie zuvor (oder wie von dir angepasst). translateY ist jetzt deutlich reduziert, z.B. -2px für eine minimale Anhebung. Du kannst hier auch 0px verwenden, wenn sie nicht angehoben werden soll. */ transform: translateX(0%) translateY(30px) scale(1.2); /* translateY-Wert angepasst */ opacity: 1; z-index: 10; } /* ZUSTAND/POSITION: FLASCHE IST HINTEN VERSETZT, KLEINER */ .flasche-pos-hinten { /* translateX und scale bleiben wie zuvor (oder wie von dir angepasst). translateY ist jetzt deutlich reduziert, z.B. 2px für einen minimalen Versatz nach unten oder um auf einer ähnlichen Höhe wie die vordere Flasche zu bleiben (abhängig vom transform-origin). Du kannst hier auch 0px verwenden. */ transform: translateX(-90px) translateY(0px) scale(1.1); /* translateY-Wert angepasst */ opacity: 1; z-index: 5; } /* --- CSS FÜR KISTEN (bleibt wie von dir bereitgestellt) --- */ .kisten-behaelter { position: relative; min-height: 250px; /* Beispielwert! Bitte anpassen! */ } #ts-classic-kiste-glas, #ts-classic-kiste-pet { position: absolute; top: 0; left: 0; width: 100%; height: auto; } #ts-classic-kiste-pet { display: none; } /* oder #ts-classic-kiste-glas ausblenden *//* End custom CSS */