/* Theme Name: coasties.de Author: ONEWORX GmbH Text Domain: studien-wirken Description: Mit ❤ gemacht von oneworx Version: 1.0 | 2025 */ /* CSS Document Reset browser default styles All Header Top menu Content block Footer Media Queries */ @font-face {font-family: 'Brother 1816';src: url('fonts/Brother-1816-Bold.eot');src: url('fonts/Brother-1816-Bold.eot?#iefix') format('embedded-opentype'),url('fonts/Brother-1816-Bold.woff2') format('woff2'),url('fonts/Brother-1816-Bold.woff') format('woff'),url('fonts/Brother-1816-Bold.ttf') format('truetype'),url('fonts/Brother-1816-Bold.svg#Brother-1816-Bold') format('svg');font-weight: bold;font-style: normal;font-display: swap;} @font-face {font-family: 'Brother 1816';src: url('fonts/Brother-1816-Regular.eot');src: url('fonts/Brother-1816-Regular.eot?#iefix') format('embedded-opentype'),url('fonts/Brother-1816-Regular.woff2') format('woff2'),url('fonts/Brother-1816-Regular.woff') format('woff'),url('fonts/Brother-1816-Regular.ttf') format('truetype'),url('fonts/Brother-1816-Regular.svg#Brother-1816-Regular') format('svg');font-weight: normal;font-style: normal;font-display: swap;} @font-face {font-family: 'Ink Free';src: url('fonts/InkFree.eot');src: url('fonts/InkFree.eot?#iefix') format('embedded-opentype'),url('fonts/InkFree.woff2') format('woff2'),url('fonts/InkFree.woff') format('woff'),url('fonts/InkFree.ttf') format('truetype'),url('fonts/InkFree.svg#InkFree') format('svg');font-weight: normal;font-style: normal;font-display: swap;} @font-face {font-family: 'Rubik';src: url('fonts/Rubik-Light.eot');src: url('fonts/Rubik-Light.eot?#iefix') format('embedded-opentype'),url('fonts/Rubik-Light.woff2') format('woff2'),url('fonts/Rubik-Light.woff') format('woff'),url('fonts/Rubik-Light.ttf') format('truetype'),url('fonts/Rubik-Light.svg#Rubik-Light') format('svg');font-weight: 300;font-style: normal;font-display: swap;} @font-face {font-family: 'Rubik';src: url('fonts/Rubik-Regular.eot');src: url('fonts/Rubik-Regular.eot?#iefix') format('embedded-opentype'),url('fonts/Rubik-Regular.woff2') format('woff2'),url('fonts/Rubik-Regular.woff') format('woff'),url('fonts/Rubik-Regular.ttf') format('truetype'),url('fonts/Rubik-Regular.svg#Rubik-Regular') format('svg');font-weight: 400;font-style: normal;font-display: swap;} @font-face {font-family: 'Rubik';src: url('fonts/Rubik-Medium.eot');src: url('fonts/Rubik-Medium.eot?#iefix') format('embedded-opentype'),url('fonts/Rubik-Medium.woff2') format('woff2'),url('fonts/Rubik-Medium.woff') format('woff'),url('fonts/Rubik-Medium.ttf') format('truetype'),url('fonts/Rubik-Medium.svg#Rubik-Medium') format('svg');font-weight: 500;font-style: normal;font-display: swap;} @font-face {font-family: 'Rubik';src: url('fonts/Rubik-SemiBold.eot');src: url('fonts/Rubik-SemiBold.eot?#iefix') format('embedded-opentype'),url('fonts/Rubik-SemiBold.woff2') format('woff2'),url('fonts/Rubik-SemiBold.woff') format('woff'),url('fonts/Rubik-SemiBold.ttf') format('truetype'),url('fonts/Rubik-SemiBold.svg#Rubik-SemiBold') format('svg');font-weight: 600;font-style: normal;font-display: swap;} @font-face {font-family: 'Rubik';src: url('fonts/Rubik-Bold.eot');src: url('fonts/Rubik-Bold.eot?#iefix') format('embedded-opentype'),url('fonts/Rubik-Bold.woff2') format('woff2'),url('fonts/Rubik-Bold.woff') format('woff'),url('fonts/Rubik-Bold.ttf') format('truetype'),url('fonts/Rubik-Bold.svg#Rubik-Bold') format('svg');font-weight: 700;font-style: normal;font-display: swap;} @font-face {font-family: 'Rubik';src: url('fonts/Rubik-ExtraBold.eot');src: url('fonts/Rubik-ExtraBold.eot?#iefix') format('embedded-opentype'),url('fonts/Rubik-ExtraBold.woff2') format('woff2'),url('fonts/Rubik-ExtraBold.woff') format('woff'),url('fonts/Rubik-ExtraBold.ttf') format('truetype'),url('fonts/Rubik-ExtraBold.svg#Rubik-ExtraBold') format('svg');font-weight: 800;font-style: normal;font-display: swap;} /* Reset browser default styles */ html, body {min-height:100%;-webkit-text-size-adjust:100%;overflow-x:hidden;} :root { --primary-color:#103073; --secondary-color:#78A0D3; --text-color:#303030; --title-color:#C099D0; --subtitle-color:#E3CDEC; --hellblau-color:#719cc5; --pfirsichfarben-color:#f4a49b; --mineralwasser-color:#def0f6; --mineralwasser2-color:#fbdfe3; --grapefruit-color:#f8bab1; --schriftfarbe-color:#f29690; --apfelschorle-color:#e1e583; --kiwi-color:#b0d499; --krauterlimonade-color:#fae3be; --schriftfarbe2-color:#f6a651; --schriftfarbe3-color:#59b085; --schriftfarbe4-color:#2b9a63; --mango-color:#e1dc73; --johannisbeerschorle-color:#f3999b; --zitrone-color:#b7d5cf; --schriftfarbe5-color:#ee759b; --schriftfarbe6-color:#7f368d; --schriftfarbe7-color:#8cb0b1; } body {font:22px/1.6 'Rubik', sans-serif;color:var(--text-color);background:#fff;} div, html, body, p, ul, ol, li, a, form, img, table, td, h1, h2, h3, h4, h5, h6, blockquote, header, section, footer, aside, nav, article, figure, figcaption, dt, dd, dl {margin:0;padding:0;} header, section, footer, aside, nav, article, figure, figcaption {display:block;} table {border-collapse:collapse;} img {border:none;max-width:100%;height:auto;} iframe, object, embed {max-width:100%;} ul, li {list-style:none;} input {vertical-align:middle;} input:focus, textarea:focus {outline:none;} button, input[type="submit"] {cursor:pointer;-webkit-appearance:none;} a, a:visited {text-decoration:none;color:var(--primary-color);transition:color ease-in-out .2s;} a:active, a:hover {outline:0;text-decoration:none;color:var(--secondary-color);} /* All */ .wrapper {max-width:1950px;padding:0 15px;margin:0 auto;position:relative;box-sizing:border-box;} .alignfull {margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw;} .alignwide {margin-left:calc(25% - 25vw);margin-right:calc(25% - 25vw);max-width:100vw;} .font-inkfree, .font-inkfree * {font-family:'Ink Free' !important;} .font-brother, .font-brother * {font-family:'Brother 1816' !important;} /* Posts navigation */ .posts_navigation {display:flex;flex-wrap:wrap;justify-content:space-between;} /* Data cover */ *[data-cover-srcset] {min-height:200px;position:relative;} *[data-cover-srcset] img[srcset] {position:absolute;top:0;left:0;object-fit:cover;height:100%;width:100%;} /* Responsive video */ .video_wrap {position:relative;padding:0 0 56.25% 0;height:0;} .video_wrap iframe {position:absolute;top:0;left:0;width:100%;height:100%;} /* Typography */ h1 {font:800 70px/1.2 'Rubik';color:var(--primary-color);padding-bottom:15px;} h2 {font:700 60px/1.2 'Rubik';color:var(--primary-color);padding-bottom:30px;} h3 {font:700 70px/1.2 'Rubik';color:var(--primary-color);padding-bottom:20px;} h4 {font:800 60px/1.2 'Rubik';color:var(--primary-color);padding-bottom:40px;} h5 {font:600 30px/1.2 'Rubik';color:var(--secondary-color);padding-bottom:30px;} h6 {font:600 26px/1.4 'Rubik';padding-bottom:10px;} p {padding-bottom:14px;} /* Form */ input[type="text"], input[type="email"], input[type="tel"], textarea {font:12px 'Rubik', sans-serif;color:var(--text-color);border:1px solid var(--text-color);border-radius:0;padding:0 10px;height:30px;width:100%;box-sizing:border-box;} textarea {padding:10px;height:80px;} .searchform > div {display:flex;flex-wrap:wrap;align-items:center;} .searchform label {display:block;min-width:100%;} .searchform input[type="text"] {flex:1;margin-right:20px;} /* Buttons */ .wp-block-button {display:inline;} .button, .button:visited, .wp-block-button__link, .wp-block-button__link:visited, .searchform input[type="submit"] {color:#fff;background:var(--primary-color);padding:5px 60px;min-width:1px;height:61px;font:500 18px 'Rubik';border:none;border-radius:40px;text-align:center;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;transition:all ease-in-out .2s;} .button:hover, .wp-block-button__link:hover, .searchform input[type="submit"]:hover {color:#fff;background:var(--text-color);} .wp-block-buttons {gap:0;} .wp-block-buttons .wp-block-button__link {margin:0 20px 20px 0;} .wp-block-buttons .wp-block-button:last-of-type .wp-block-button__link {margin-right:0;} /* Main Colors */ .has-primary-color-color {color:var(--primary-color);} .has-secondary-color-color {color:var(--secondary-color);} .has-text-color-color {color:var(--text-color);} .has-title-color-color {color:var(--title-color);} .has-subtitle-color-color {color:var(--subtitle-color);} .has-hellblau-color-color {color:var(--hellblau-color);} .has-pfirsichfarben-color-color {color:var(--pfirsichfarben-color);} .has-mineralwasser-color-color {color:var(--mineralwasser-color);} .has-mineralwasser2-color-color {color:var(--mineralwasser2-color);} .has-grapefruit-color-color {color:var(--grapefruit-color);} .has-schriftfarbe-color-color {color:var(--schriftfarbe-color);} .has-apfelschorle-color-color {color:var(--apfelschorle-color);} .has-kiwi-color-color {color:var(--kiwi-color);} .has-krauterlimonade-color-color {color:var(--krauterlimonade-color);} .has-schriftfarbe2-color-color {color:var(--schriftfarbe2-color);} .has-schriftfarbe3-color-color {color:var(--schriftfarbe3-color);} .has-schriftfarbe4-color-color {color:var(--schriftfarbe4-color);} .has-mango-color-color {color:var(--mango-color);} .has-johannisbeerschorle-color-color {color:var(--johannisbeerschorle-color);} .has-zitrone-color-color {color:var(--zitrone-color);} .has-schriftfarbe5-color-color {color:var(--schriftfarbe5-color);} .has-schriftfarbe6-color-color {color:var(--schriftfarbe6-color);} .has-schriftfarbe7-color-color {color:var(--schriftfarbe7-color);} .has-primary-color-background-color {background-color:var(--primary-color);} .has-secondary-color-background-color {background-color:var(--secondary-color);} .has-text-color-background-color {background-color:var(--text-color);} .has-title-color-background-color {background-color:var(--title-color);} .has-subtitle-color-background-color {background-color:var(--subtitle-color);} .has-hellblau-color-background-color {background-color:var(--hellblau-color);} .has-pfirsichfarben-color-background-color {background-color:var(--pfirsichfarben-color);} .has-mineralwasser-color-background-color {background-color:var(--mineralwasser-color);} .has-mineralwasser2-color-background-color {background-color:var(--mineralwasser2-color);} .has-grapefruit-color-background-color {background-color:var(--grapefruit-color);} .has-schriftfarbe-color-background-color {background-color:var(--schriftfarbe-color);} .has-apfelschorle-color-background-color {background-color:var(--apfelschorle-color);} .has-kiwi-color-background-color {background-color:var(--kiwi-color);} .has-krauterlimonade-color-background-color {background-color:var(--krauterlimonade-color);} .has-schriftfarbe2-color-background-color {background-color:var(--schriftfarbe2-color);} .has-schriftfarbe3-color-background-color {background-color:var(--schriftfarbe3-color);} .has-schriftfarbe4-color-background-color {background-color:var(--schriftfarbe4-color);} .has-mango-color-background-color {background-color:var(--mango-color);} .has-johannisbeerschorle-color-background-color {background-color:var(--johannisbeerschorle-color);} .has-zitrone-color-background-color {background-color:var(--zitrone-color);} .has-schriftfarbe5-color-background-color {background-color:var(--schriftfarbe5-color);} .has-schriftfarbe6-color-background-color {background-color:var(--schriftfarbe6-color);} .has-schriftfarbe7-color-background-color {background-color:var(--schriftfarbe7-color);} /* Header */ .header {padding:30px 0 25px 0;} .header .wrapper {padding:0 77px;display:flex;align-items:center;justify-content:space-between;} .header .logo {font-size:0;line-height:0;width:122px;height:126px;background:url(images/logo.png) center center/contain no-repeat;} /* Top menu */ .header nav ul {display:flex;flex-wrap:wrap;} .header nav ul li {font-size:24px;font-weight:500;position:relative;text-transform:uppercase;padding-left:22px;} .header nav ul li:not(:last-child) {margin-right:20px;} .header nav ul li.current-menu-item {font-weight:700;} .header nav ul li.current-menu-item:before {content:'';display:block;width:10px;height:10px;position:absolute;top:13px;left:0;background:var(--primary-color);} /* Heading */ .heading {/*min-height:1042px;*/min-height:1px;position:relative;margin-bottom:170px;} .heading img[srcset] {position:static;height:auto;} .heading img {-webkit-mask:url(images/demo/wave.png) center bottom/100% auto repeat-x;mask:url(images/demo/wave.png) center bottom/100% auto repeat-x;} .heading [data-slide] {animation:bounce 1.5s infinite;cursor:pointer;display:block;position:absolute;top:calc(100% + 15px);left:50%;transform:translateX(-50%);width:47px;height:79px;background:url(images/icons/arrow.svg) center center/contain no-repeat;filter:brightness(0) saturate(100%) invert(49%) sepia(12%) saturate(1719%) hue-rotate(173deg) brightness(89%) contrast(86%);} .home .heading [data-slide] {filter: brightness(0) saturate(100%) invert(78%) sepia(40%) saturate(5219%) hue-rotate(299deg) brightness(99%) contrast(88%);} @keyframes bounce {0% {top:calc(100% + 15px);} 50% {top:calc(100% + 35px);} 100% {top:calc(100% + 15px);}} /* Content block */ .content_block {padding-bottom:70px;} .content_block .wrapper {padding:0 77px;} .content_block article > ul, .content_block article > ol {margin-bottom:20px;} .content_block article > ul li {list-style-position:inside;list-style-type:disc;} .content_block article > ol li {list-style-position:inside;list-style-type:decimal;} .content_block article > h1.has-text-align-center {max-width:1540px;margin-left:auto;margin-right:auto;} .content_block article > h1.has-text-align-center + h2.has-text-align-center {max-width:1425px;margin-left:auto;margin-right:auto;} .content_block article > h1.has-text-align-center + p.has-text-align-center, .content_block article > h2.has-text-align-center + p.has-text-align-center {max-width:940px;margin-left:auto;margin-right:auto;} .content_block article > p.has-text-align-center + p.has-text-align-center {max-width:770px;margin-left:auto;margin-right:auto;} .content_block article > * {position:relative;transition:all ease .6s .4s;transform:translate3d(0,100px,0);opacity:0;} .content_block article > *.inview {opacity:1;transform:translateZ(0);} .content_block .wp-block-image.aligncenter {margin-left:auto;margin-right:auto;} /* Media/Text */ .wp-block-media-text {margin:0 auto 180px auto;max-width:1700px;} .wp-block-media-text .wp-block-media-text__content {padding:0 0 0 180px;} .wp-block-media-text .wp-block-media-text__content p strong {font-weight:500;} .wp-block-media-text .wp-block-media-text__media {position:relative;} .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {padding:0 160px 0 0;} .wp-block-media-text.media_content .wp-block-media-text__media {text-align:right;} .wp-block-media-text.media_content.has-media-on-the-right .wp-block-media-text__media {text-align:left;} .wp-block-media-text.media_content .wp-block-media-text__media img {width:auto;height:revert-layer;max-width:100%;object-fit:contain;} .wp-block-media-text .wp-block-media-text__content h3 {color:#719cc5;} .wp-block-media-text .wp-block-media-text__content h4, .wp-block-media-text .wp-block-media-text__content h5 {color:#103073;font:600 30px/1.2 'Rubik';padding-bottom:30px;} /* Cover */ .wp-block-cover {margin:0 auto 160px auto;max-width:1700px;min-height:1px;padding:130px 110px 140px 100px;-webkit-mask:url(images/demo/wave3.png) center top/100% auto repeat-x, url(images/demo/wave2.png) center bottom/100% auto repeat-x, url(images/demo/not_wave.png) center center/100% auto repeat-x;mask:url(images/demo/wave3.png) center top/100% auto repeat-x, url(images/demo/wave2.png) center bottom/100% auto repeat-x, url(images/demo/not_wave.png) center center/100% auto repeat-x;} .wp-block-cover .wp-block-cover__background:before {content:'';background:url(images/demo/coasties.svg) center center/105% no-repeat;position:absolute;top:65px;left:0;display:block;width:100%;height:280px;display:none;} .wp-block-cover .wp-block-cover__inner-container .wp-block-media-text {margin:0;grid-template-columns:1fr 58%;} @media only screen and (min-width: 1350px) and (max-width: 1650px) { .wp-block-cover .wp-block-cover__inner-container .wp-block-media-text {grid-template-columns:1fr 45%;} } /* Bottle info */ .bottle_info {margin:40px 0 330px 0;} .bottle_info section {position:relative;max-width:1882px;margin:0 auto 67px auto;display:flex;align-items:center;box-sizing:border-box;} .bottle_info section:before {content:'';position:absolute;top:-84px;left:16%;display:block;width:157px;height:157px;background:url(images/demo/m.png) center center/contain no-repeat;z-index:10;} .bottle_info section .img {position:absolute;top:-78px;left:5%;width:293px;height:447px;z-index:2;} .bottle_info section .img1 {/*margin-top:150px;*/margin-top:100px;} .bottle_info section .img.landscape {width:433px;height:332px;} .bottle_info section .img img {width:100%;height:100%;object-fit:cover;border-radius:15px;} .bottle_info section .img2 {top:-84px;left:auto;right:12%;width:256px;height:417px;margin-top:100px;z-index:3;} .bottle_info section .img2.landscape {width:380px;height:270px;right:4%;} .bottle_info section .img3 {top:auto;bottom:-260px;left:17%;margin-bottom:70px;width:237px;height:386px;} .bottle_info section .img3.landscape {width:295px;height:308px;} .bottle_info section .img4 {top:auto;bottom:-395px;left:auto;right:-30px;/*margin-bottom:370px;*/width:407px;height:522px;} .bottle_info section .img4.landscape {width:400px;height:300px;} .bottle_info section .bottle {max-width:137px;position:relative;margin-right:94px;} .bottle_info section .bottle img {max-width:100%;} .bottle_info section .bottle:before {content:'';display:block;width:70px;height:66px;position:absolute;top:36px;left:100%;background:url(images/icons/arrow2.png) center center/contain no-repeat;} .bottle_info section .content {flex:1;padding:35px 127px 15px 200px;border-radius:15px;box-shadow:0 4px 37.5px 0px #00000040;box-sizing:border-box;font-size:20px;position:relative;z-index:1;max-width:882px;margin:0 auto;} .bottle_info section .content p strong {font-size:16px;font-weight:600;} .bottle_info section .content h3, .bottle_info section .content h4, .bottle_info section .content h6 {font:600 22px/1.4 'Rubik';padding-bottom:10px;} .bottle_info section .content h4 {font-weight:800;} /*.post-zitronenlimonade-mit-yuzu-geschmack .bottle_info section .content h4 {color:#fc9b3a;} .post-natuerliches-mineralwasser-mit-ohne-kohlensaeure .bottle_info section .content h4 {color:#1e73be;}*/ .bottle_info .center_button {text-align:center;position:relative;z-index:2;} @media only screen and (min-width: 960px) { body:not(.single) .bottle_info .center_button {padding-left:220px;} } @media only screen and (max-width: 1880px) { body:not(.single) .bottle_info section .img1 {left:3%;width:16vw;} body:not(.single) .bottle_info section .img1.landscape {width:22vw;} body:not(.single) .bottle_info section .img2 {right:7%;width:14vw;} body:not(.single) .bottle_info section .img2.landscape {width:18vw;} body:not(.single) .bottle_info section .img3 {left:10%;width:17vw;} body:not(.single) .bottle_info section .img3.landscape {width:18vw;} body:not(.single) .bottle_info section .img4, body:not(.single) .bottle_info section .img4.landscape {width:20vw;} body:not(.single) .bottle_info .center_button {padding-left:180px;} } @media only screen and (max-width: 1670px) { body:not(.single) .bottle_info section .img2.landscape {right:1%;} } @media only screen and (max-width: 1400px) { body:not(.single) .bottle_info section:before {left:7%;} body:not(.single) .bottle_info section .img1 {left:-30px;} body:not(.single) .bottle_info section .img1.landscape {width:20vw;} body:not(.single) .bottle_info section .img2 {right:2%;} body:not(.single) .bottle_info section .img2.landscape {right:-20px;} body:not(.single) .bottle_info section .img3 {left:7%;} body:not(.single) .bottle_info section .img4, body:not(.single) .bottle_info section .img4.landscape {width:17vw;} body:not(.single) .bottle_info .center_button {padding-left:120px;} } @media only screen and (max-width: 1240px) { body:not(.single) .bottle_info section:before {left:5%;} body:not(.single) .bottle_info section .img1 {left:0;} body:not(.single) .bottle_info section .img2 {right:2%;width:10vw;height:300px;} body:not(.single) .bottle_info section .img2.landscape {right:0;width:14vw;} body:not(.single) .bottle_info section .img4, body:not(.single) .bottle_info section .img4.landscape {right:0;width:14vw;height:350px;} } .single .bottle_info {margin:145px 0 646px 0;position:relative;} .single .bottle_info:before {content:'';display:block;width:100vw;height:90%;position:absolute;top:30px;left:calc((-100vw + 100%) / 2);background:url(images/demo/Wellen_lang_10.png) center center/auto 100% no-repeat;} .post-mango-maracuja-schorle .bottle_info:before {background-image:url(images/demo/Wellen_lang_02.png);} .post-energydrink-mit-kiwi-apfel-geschmack .bottle_info:before {background-image:url(images/demo/Wellen_lang_03.png);} .post-zitronenlimonade-mit-yuzu-geschmack .bottle_info:before {background-image:url(images/demo/Wellen_lang_01.png);} .post-schwarze-johannisbeerschorle .bottle_info:before {background-image:url(images/demo/Wellen_lang_07.png);} .post-limonade-mit-kraeutergeschmack .bottle_info:before {background-image:url(images/demo/Wellen_lang_03.png);} .post-apfelschorle-naturtrueb .bottle_info:before {background-image:url(images/demo/Wellen_lang_09.png);} .post-natuerliches-mineralwasser-mit-ohne-kohlensaeure .bottle_info:before {background-image:url(images/demo/Wellen_lang_11.png);} .single .bottle_info + * {margin-top:-200px;} .single .bottle_info section {margin-bottom:92px;} .single .bottle_info section:before {display:none;} .single .bottle_info section .content {font-size:14px;padding:50px 85px 60px 250px;display:flex;align-items:center;} .single .bottle_info section .content .bottle + div {flex:1;} .single .bottle_info section .img {left:14%;} .single .bottle_info section .img1 {margin-top:0;} .single .bottle_info section .img2 {left:auto;right:8%;margin-top:0;} .single .bottle_info section .img2.landscape {right:0;} .single .bottle_info section .img3 {left:20%;margin-bottom:0;} .single .bottle_info section .img4 {left:auto;right:14%;width:321px;margin-bottom:-100px;} @media only screen and (max-width: 1690px) { .single .bottle_info section .img1 {left:10%;} .single .bottle_info section .img2 {right:2%;} .single .bottle_info section .img2.landscape {right:-60px;max-width:23vw;} .single .bottle_info section .img3 {left:16%;} .single .bottle_info section .img4 {right:10%;} } @media only screen and (max-width: 1480px) { .single .bottle_info section .img1 {left:5%;} .single .bottle_info section .img2 {right:-30px;} .single .bottle_info section .img3 {left:10%;} .single .bottle_info section .img4 {right:0;} } @media only screen and (max-width: 1350px) { .single .bottle_info section .img1 {left:0;} .single .bottle_info section .img2 {display:none;} .single .bottle_info section .img2.landscape {right:0;max-width:auto;} .single .bottle_info section .img3 {left:5%;} .single .bottle_info section .img4 {right:0;max-width:20vw;} } /* Numbers list */ .numbers_list {max-width:1437px;margin:30px auto 50px auto;} .numbers_list ul {display:grid;grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));grid-gap:32px 80px;} .numbers_list ul li {font-size:18px;color:var(--primary-color);} .numbers_list ul li .number {font-size:70px;color:var(--secondary-color);font-weight:700;line-height:1.2;} .numbers_list ul li h3 {font-size:22px;font-weight:500;} /* Bottles slider */ .bottles_slider {margin:70px auto 140px auto;max-width:1820px;padding:0 150px;box-sizing:border-box;position:relative;} .bottles_slider:before {content:'';display:block;width:100vw;height:510px;position:absolute;top:-30px;left:calc((-100vw + 100%) / 2);background:url(images/demo/Wellen_lang_01.png) center center/auto 100% no-repeat;} .single .bottles_slider:before {background-image:url(images/demo/Wellen_lang_10.png);} .bottles_slider .slick-arrow {position:absolute;top:50%;transform:translateY(-50%);left:-150px;width:80px;height:80px;border-radius:50%;background:var(--primary-color) url(images/icons/prev.svg) center center no-repeat;font-size:0;line-height:0;border:none;transition:opacity ease-in-out .3s;} .bottles_slider .slick-arrow:hover {opacity:.7;} .bottles_slider .slick-next {left:auto;right:-150px;background-image:url(images/icons/next.svg);} .bottles_slider figure {position:relative;text-align:center;} .bottles_slider figure .link {width:100%;height:100%;display:block;position:absolute;top:0;left:0;z-index:4;font-size:0;line-height:0;cursor:url(images/icons/cursor.png), auto;} .bottles_slider figure > div {height:419px;max-width:135px;margin:30px auto 40px auto;} .bottles_slider figure > div img {height:100%;max-width:100%;object-fit:contain;transition:transform ease-in-out .3s;} .bottles_slider figure:hover > div img {transform:scale(1.05);} .bottles_slider figure figcaption {font:18px 'Brother 1816';color:var(--primary-color);padding:0 10%;} .bottles_slider figure figcaption h3, .bottles_slider figure figcaption header {font:600 26px/1.4 'Ink Free';padding-bottom:10px;color:#5479A7;} .single .bottles_slider figure figcaption h3, .single .bottles_slider figure figcaption header {color:#5479A7 !important;} /* Footer */ .footer {padding:128px 0;background:var(--primary-color);color:#fff;position:relative;z-index:5;} .footer .wrapper {max-width:1730px;} .footer a, .footer a:visited {color:#fff;} .footer a:hover {color:#8394b0;} .footer [data-slide] {cursor:pointer;display:block;position:absolute;top:-60px;right:20px;width:47px;height:79px;background:url(images/icons/prev.svg) center center/contain no-repeat;transform:rotate(90deg);} .footer .wp-block-columns {background:url(https://coasties.de/wp-content/uploads/2026/02/logo_footer.png) left top/200px auto no-repeat;padding-top:170px;} .footer .wp-block-columns p {padding:50px 0 15px 0;} .footer .wp-block-columns p a {text-decoration:underline;} .footer .wp-block-image {text-align:right;margin-bottom:15px;} .footer .wp-block-column:nth-child(2) {display:flex;flex-wrap:wrap;align-items:flex-end;} .footer .menu-social-menu-container ul {font-size:0;line-height:0;padding:0 55px 20px 0;} .footer .menu-social-menu-container .menu li:not(:last-child) {padding-right:35px;} .footer .menu-social-menu-container li a {display:block;width:50px;height:50px;background:url(images/blank.gif) center center/contain no-repeat;opacity:1;transition:opacity ease-in-out .2s;} .footer .menu-social-menu-container li a:hover {opacity:.8;} .footer .menu-social-menu-container li a[href*="instagram"] {background-image:url(images/icons/instagram.png);} .footer .menu-social-menu-container li a[href*="facebook"] {background-image:url(images/icons/facebook.png);} .footer .menu {display:flex;flex-wrap:wrap;padding-bottom:15px;} .footer .menu li {text-transform:uppercase;} .footer .menu li:not(:last-child) {padding-right:50px;} .sticky_contact {position:fixed;bottom:10px;right:10px;z-index:9999;} .sticky_contact a {display:block;width:55px;height:55px;border-radius:50px;background:var(--secondary-color);margin-bottom:8px;position:relative;transform:translateX(100px);transition:transform .45s cubic-bezier(0.72, 0.43, 0, 1.21);} .sticky_contact.inview a {transform:translateX(0);} .sticky_contact a:before {content:'';display:block;width:55px;height:55px;border-radius:50px;background:url(images/icons/phone.svg) center center/40px auto no-repeat;filter:invert();position:relative;z-index:2;} .sticky_contact a:after {content:'';display:block;width:55px;height:55px;border-radius:50px;background:var(--secondary-color);position:absolute;top:0;right:0;z-index:1;} .sticky_contact a[href*="mailto"] {transition-delay:.05s;} .sticky_contact a[href*="mailto"]:before {background-image:url(images/icons/email.svg);background-size:34px auto;} .sticky_contact span {display:flex;align-items:center;width:55px;height:55px;box-sizing:border-box;padding:0 18px;color:#fff;position:absolute;top:0;right:0;border-radius:50px;background:var(--secondary-color);transition:.5s cubic-bezier(0.6, 0, 0.5, 1);overflow:hidden;} .sticky_contact a:hover span {width:260px;} .sticky_contact a[href*="mailto"]:hover span {width:260px;} /* Media Queries */ /* Desktop Wide */ @media only screen and (max-width: 1950px) { /* Heading */ .heading {margin-left:-15px;margin-right:-15px;} } @media only screen and (max-width: 1700px) { /* Cover */ .wp-block-cover {margin-left:-15px;margin-right:-15px;} } @media only screen and (max-width: 1650px) { /* Cover */ .wp-block-cover {-webkit-mask-image:url(images/demo/wave4.png), url(images/demo/wave5.png), url(images/demo/not_wave.png);mask-image:url(images/demo/wave4.png), url(images/demo/wave5.png), url(images/demo/not_wave.png);} } @media only screen and (max-width: 1350px) { body {font-size:20px;} h1 {font-size:60px;} h2 {font-size:50px;} h3 {font-size:50px;} h4 {font-size:44px;} h5 {font-size:26px;} h6 {font-size:22px;} /* Header */ .header nav ul li {font-size:22px;} /* Heading */ .heading {/*min-height:800px;*/margin-bottom:135px;} /* Media/Text */ .wp-block-media-text {margin-bottom:120px;} .wp-block-media-text .wp-block-media-text__content {padding:0 0 0 100px;} .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {padding:0 100px 0 0;} .wp-block-media-text .wp-block-media-text__content h4, .wp-block-media-text .wp-block-media-text__content h5 {font-size:26px;} /* Cover */ .wp-block-cover {margin-bottom:120px;padding:140px 80px;} .wp-block-cover .wp-block-cover__inner-container .wp-block-media-text {grid-template-columns:1fr 52%;} /* Footer */ .footer {padding:100px 0;} } @media only screen and (max-width: 1060px) { /* Cover */ .wp-block-cover {padding:100px 60px;} .wp-block-cover .wp-block-cover__inner-container .wp-block-media-text {grid-template-columns:1fr 48%;} } @media only screen and (max-width: 1240px) { /* Content block */ .content_block .wrapper {padding:0 15px;} } /* Tablets and mobiles */ @media only screen and (max-width: 959px) { body {font-size:18px;} h1 {font-size:42px;} h2 {font-size:34px;} h3 {font-size:34px;} h4 {font-size:30px;} h5 {font-size:24px;} h6 {font-size:18px;} /* Header */ .header nav ul li {font-size:20px;} /* Heading */ .heading {/*min-height:600px;*/margin-bottom:80px;} .heading [data-slide] {width:26px;height:44px;} @keyframes bounce {0% {top:calc(100% + 15px);} 50% {top:calc(100% + 25px);} 100% {top:calc(100% + 15px);}} /* Content block */ .content_block {padding-bottom:45px;} /* Media/Text */ .wp-block-media-text {margin-bottom:80px;} .wp-block-media-text .wp-block-media-text__content {padding:0 0 0 70px;} .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {padding:0 70px 0 0;} .wp-block-media-text.media_content .wp-block-media-text__media img {object-position:center top;} .wp-block-media-text .wp-block-media-text__content h4, .wp-block-media-text .wp-block-media-text__content h5 {font-size:24px;} /* Cover */ .wp-block-cover .wp-block-cover__background:before {top:-20px;} /* Bottle slider */ .bottles_slider figure figcaption h3, .bottles_slider figure figcaption header {font-size:18px;} /* Bottle info */ .bottle_info {margin:40px 0 230px 0;} .bottle_info section:before {top:-55px;left:-20px;width:87px;height:87px;} .bottle_info section .img {top:-78px;left:-190px;width:220px;height:300px;} .bottle_info section .img.landscape {width:300px;height:220px;} .bottle_info section .img2 {top:-64px;left:auto;right:-100px;width:200px;height:230px;} .bottle_info section .img2.landscape {width:230px;height:180px;} .bottle_info section .img3 {top:auto;bottom:-300px;left:-170px;width:237px;height:300px;} .bottle_info section .img3.landscape {width:300px;height:240px;} .bottle_info section .img4 {top:auto;bottom:-395px;left:auto;right:-180px;width:280px;height:400px;} .bottle_info section .img4.landscape {width:400px;height:270px;} .bottle_info section .content {padding:35px 127px 15px 130px;} body:not(.single) .bottle_info section .img1 {left:0;width:13vw;} body:not(.single) .bottle_info section .img1.landscape {width:13vw;} body:not(.single) .bottle_info section .img2 {right:0;width:13vw;} body:not(.single) .bottle_info section .img2.landscape {width:13vw;} body:not(.single) .bottle_info section .img3 {left:2%;width:20vw;} body:not(.single) .bottle_info section .img3.landscape {width:22vw;} body:not(.single) .bottle_info section .img4, body:not(.single) .bottle_info section .img4.landscape {right:0;width:15vw;} body:not(.single) .bottle_info .center_button {padding-left:80px;} .single .bottle_info {margin:100px 0 400px 0;} .single .bottle_info section {margin-bottom:60px;} .single .bottle_info section .content {padding:50px 85px 60px 250px;} .single .bottle_info section .img1 {left:0;width:25vw;} .single .bottle_info section .img3 {left:0;width:20vw;} .single .bottle_info section .img4 {left:auto;right:0;margin-bottom:-100px;} /* Footer */ .footer {padding:80px 0;} } /* Mobile portrait and landscape modes */ @media only screen and (max-width: 800px) { /* Header */ .header {padding:15px 0;} .header .wrapper {padding:0 15px;} .header .logo {margin-right:35px;} .header nav ul li {font-size:18px;padding-left:14px;} .header nav ul li:not(:last-child) {margin-right:16px;} .header nav ul li.current-menu-item:before {width:7px;height:7px;top:11px;} /* Heading */ /*.heading {min-height:400px;}*/ /* Media/Text */ .wp-block-media-text {display:block;} .wp-block-media-text .wp-block-media-text__content {padding:0;} .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {padding:0;} .wp-block-media-text .wp-block-media-text__media {text-align:left;max-width:500px;margin:0 auto 35px auto;} .wp-block-media-text.media_content .wp-block-media-text__media > img {width:100%;height:auto;} /* Cover */ .wp-block-cover {padding:80px 20px;margin-bottom:80px;-webkit-mask-image:url(images/demo/wave7.png), url(images/demo/wave6.png), url(images/demo/not_wave.png);mask-image:url(images/demo/wave7.png), url(images/demo/wave6.png), url(images/demo/not_wave.png);} .wp-block-cover .wp-block-media-text .wp-block-media-text__media {margin:35px auto 0 auto;} /* Bottle info */ .bottle_info {margin:30px 0 60px 0;} .bottle_info section .content {padding:35px 20px;} .bottle_info section .img {top:-78px;left:-30px;width:100px;height:150px;} .bottle_info section .img1 {display:none;} .bottle_info section .img.landscape {width:150px;height:100px;} .bottle_info section .img2 {top:-84px;left:auto;right:-30px;width:100px;height:150px;display:none;} .bottle_info section .img2.landscape {width:150px;height:100px;} .bottle_info section .img3 {top:auto;bottom:-260px;left:-30px;width:170px;height:200px;/*margin-bottom:250px;*/} .bottle_info section .img3.landscape {width:200px;height:170px;} .bottle_info section .img4 {top:auto;bottom:-395px;left:auto;right:-40px;width:170px;height:220px;/*margin-bottom:430px;*/margin-bottom:220px;} .bottle_info section .img4.landscape {width:220px;height:170px;} body:not(.single) .bottle_info section .img3 {left:0;width:20vw;} body:not(.single) .bottle_info section .img3.landscape {width:22vw;} body:not(.single) .bottle_info section .img4, body:not(.single) .bottle_info section .img4.landscape {right:0;width:22vw;height:200px;} body:not(.single) .bottle_info .center_button {padding-left:0;padding-top:170px;} .single .bottle_info {margin:80px 0 140px 0;} .single .bottle_info + * {margin-top:0;padding-top:70px;} .single .bottle_info section .content {padding:50px 20px;} .single .bottle_info section .img {left:0;} .single .bottle_info section .img1, .single .bottle_info section .img2 {display:block;} .single .bottle_info section .img2 {left:auto;right:0;} .single .bottle_info section .img3 {left:0;} .single .bottle_info section .img4 {left:auto;right:0;margin-bottom:70px;} /* Bottles slider */ .bottles_slider {margin:40px auto 100px auto;padding:0 80px;} .bottles_slider:before {height:420px;top:-10px;} .bottles_slider .slick-arrow {left:-80px;width:55px;height:55px;background-size:30px auto;} .bottles_slider .slick-next {left:auto;right:-80px;} .bottles_slider figure > div {height:360px;} .bottles_slider figure .link {cursor:url(images/icons/cursor2.png), auto;} .bottles_slider figure figcaption {font-size:16px;} /* Numbers list */ .numbers_list ul li {text-align:center;padding-left:10%;padding-right:10%;} /* Footer */ .footer {padding:70px 0;} .footer .wp-block-columns {display:block;background-position:center top;background-size:120px auto;padding-top:100px;text-align:center;} .footer .wp-block-image {text-align:center;margin-bottom:0;} .footer .wp-block-column:nth-child(2) {justify-content:center;align-items:center;flex-flow:column wrap;padding:25px 0;} .footer .menu-social-menu-container ul {padding:0 0 20px 0;} .footer .menu {justify-content:center;} .footer .menu li:not(:last-child) {padding-right:32px;} .sticky_contact span {display:none;} } /* Mobile portrait mode */ @media only screen and (max-width: 600px) { /* Cover */ .wp-block-cover {-webkit-mask-image:url(images/demo/wave9.png), url(images/demo/wave8.png), url(images/demo/not_wave.png);mask-image:url(images/demo/wave9.png), url(images/demo/wave8.png), url(images/demo/not_wave.png);} } @media only screen and (max-width: 479px) { /* Header */ .header .wrapper {display:block;} .header .logo {display:block;margin:0 auto 14px auto;width:82px;height:85px;} .header nav ul {justify-content:center;} /* Heading */ /*.heading {min-height:280px;}*/ /* Media/Text */ .wp-block-media-text .wp-block-media-text__media .additional_image {max-width:60%;} .wp-block-media-text .wp-block-media-text__media .additional_image > img {width:100%;height:auto;} /* Cover */ .wp-block-cover .wp-block-cover__background:before {top:-80px;} /* Bottle info */ .bottle_info section, .single .bottle_info section .content {display:block;} body:not(.single) .bottle_info section .img3.landscape {width:30vw;} body:not(.single) .bottle_info section .img4, body:not(.single) .bottle_info section .img4.landscape {width:30vw;} .bottle_info section .bottle {max-width:70px;margin:0 auto 30px auto;} .bottle_info section .bottle:before {display:none;} .single .bottle_info .center_button {position:relative;top:150px;padding-bottom:50px;} .single .bottle_info section .img3 {width:35vw;margin-bottom:70px;} .single .bottle_info section .img4 {width:40vw;max-width:40vw;margin-bottom:220px;} }