* {
box-sizing: border-box;
}
body {
font-family: "forma-djr-display", sans-serif;
font-weight: 500;
font-style: normal;
background-color: #e0dcd2;
color: #000;
}
a {
color: inherit;
text-decoration: none;
}
h1 {
font-size: 30px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
margin: 0;
} .img-fluid {
width: 100%;
height: auto;
}
.svg_txt { height: 3vw;
}
br.mobile {
display: none;
}
#zini {
position: fixed;
z-index: 1;
left: 160px;
bottom: 40%;
width: 11%;
transition: all 300ms ease-in-out; }
@media (max-width: 768px) {
.svg_txt {
height: 1.6rem;
}
#zini {
left: 50px;
bottom: 40%;
width: 23%;
}
}  section.top {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 50px 50px;
}
section.top > div:first-child {
position: relative;
background-color: #e0dcd2;
}
.top .wine-names {
position: absolute;
z-index: 5;
font-size: clamp(54px, 15.84vw, 112px);
padding-left: 90px;
padding-top: 40px;
letter-spacing: 0.2em;
color: #000000;
min-width: 70vw;
}
.top .flaschen {
position: absolute;
top: -3%;
right: 0;
width: 25%;
padding: 0 10% 0 0;
z-index: 5;
}
.top .flaschen > img { }
.top > div:nth-child(2) {
padding-top: 60px;
}
.top > div:nth-child(2) h1 {
text-align: right;
padding-right: 90px;
padding-bottom: 28%;
}
.flaschen img.stacked_02,
.flaschen img.stacked_03 {
display: none;
}
.scrolled .flaschen img.stacked_01 {
display: none;
}
.scrolled_01 .flaschen img.stacked_02 {
display: none;
}
.scrolled.scrolled_02 .flaschen img.stacked_02 {
display: none;
} .scrolled .flaschen img.stacked_02 {
display: block;
} @media (max-width: 768px) {
section.top {
grid-template-columns: 1fr;
padding: 0 20px 35px 40px;
}
section.top h1 {
display: none;
}
.top .wine-names {
position: relative;
padding-top: 10px;
padding-left: 0;
word-break: break-word;
hyphens: auto;
}
.top .flaschen {
width: 33%;
max-width: 140px;
padding: 0 13% 0 0;
}
.top > div:nth-child(2) {
padding-top: 0;
margin-top: -5%;
}
.top > div:nth-child(2) img {
width: 67%;
margin-left: 33%;
margin-top: -4%;
}
}
section.second {
position: relative;
padding: 50px 50px 0 100px;
width: 100%;
}
section.second p {
padding-left: 40px;
padding-top: 15%;
font-size: clamp(12px, 2vw, 24px);
letter-spacing: 0.2em;
width: 50%;
}
section.second p.big {
position: relative;
color: #000;
padding-top: 50%;
font-size: clamp(18px, 4vw, 70px);
letter-spacing: 0.2em;
line-height: 1.1;
width: 100%;
}
section.second p.big:before {
content: "";
background-image: url(//www.andreasziniel.at/wp/wp-content/themes/bf_ziniel/images/stripes.svg);
height: 7%;
width: 7%;
position: absolute;
margin-top: -5%;
left: -1%;
z-index: 999;
background-repeat: no-repeat;
transform: rotate(-12deg);
}
section.second img.wolke {
position: absolute;
width: 12%;
right: 8%;
bottom: 10%;
transform: rotate(-12deg);
}
section.second .bg {
top: 7%;
position: absolute;
padding-left: 25%;
z-index: -1;
}
section.fill-black {
background-color: #000000;
height: 100px;
width: 100%;
z-index: -2;
position: relative;
margin-top: -1.9%;
}
@media (max-width: 768px) {
section.second {
padding: 50px 20px 0 40px;
}
section.second p {
padding-left: 0;
padding-right: 40px;
width: 100%;
}
section.fill-black {
display: none;
}
}
section.third {
background-color: #000;
color: #e0dcd2;
padding: 50px 50px 15% 140px;
position: relative;
z-index: 3;
}
section.third p,
section.third a {
font-size: clamp(22px, 4vw, 70px);
letter-spacing: 0.2em;
text-transform: uppercase;
}
section.third .inner {
display: grid;
grid-template-columns: 1fr 1fr;
width: 100%;
}
section.third .inner > div {
position: relative;
}
section.third .inner > div:nth-child(2) {
margin-top: -4%;
line-height: 1.2;
}
section.third .inner > div:nth-child(2) a {
line-height: 1.3;
}
section.third .inner img.contact {
position: absolute;
width: 56%;
height: auto;  top: 0;
}
p.phone {
padding-bottom: 4rem;
padding-top: 1rem;
}
@media (max-width: 768px) {
section.third {
padding: 80px 40px 120px 40px;
}
section.third .inner > div:nth-child(1) {
order: 2;
}
section.third .inner > div:nth-child(2) {
order: 1;
}
section.third .inner {
grid-template-columns: 1fr;
grid-gap: 3rem;
text-align: right;
}
section.third .inner img.contact {
top: -408%; right: 0;
width: 60%;
}
p.phone {
padding-top: 9rem;
padding-bottom: 2rem;
}
}
section.fourth {
min-height: 100px;
padding: 0 50px 50px 140px;
}
img.traktor {
width: 50%;
height: auto;
margin-top: -7%;
position: relative;
z-index: 3;
}
section.fourth img.illu {
width: 10%;
height: auto;
min-width: 177px;
margin-left: 10%;
margin-bottom: -6%;
}
@media (max-width: 768px) {
section.fourth {
padding: 0;
}
img.traktor {
margin-top: -20%;
width: 70%;
}
section.fourth img.illu {
width: 29%;
height: auto;
min-width: unset;
margin-left: unset;
margin-bottom: -17%;
padding: 0 5%;
}
} section.ourwines {
padding: 140px 50px 50px 50px;
text-align: center;
}
section.ourwines img.illu {
width: 20%;
min-width: 150px;
}
section.ourwines .owl-carousel {
padding: 5% 0;
position: relative;
}
section.ourwines .owl-carousel .item {
display: flex;
flex-flow: column;
align-items: center;
}
section.ourwines .owl-carousel img {
max-width: 34%;
}
.owl-carousel .name {
margin-top: 2rem;
font-size: clamp(12px, 3vw, 24px);
letter-spacing: 0.2em;
}
.owl-nav {
position: absolute;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
padding: 0;
top: 0;
left: 0;
}
.owl-carousel .owl-stage-outer {
z-index: 10;
}
span.btn-left {
content: "";
background-image: url(//www.andreasziniel.at/wp/wp-content/themes/bf_ziniel/images/arrow_left.svg);
background-repeat: no-repeat;
height: 50px;
width: 50px;
position: absolute;
left: 0;
z-index: 10;
}
span.btn-right {
content: "";
background-image: url(//www.andreasziniel.at/wp/wp-content/themes/bf_ziniel/images/arrow_right.svg);
background-repeat: no-repeat;
height: 50px;
width: 50px;
position: absolute;
right: 0;
z-index: 10;
}
@media (max-width: 768px) {
section.ourwines {
padding: 140px 15px 50px 15px;
text-align: center;
}
section.ourwines .owl-carousel {
padding: 20% 0;
}
section.ourwines .owl-carousel img {
max-width: 65%;
}
span.btn-left,
span.btn-right {
height: 20px;
width: 20px;
}
} section.fifth {
padding: 50px 140px;
font-size: clamp(24px, 3vw, 70px);
letter-spacing: 0.2em;
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 140px;
position: relative;
}
section.fifth > div {
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
}
section.fifth > div span {
display: block;
}
section.fifth img {
margin-bottom: -70%;
position: relative;
z-index: 4;
}
@media (max-width: 768px) {
section.fifth {
padding: 50px 25px 50px 40px;
grid-template-columns: 1fr;
grid-gap: 5rem;
}
section.fifth img {
width: 40%;
right: -25px;
position: absolute;
margin-bottom: -43%;
}
} section.sixth {
background-color: #000;
color: #e0dcd2;
padding: 77px 140px;
position: relative;
z-index: 3;
}
section.sixth p {
font-size: clamp(15px, 2vw, 16px);
}
section.sixth img { width: auto;
margin-bottom: 2.1rem;
}
section.sixth .left {
padding-bottom: 4rem;
text-transform: uppercase;
}
section.sixth .right {
text-align: right;
text-transform: uppercase;
}
section.sixth .left p {
width: 75%;
letter-spacing: 0.2em;
line-height: 1.2;
}
section.sixth .right p {
width: 47%;
margin-left: 53%;
letter-spacing: 0.2em;
line-height: 1.2;
}
section.sixth p span.trenner:last-of-type {
display: none;
}
span.strike_01,
span.strike_02 {
display: inline-block;
position: relative;
}
span.strike_01:before {
content: "";
position: absolute;
background-image: url(//www.andreasziniel.at/wp/wp-content/themes/bf_ziniel/images/strike_01.svg);
background-repeat: no-repeat;
background-size: contain;
height: 123%;
width: 123%;
left: -12%;
top: -26%;
}
span.strike_02:before {
content: "";
position: absolute;
background-image: url(//www.andreasziniel.at/wp/wp-content/themes/bf_ziniel/images/strike_02.svg);
background-repeat: no-repeat;
background-size: contain;
height: 100%;
width: 100%;
left: -1%;
top: -13%;
}
@media (max-width: 768px) {
section.sixth {
padding: 40px;
}
section.sixth img { width: auto;
margin-bottom: 15px;
}
section.sixth .left p {
width: 93%;
line-height: 1.5;
}
section.sixth .right p {
width: 95%;
margin-left: 5%;
line-height: 1.5;
}
br.mobile {
display: block;
}
} section.second-try {
width: 100%;
height: 100%;
padding-left: 0px;
padding-top: 0px;
position: relative;
display: flex;
}
section.second-try p {
padding-top: 15%;
font-size: clamp(12px, 2vw, 24px);
letter-spacing: 0.2em;
width: 40%;
position: absolute;
margin-left: 140px;
}
section.second-try p.big {
color: #000;
font-size: clamp(18px, 4vw, 70px);
letter-spacing: 0.2em;
line-height: 1.1;
position: absolute;
margin-left: 140px;
bottom: 7vw;
width: 80%;
}
section.second-try p.big:before {
content: "";
background-image: url(//www.andreasziniel.at/wp/wp-content/themes/bf_ziniel/images/stripes.svg);
height: 15%;
width: 14%;
position: absolute;
margin-top: -6%;
left: -4%;
z-index: 999;
background-repeat: no-repeat;
transform: rotate(-12deg);
}
section.second-try img.wolke {
position: absolute;
width: 12%;
right: 8%;
bottom: 18vw;
transform: rotate(-12deg);
}
section.second-try img.img-fluid {
height: 100%;
}
.bg-mobile {
display: none;
}
@media (max-width: 768px) {
section.second-try p,
section.second-try p.big {
margin-left: 40px;
}
section.second-try p {
width: 75%;
bottom: 80px;
padding-top: 0;
}
section.second-try p.big {
bottom: unset;
top: 0;
padding-top: 0;
}
section.second-try p.big:before {
height: 34%;
width: 34%;
margin-top: -10%;
left: -6%;
}
section.second-try img.img-fluid {
display: none;
}
section.second-try img.wolke {
position: absolute;
width: 29%;
right: 20px;
bottom: unset;
transform: rotate(-12deg);
top: 100px;
bottom: unset;
}
.bg-mobile {
display: block;
width: 106%;
height: 100%;
margin-left: -4%;
padding: 130px 0 145px;
overflow: hidden;
}
} h1.big {
font-size: clamp(17px, 3vw, 50px);
}
body.page-template-page-privacy h2,
body.page-template-page-imprint h2 {
font-size: 30px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
margin: 0;
}
body.page-template-page-privacy,
body.page-template-page-imprint {
margin: 60px 140px;
}
.privacy-head {
display: flex;
justify-content: space-between;
}
.privacy-head a.logo-mobile {
display: none;
}
section.page-template-page-privacy {
margin-top: 60px;
padding-right: 5%;
padding-bottom: 60px;
line-height: 1.3;
}
section.page-default p {
font-size: clamp(12px, 2vw, 24px);
letter-spacing: 0.15em;
line-height: 1.15;
text-transform: uppercase;
}
section.page-default p.big {
position: relative;
font-size: clamp(17px, 3vw, 50px);
margin: 0;
line-height: 1.1;
} .page-template-page-imprint section.page-default {
display: grid;
grid-template-columns: 1.25fr 1fr;
}
.page-template-page-imprint img.contact {
position: relative;
width: 54%;
height: auto; }
.page-template-page-imprint .privacy-head {
margin-bottom: 3rem;
}
.page-template-page-imprint p.phone:before {
content: "";
background-image: url(//www.andreasziniel.at/wp/wp-content/themes/bf_ziniel/images/stripes.svg);
height: 34%;
width: 20%;
position: absolute;
margin-top: -12%;
left: -13%;
z-index: 999;
background-repeat: no-repeat;
transform: rotate(-35deg);
}
.page-template-page-imprint section.page-default div:nth-child(2) {
margin-top: 8rem;
}
.page-default .svg_txt {
height: 2.6vw;
min-height: 20px;
}
@media (max-width: 768px) {
br.desktop {
display: none;
}
body.page-template-page-privacy,
body.page-template-page-imprint {
margin: 100px 40px 50px;
}
body.page-template-page-privacy .privacy-head h2,
body.page-template-page-imprint .privacy-head h2 {
display: none;
}
.privacy-head a.logo-mobile {
position: fixed;
z-index: 100;
display: block;
width: 100px;
top: 40px;
height: auto;
left: 50%;
transform: translate(-50%, -50%);
}
section.page-default {
padding-right: 0;
padding-bottom: 0;
margin-top: 35px;
}
.page-template-page-imprint section.page-default {
grid-template-columns: 1fr;
}
.page-template-page-imprint .privacy-head {
margin-bottom: 0;
}
.page-template-page-imprint section.page-default {
margin-top: 1.5rem;
}
.page-template-page-imprint section.page-default div:nth-child(2) {
display: flex;
flex-flow: column;
margin-top: 1rem;
}
.page-template-page-imprint p.phone {
order: -1;
padding-top: 0;
text-align: right;
}
.page-template-page-imprint p.phone:before {
display: none;
}
.page-template-page-imprint a.mail {
position: relative;
margin-top: 1rem;
display: inline-block;
}
.page-template-page-imprint a.mail:after {
content: "";
background-image: url(//www.andreasziniel.at/wp/wp-content/themes/bf_ziniel/images/stripes.svg);
height: 109%;
width: 18%;
position: absolute;
margin-top: -12%;
right: -22%;
z-index: 999;
background-repeat: no-repeat;
transform: rotate(40deg) rotateY(180deg);
}
.page-default .svg_txt {
margin-top: 0.4rem;
}
}