@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: url(/assets/fonts/open-sans/open-sans-v16-latin-300.eot); src: local('Open Sans Light'), local('OpenSans-Light'),
url(/assets/fonts/open-sans/open-sans-v16-latin-300.eot?#iefix) format('embedded-opentype'), url(/assets/fonts/open-sans/open-sans-v16-latin-300.woff2) format('woff2'), url(/assets/fonts/open-sans/open-sans-v16-latin-300.woff) format('woff'), url(/assets/fonts/open-sans/open-sans-v16-latin-300.ttf) format('truetype'), url(/assets/fonts/open-sans/open-sans-v16-latin-300.svg#OpenSans) format('svg'); } @font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url(/assets/fonts/open-sans/open-sans-v16-latin-regular.eot); src: local('Open Sans Regular'), local('OpenSans-Regular'),
url(/assets/fonts/open-sans/open-sans-v16-latin-regular.eot?#iefix) format('embedded-opentype'), url(/assets/fonts/open-sans/open-sans-v16-latin-regular.woff2) format('woff2'), url(/assets/fonts/open-sans/open-sans-v16-latin-regular.woff) format('woff'), url(/assets/fonts/open-sans/open-sans-v16-latin-regular.ttf) format('truetype'), url(/assets/fonts/open-sans/open-sans-v16-latin-regular.svg#OpenSans) format('svg'); } @font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url(/assets/fonts/open-sans/open-sans-v16-latin-600.eot); src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
url(/assets/fonts/open-sans/open-sans-v16-latin-600.eot?#iefix) format('embedded-opentype'), url(/assets/fonts/open-sans/open-sans-v16-latin-600.woff2) format('woff2'), url(/assets/fonts/open-sans/open-sans-v16-latin-600.woff) format('woff'), url(/assets/fonts/open-sans/open-sans-v16-latin-600.ttf) format('truetype'), url(/assets/fonts/open-sans/open-sans-v16-latin-600.svg#OpenSans) format('svg'); } @font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url(/assets/fonts/open-sans/open-sans-v16-latin-700.eot); src: local('Open Sans Bold'), local('OpenSans-Bold'),
url(/assets/fonts/open-sans/open-sans-v16-latin-700.eot?#iefix) format('embedded-opentype'), url(/assets/fonts/open-sans/open-sans-v16-latin-700.woff2) format('woff2'), url(/assets/fonts/open-sans/open-sans-v16-latin-700.woff) format('woff'), url(/assets/fonts/open-sans/open-sans-v16-latin-700.ttf) format('truetype'), url(/assets/fonts/open-sans/open-sans-v16-latin-700.svg#OpenSans) format('svg'); } @font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
src: url(/assets/fonts/open-sans/open-sans-v16-latin-800.eot); src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'),
url(/assets/fonts/open-sans/open-sans-v16-latin-800.eot?#iefix) format('embedded-opentype'), url(/assets/fonts/open-sans/open-sans-v16-latin-800.woff2) format('woff2'), url(/assets/fonts/open-sans/open-sans-v16-latin-800.woff) format('woff'), url(/assets/fonts/open-sans/open-sans-v16-latin-800.ttf) format('truetype'), url(/assets/fonts/open-sans/open-sans-v16-latin-800.svg#OpenSans) format('svg'); } @font-face {
font-family: 'handschrift';
src:  url(/assets/fonts/handschrift/TYPO-COMICS-Bold-DEMO.ttf.woff) format('woff'),
url(/assets/fonts/handschrift/TYPO-COMICS-Bold-DEMO.ttf.svg#TYPO-COMICS-Light-DEMO) format('svg'),
url(/assets/fonts/handschrift/TYPO-COMICS-Bold-DEMO.ttf.eot),
url(/assets/fonts/handschrift/TYPO-COMICS-Bold-DEMO.eot?#iefix) format('embedded-opentype'); 
font-weight: normal;
font-style: normal;
}
:root {
--hoch-braun: #F5A560;
--hoch-rot: #95391F;
}
html, body, p, label, input {
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 600;
}
h1,h2,h3,h4,h5,h6 {
font-family: 'handschrift','Open Sans',sans-serif;
color: var(--hoch-braun) !important;
text-shadow: 1px 1px 0px var(--hoch-rot), -1px -1px 0px var(--hoch-rot),-1px 1px 0px var(--hoch-rot),1px -1px 0px var(--hoch-rot);
}
label, input {
font-size: 18px;
}
html, .root {
font-size: 18px;
line-height: 27px;
}
body, .article {
font-size: 1em;
line-height: 1.5em; }
h1, .h1,
h2, .h2 {
font-size: 4.88888889em;
line-height: 1.22727273em !important;
margin-top: 0.30681818em;
margin-bottom: 0.61363636em !important;
}
h3, .h3 {
font-size: 2.88888889em;
line-height: 1.03846154em !important;
margin-top: 0.51923077em;
margin-bottom: 0.51923077em !important;
}
h4, .h4 {
font-size: 1.72222222em;
line-height: 1.74193548em !important;
margin-top: 0.87096774em;
margin-bottom: 0 !important;
}
h5, .h5 {
font-size: 1em;
line-height: 1.5em !important;
margin-top: 1.5em;
margin-bottom: 0 !important;
}
h6, .h6 {
font-size: 1em;
line-height: 1.5em !important;
margin-top: 1.5em;
margin-bottom: 0 !important;
}
p, ul, ol, pre, table, blockquote, label {
margin-top: 0;
margin-bottom: 1.5em;
}
ul ul, ol ol, ul ol, ol ul {
margin-top: 0;
margin-bottom: 0;
} hr, .hr {
border: 1px solid;
margin: -1px 0;
}
a, b, i, strong, em, small, code {
line-height: 0;
}
a:hover {
color: var(--hoch-rot) !important;
} .vu_top-bar {
font-size: 20px;
}
.vu_top-bar .vu_tb-middle {
text-align: center;
line-height: 25px;
}
.vu_top-bar .fa {
padding-right: 10px;
font-size: 20px;
}
.schnoerkel {
position: relative;
height: 100%;
} .trenner {
max-width: 700px;
}
.trennerstrich:after {
content:'';
position:absolute;
right: 0;
bottom: 0;
width: 30px;
height: 300px;
background-image: url(//www.baeckerei-hoch.de/wp-content/uploads/2019/10/trenner-strich-schmal.svg);
background-repeat: no-repeat;
transform: translateX(50%);
}
h1:after,
h2:after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 140%;
height: 50px;
background-image: url(//www.baeckerei-hoch.de/wp-content/uploads/2019/10/unterstrich-schmal.svg);
background-size: contain;
background-repeat: no-repeat;
transform: translate(-50%,100%) rotate(1.5deg);
}
h1, h2 {
transform: rotate(-13.72deg);
display: inline-block;
position: relative;
}
.elementor-pagination-position-outside .swiper-container {
padding-bottom: 60px !important;
}
.vu_back-to-top {
color: var(--hoch-braun);
border-color: var(--hoch-braun);
}
.vu_back-to-top:hover {
background-color: white;
} #vu_menu-affix {
display:none;
}
[class^="vu_tb-"] {
padding-left: 50px;
}
[class^="vu_tb-"] > div {
display: flex;
justify-content: flex-start;
align-items: baseline;
}
.vu_main-menu-container {
padding: 30px 0;
}
.vu_site-logo,
.vu_mm-logo {
display: none;
}
.vu_mm-toggle {
border: none !important;
left: 0;
right: inherit;
}
.vu_mm-toggle > i {
font-size: 40px;
color: var(--hoch-braun);
}
.vu_mobile-menu {
background-color: var(--hoch-rot);
}
.vu_mobile-menu > ul {
border: none;
text-align: center;
}
.vu_mobile-menu ul li a {
border: none;
background-color: var(--hoch-rot);
color: white;
}
.vu_mobile-menu ul li.current-menu-item > a {
background-color: inherit;
color: white;
font-weight: 700;
}
.vu_mobile-menu > div {
text-align: left;
}
.vu_mobile-menu .vu_mm-remove {
background-color: transparent;
}
.vu_mobile-menu .vu_mm-remove:hover {
background-color: inherit;
}
.vu_main-header {
position: relative;
z-index: 3;
}
.vu_container {
margin-top: -59px;
z-index: 2;
position: relative;
}
@media (max-width: 991px) {
h1, .h1,
h2, .h2 {
font-size: 2.22222222em;
line-height: 1.35em !important;
margin-top: 0.675em;
margin-bottom: 1.35em !important;
}
h3, .h3 {
font-size: 1.66666667em;
line-height: 1.8em !important;
margin-top: 0.9em;
margin-bottom: 0.9em !important;
}
h4, .h4 {
font-size: 1.27777778em;
line-height: 1.17391304em !important;
margin-top: 1.17391304em;
margin-bottom: 0 !important;
} } .hero-header {
background-position: 30% center !important;
}
.hero-header .wpb_wrapper {
height: calc(100vh - 149px);
}
.hero-schriftzug {
width: 350px;
position: absolute;
right: 3%;
bottom: 20px; }
.svg-logo-titel {
max-width: 600px;
}
.vu_menu-affix.affix .vu_main-menu-container {
padding-top: 30px;
padding-bottom: 30px;
}
.hoch-text {
text-align: center;
}
.akkordion-text {
height: auto;
overflow: hidden;
-webkit-transition: height linear .5s;
-moz-transition: height linear .5s;
-ms-transition: height linear .5s;
-o-transition: height linear .5s;
transition: height linear .5s;
} .kontaktformular {
padding: 5% 10%;
margin: 0 15%;
background-color: white;
border: 10px solid var(--hoch-braun);
}
.kontaktformular input,
.kontaktformular textarea {
font-family: 'Open Sans', Arial, sans-serif !important;
font-weight: 600 !important;
font-size: 1em !important;
}
.kontaktformular label {
color: var(--hoch-braun);
width: 100%;
font-size: 0.8em !important;
margin-bottom: 10px !important;
}
.kontaktformular .w-50 {
width: 49%;
}
.kontaktformular .w-50:first-child {
margin-right: 1%;
} .kontaktformular input,
.kontaktformular textarea {
border: 4px solid var(--hoch-braun) !important; color: var(--hoch-braun) !important;
}
.kontaktformular textarea {
height: 150px !important;
resize: none;
}
.kontaktformular .wpcf7-acceptance {
width: fit-content !important;
height: fit-content !important;
border: none !important;
display: inline-block !important;
}
.kontaktformular .wpcf7-acceptance input {
position: relative;
}
.kontaktformular .wpcf7-submit {
font-family: 'handschrift', 'Open Sans', sans-serif !important;
color: var(--hoch-braun);
background-color: transparent;
border: 4px solid var(--hoch-braun);
padding: 5px 30px;
transition: all ease .5s;
}
.kontaktformular .wpcf7-submit:hover {
color: var(--hoch-rot) !important;
border-color: var(--hoch-rot) !important;
}
.kontaktformular:before {
content: '';
position: absolute;
background-image: url(//www.baeckerei-hoch.de/wp-content/uploads/2019/09/brezel-trenner.svg);
left: 55%;
top: 10%;
width: 180px;
height: 160px;
background-repeat: no-repeat;
}
.kontaktformular:after {
content:'';
position: absolute;
background-image: url(//www.baeckerei-hoch.de/wp-content/uploads/2019/09/schriftzug.svg);
background-repeat: no-repeat;
bottom: 5%;
right: 5%;
width: 250px;
height: 80px;
} footer {
border: 8px solid var(--hoch-braun);
}
.footer-nav:hover {
color: var(--hoch-braun) !important;
}
}
.versteckt {
height: 0;
}
@media screen and (max-width: 767px) {
.trennerstrich:after,
.kontaktformular:before,
.kontaktformular:after {
display: none;
}
.kontaktformular label.w-50 {
width: 100%;
}
.kontaktformular {
margin: 0;
}
p, ul, ol, pre, table, blockquote, label {
margin-bottom: 1em;
}
@media screen and (min-width: 990px) {
[class^="vu_tb-"] {
width: auto;
} .schnoerkel {
width: 100%;
display: flex;
justify-content: space-between;
}
.schnoerkel p {
margin: 20px 0;
} .hero-header .wpb_wrapper {
height: calc(100vh - 81px);
}
.hero-schriftzug{
width: 600px;
}
}