@charset "UTF-8";

html,
body {
margin: 0;
padding: 0;
border: 0;
display: block;
width: 100%;
overflow-x: hidden;
background-color: var(--color-hellgrau);
}
html.menu-open,
body.menu-open {
overflow: hidden;
}
html.no_overflow,
body.no_overflow {
overflow: hidden;
}
@media (min-width: 1024px) {
html,
body {
font-size: 1.4vw;
}
}
@media (min-width: 1600px) {
html,
body {
font-size: 1.1vw;
}
}
.custom-cursor {
width: 150px;
height: 150px;
position: fixed;
pointer-events: none;
transform: translate(-50%, -50%);
z-index: 9999;
display: none;
background-repeat: no-repeat;
background-position: center center;
background-size: 150px 150px;
}
@media (max-width: 1279px) {
.custom-cursor {
display: none !important;
}
}
@media (min-width: 1281px) {
.custom-cursor {
width: 8vw;
height: 8vw;
background-size: 8vw 8vw;
}
}
@media (min-width: 1600px) {
.custom-cursor {
width: 6vw;
height: 6vw;
background-size: 6vw 6vw;
}
}
.custom-cursor.cursor-show {
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/cursor-view.png);
}
.custom-cursor.cursor-resize {
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/cursor-resize.png);
}
.content_width {
display: block;
margin: auto;
padding-left: 20px;
padding-right: 20px;
}
@media (min-width: 768px) {
.content_width {
padding-left: 40px;
padding-right: 40px;
}
}
a:focus-visible, button:focus-visible {
outline: 2px solid var(--color-blau);
outline-offset: 10px;
border-radius: 7px;
}
@media (min-width: 1281px) {
a:focus-visible, button:focus-visible {
outline: 0.2vw solid var(--color-blau);
outline-offset: 0.5vw;
border-radius: 0.1vw;
}
}
main article {
padding: 0;
margin: auto; -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
main article {
padding: 0;
}
}
@media (min-width: 1281px) {
main article {
padding: 0 3.5vw;
}
}
main article a.ek-link[target=_blank] {
text-decoration: none;
margin-right: 8px;
}
main article a.ek-link[target=_blank]:after {
content: "";
display: inline-block;
width: 20px;
height: 12px;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-external-link.svg);
background-repeat: no-repeat;
background-size: 12px 12px;
background-position: right bottom;
}
main article a.ek-link[target=_blank]:hover {
border: none;
}
main article h1 {
hyphens: auto;
padding: 0;
max-width: none;
margin: 0 20px 10px 20px;
}
@media (min-width: 768px) {
main article h1 {
hyphens: none;
padding: 0;
margin: 0 40px 20px 40px;
}
}
@media (min-width: 1281px) {
main article h1 {
font-size: 3.645vw;
max-width: 72.5vw;
margin: 0 auto;
padding-bottom: 1vw;
}
}
main article h2, main article .like_h2 {
hyphens: auto;
padding: 0;
max-width: none;
margin: 0 20px 10px 20px;
}
@media (min-width: 768px) {
main article h2, main article .like_h2 {
margin: 0 40px 20px 40px;
}
}
@media (min-width: 1281px) {
main article h2, main article .like_h2 {
font-size: 2.604vw;
max-width: 72.5vw;
margin: 0 auto;
padding-bottom: 1vw;
hyphens: none;
}
}
main article h3, main article .h3 {
hyphens: auto;
padding: 0;
max-width: none;
margin: 0 20px 10px 20px;
}
main article h3 mark, main article .h3 mark {
padding: 5px 8px;
border-radius: 10px;
}
main article h3.with-mark, main article .h3.with-mark {
line-height: 170%;
}
@media (min-width: 768px) {
main article h3, main article .h3 {
margin: 0 40px 20px 40px;
}
}
@media (min-width: 1281px) {
main article h3, main article .h3 {
font-size: 2.083vw;
max-width: 72.5vw;
margin: 0 auto;
padding-bottom: 1vw;
}
}
main article h4, main article .h4 {
hyphens: auto;
padding: 0;
max-width: none;
margin: 0 20px 10px 20px;
}
@media (min-width: 768px) {
main article h4, main article .h4 {
margin: 0 40px 20px 40px;
}
}
@media (min-width: 1281px) {
main article h4, main article .h4 {
margin: 0 auto;
padding-bottom: 0.6vw;
max-width: 72.5vw;
}
}
main article h5, main article span.like_h5 {
hyphens: auto;
padding: 0;
max-width: none;
margin: 0 20px 10px 20px;
}
@media (min-width: 768px) {
main article h5, main article span.like_h5 {
margin: 0 40px 20px 40px;
}
}
@media (min-width: 1024px) {
main article h5, main article span.like_h5 {
font-size: 1.4vw;
}
}
@media (min-width: 1281px) {
main article h5, main article span.like_h5 {
margin-top: 0.4vw;
max-width: 72.5vw;
margin: 0 auto;
}
}
@media (min-width: 1600px) {
main article h5, main article span.like_h5 {
font-size: 1.2vw;
}
}
main article h6, main article .h6 {
hyphens: auto;
padding: 0;
max-width: none;
margin: 0 20px 10px 20px;
}
@media (min-width: 768px) {
main article h6, main article .h6 {
margin: 0 40px 20px 40px;
}
}
@media (min-width: 1281px) {
main article h6, main article .h6 {
font-size: 1.4vw;
max-width: 72.5vw;
margin: 0 auto 1vw auto;
}
}
main article p {
hyphens: auto;
padding: 0;
max-width: none;
margin: 0 20px 10px 20px;
line-height: 150%;
}
main article p + h2 {
padding-top: 20px;
}
@media (min-width: 1281px) {
main article p + h2 {
padding-top: 2vw;
}
}
main article p + h3 {
padding-top: 20px;
}
@media (min-width: 1281px) {
main article p + h3 {
padding-top: 2vw;
}
}
main article p + h4 main article p + .h4 {
padding-top: 10px;
}
@media (min-width: 1281px) {
main article p + h4 main article p + .h4 {
padding-top: 1vw;
}
}
main article p + h5 {
padding-top: 10px;
}
@media (min-width: 1281px) {
main article p + h5 {
padding-top: 1vw;
}
}
main article p + h6 {
padding-top: 10px;
}
@media (min-width: 1281px) {
main article p + h6 {
padding-top: 1vw;
}
}
@media (min-width: 768px) {
main article p {
margin: 0 40px 20px 40px;
}
}
@media (min-width: 1281px) {
main article p {
max-width: 72.5vw;
margin: 0 auto;
padding-bottom: 1vw;
}
}
main article ul,
main article ol {
hyphens: auto;
padding: 0;
max-width: none;
margin: 10px 20px 20px 40px;
}
main article ul + h2,
main article ol + h2 {
padding-top: 20px;
}
@media (min-width: 1281px) {
main article ul + h2,
main article ol + h2 {
padding-top: 2vw;
}
}
main article ul + h3,
main article ol + h3 {
padding-top: 20px;
}
@media (min-width: 1281px) {
main article ul + h3,
main article ol + h3 {
padding-top: 2vw;
}
}
main article ul + h4, main article ul + .h4,
main article ol + h4,
main article ol + .h4 {
padding-top: 10px;
}
@media (min-width: 1281px) {
main article ul + h4, main article ul + .h4,
main article ol + h4,
main article ol + .h4 {
padding-top: 1vw;
}
}
main article ul + h5,
main article ol + h5 {
padding-top: 10px;
}
@media (min-width: 1281px) {
main article ul + h5,
main article ol + h5 {
padding-top: 1vw;
}
}
main article ul + h6,
main article ol + h6 {
padding-top: 10px;
}
@media (min-width: 1281px) {
main article ul + h6,
main article ol + h6 {
padding-top: 1vw;
}
}
@media (min-width: 768px) {
main article ul,
main article ol {
margin: 0 20px 20px 70px;
}
}
@media (min-width: 1281px) {
main article ul,
main article ol {
max-width: 72.5vw;
padding-bottom: 1vw;
padding-left: 2.5vw;
margin: 0 auto;
}
}
main article ul li,
main article ol li {
padding-bottom: 10px;
}
@media (min-width: 1281px) {
main article ul li,
main article ol li {
padding-bottom: 0.8vw;
}
}
main article a:hover {
text-decoration: none;
}
main article strong, main article i, main article em, main article mark {
padding: 0;
margin: 0;
}
main article img {
max-width: 100% !important;
height: auto;
}
main article button {
font-size: 16px;
}
@media (min-width: 768px) {
main article button {
font-size: 18px;
}
}
@media (min-width: 1281px) {
main article button {
font-size: 1.4vw;
}
}
@media (min-width: 1281px) {
main article button {
font-size: 1.2vw;
}
}
main.overlay:before {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
z-index: 20;
background-color: var(--color-schwarz) !important;
opacity: 0.9;
}
.back2parent {
margin-bottom: 1em;
position: relative;
padding: 0 0 0 24px;
}
.back2parent:before {
content: "";
position: absolute;
left: 0;
bottom: 3px;
width: 16px;
height: 16px;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-arrow-left.svg);
background-repeat: no-repeat;
background-size: auto 16px;
opacity: 0.4;
}
.page_title {
display: block;
padding: 10px 20px 10px 20px;
margin: 0 auto;
max-width: 1600px;
position: relative;
font-weight: 700;
}
@media (min-width: 768px) {
.page_title {
padding: 10px 40px 10px 40px;
}
}
.page_title:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 20px;
right: 20px;
height: 1px;
background-color: var(--color-schwarz);
opacity: 0.3;
}
@media (min-width: 768px) {
.page_title:before {
left: 40px;
right: 40px;
}
}
.page_title:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 20px;
right: 20px;
height: 1px;
background-color: var(--color-schwarz);
opacity: 0.3;
}
@media (min-width: 768px) {
.page_title:after {
left: 40px;
right: 40px;
}
}
.dreicon img {
width: 60px;
height: auto;
}
@media (min-width: 768px) {
.dreicon img {
width: 80px;
}
}
@media (min-width: 1281px) {
.dreicon img {
width: 7vw;
}
}
.dreicon .aligncenter {
margin: 0 auto 20px auto !important;
}
@media (min-width: 768px) {
.dreicon .aligncenter {
margin: 0 auto 40px auto !important;
}
}
@media (min-width: 1281px) {
.dreicon .aligncenter {
margin: 0 auto 3vw auto !important;
}
}
header {
display: block;
position: relative;
z-index: 2;
transition: all 0.2s;
}
header.open {
min-height: 100vh;
transition: all 0.2s;
}
header .header-wrapper {
display: block;
margin: 20px;
height: 70px;
min-height: 70px;
border: 1px solid var(--color-schwarz);
background-color: var(--color-hellgrau);
border-radius: 35px;
position: relative;
transition: all 0.2s;
}
header .header-wrapper.open {
height: auto;
min-height: calc(100vh - 40px);
transition: all 0.2s;
}
@media (min-width: 768px) {
header .header-wrapper {
margin: 40px;
}
header .header-wrapper.open {
min-height: calc(100vh - 80px);
}
}
@media (min-width: 1281px) {
header .header-wrapper {
margin: 2vw 3.5vw;
height: auto;
min-height: 7vw;
border: 0.1vw solid var(--color-schwarz);
border-radius: 3.5vw;
overflow: hidden;
text-align: center;
}
header .header-wrapper.open {
min-height: auto;
}
}
header .header-wrapper #logo {
margin-left: 25px;
margin-top: 15px;
display: flex;
height: 40px;
width: calc(100vw - 190px);
align-items: center;
}
@media (min-width: 1281px) {
header .header-wrapper #logo {
margin-left: 3vw;
margin-top: 1.7vw;
height: 4vw;
width: 20vw;
position: absolute;
z-index: 1;
}
}
header .header-wrapper #logo a {
display: flex;
align-items: center;
justify-content: flex-start;
text-decoration: none;
opacity: 1;
transition: all 0.2s;
}
header .header-wrapper #logo a svg {
width: auto;
height: auto;
max-width: calc(100vw - 190px);
float: left;
max-height: 40px;
fill: var(--color-schwarz);
transition: fill 0.2s;
}
@media (min-width: 1281px) {
header .header-wrapper #logo a svg {
max-height: 4vw;
}
}
header .header-wrapper #logo a:hover svg {
fill: var(--color-gruen);
}
header .header-wrapper #getintouch_menu {
display: block;
position: absolute;
top: 9px;
right: 70px;
z-index: 1;
}
header .header-wrapper #getintouch_menu button {
background: transparent;
border: none;
text-indent: -99999px;
width: 50px;
height: 50px;
background-color: var(--color-hellblau);
border: 1px solid var(--color-hellblau);
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-projektanfrage.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 24px 24px;
border-radius: 50%;
cursor: pointer;
}
header .header-wrapper #getintouch_menu button:hover {
background-color: var(--color-schwarz);
}
@media (min-width: 768px) {
header .header-wrapper #getintouch_menu button {
display: inline-block;
background-image: none;
border-radius: 25px;
width: auto;
text-indent: 0;
color: var(--color-weiss);
font-weight: 600;
padding: 0 20px;
}
}
@media (min-width: 1281px) {
header .header-wrapper #getintouch_menu {
display: block;
position: absolute;
top: 1vw;
right: 1vw;
}
header .header-wrapper #getintouch_menu button {
text-decoration: none;
font-size: 1.6vw;
color: var(--color-weiss);
font-weight: 600;
background-color: var(--color-hellblau);
padding: 0vw 2vw;
border: none;
height: 5vw;
line-height: 5vw;
border-radius: 2.5vw;
transition: background-color 0.2s;
cursor: pointer;
}
header .header-wrapper #getintouch_menu button:hover {
background-color: var(--color-schwarz);
}
}
header .header-wrapper #menubutton {
width: 50px;
height: 50px;
display: block;
position: absolute;
right: 10px;
top: 9px;
z-index: 991;
}
@media (min-width: 1281px) {
header .header-wrapper #menubutton {
display: none;
}
}
header .header-wrapper #menubutton button {
display: block;
width: 50px;
height: 50px;
background-color: transparent;
border: none;
border: 1px solid var(--color-schwarz);
border-radius: 50%;
position: relative;
font-weight: 700;
cursor: pointer;
visibility: visible;
transition: all 0.2s;
text-indent: -99999px;
}
header .header-wrapper #menubutton button i {
font-style: normal;
width: 24px;
height: 2px;
position: absolute;
background-color: var(--color-schwarz);
left: 12.5px;
transition: all 0.2s;
}
@keyframes fadeOutAnimation {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(45deg);
}
}
@keyframes rotateAnimation2 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-45deg);
}
}
header .header-wrapper #menubutton button i.top {
top: 17px;
}
header .header-wrapper #menubutton button i.top.open {
top: 24px;
animation: fadeOutAnimation 0.2s ease-in-out forwards;
animation-delay: 0.2s;
}
header .header-wrapper #menubutton button i.middle {
top: 24px;
}
header .header-wrapper #menubutton button i.middle.open {
transform-origin: center center;
animation: rotateAnimation 0.2s ease-in-out forwards;
animation-delay: 0.25s;
}
header .header-wrapper #menubutton button i.middle2 {
top: 24px;
visibility: hidden;
}
header .header-wrapper #menubutton button i.middle2.open {
visibility: visible;
transform-origin: center center;
animation: rotateAnimation2 0.2s ease-in-out forwards;
animation-delay: 0.25s;
}
header .header-wrapper #menubutton button i.bottom {
top: 31px;
}
header .header-wrapper #menubutton button i.bottom.open {
top: 24px;
animation: fadeOutAnimation 0.2s ease-in-out forwards;
animation-delay: 0.2s;
}
header .header-wrapper #menubutton.open button svg#mb_close {
opacity: 1;
}
header .header-wrapper #menubutton.open button svg#mb_open {
opacity: 0;
}
header .header-wrapper #menubar {
position: relative;
}
@media (min-width: 1281px) {
header .header-wrapper #menubar {
margin: 0 auto;
display: inline-block;
}
}
header .header-wrapper #menubar #menu {
display: none;
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu {
display: block;
transition: height 0.2s;
}
}
header .header-wrapper #menubar #menu.open {
display: block;
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav {
display: block;
margin: 0;
padding: 30px 20px 0 20px;
list-style-type: none;
}
@media (min-width: 768px) {
header .header-wrapper #menubar #menu #main-menu ul.main-nav {
padding: 60px 20px 30px 20px;
}
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #main-menu ul.main-nav {
padding: 0;
max-width: none;
text-align: center;
position: relative;
display: inline-block;
}
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li {
display: block;
padding: 5px 0;
}
@media (min-width: 768px) {
header .header-wrapper #menubar #menu #main-menu ul.main-nav li {
padding: 10px 0;
}
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #main-menu ul.main-nav li {
display: inline-block;
padding: 0;
}
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li a {
font-size: 30px;
text-decoration: none;
font-weight: 700;
}
@media (min-width: 768px) {
header .header-wrapper #menubar #menu #main-menu ul.main-nav li a {
font-size: 40px;
}
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #main-menu ul.main-nav li a {
font-size: 1.5vw;
font-weight: 400;
display: block;
position: relative;
margin: 1.5vw 0 0 0;
padding: 1vw 1vw;
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li a:after {
content: "";
position: absolute;
bottom: -1.5vw;
left: 1vw;
right: 1vw;
height: 0.35vw;
background-color: var(--color-gruen);
display: none;
}
}
@media (min-width: 1281px) and (min-width: 1281px) {
header .header-wrapper #menubar #menu #main-menu ul.main-nav li a:focus-visible {
outline: 0.2vw solid var(--color-blau);
outline-offset: 0;
border-radius: 2vw;
}
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #main-menu ul.main-nav li a:hover {
color: var(--color-gruen);
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li a:hover:after {
display: block;
}
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.current_page_item a, header .header-wrapper #menubar #menu #main-menu ul.main-nav li.current-menu-item a, header .header-wrapper #menubar #menu #main-menu ul.main-nav li.current-page-ancestor a {
color: var(--color-gruen);
font-weight: 700;
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.current_page_item a:after, header .header-wrapper #menubar #menu #main-menu ul.main-nav li.current-menu-item a:after, header .header-wrapper #menubar #menu #main-menu ul.main-nav li.current-page-ancestor a:after {
content: "";
position: absolute;
bottom: -1.5vw;
left: 1vw;
right: 1vw;
height: 0.35vw;
background-color: var(--color-gruen);
display: block;
}
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more a {
display: none;
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more a {
display: block;
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more a.active {
color: var(--color-gruen);
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more a.active:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: transparent;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 450 1000" style="enable-background:new 0 0 450 1000;" xml:space="preserve"><style>.down-arrow{fill-rule:evenodd;clip-rule:evenodd;fill:green;}</style><g><path class="down-arrow" d="M47.3,641.3c47.1,30.4,85.9,71.8,113.2,120.5c25.3,43.8,47,89.7,71.8,137.6c5.7-5.4,12.9-8.9,14.7-14.3c23-69,48.1-137.8,57.9-210.1c12-80.9,4.4-163.5-22-241c-27.6-79.4-73.2-148.5-120.3-216.8c-23-33.7-47.9-66.1-74.6-97.1C65.1,93.9,38.5,70.7,13.1,46.6C-5,29.4-5,23.6,17.3,0c18.2,2,29.1,15.9,41.6,27.9c49.9,48,87.4,105.6,126.4,161.8C230.2,254.4,271,321.6,300,395.3c26.5,67.3,41.5,136.1,37.4,208.7c-2,36.4-4.2,72.5-15,107.7c-1.8,6.1,0.8,13.5,2.1,28.8c8.9-13.7,14.4-19.9,17.5-27.2c23.6-55,39.6-112.4,56.7-169.6c2.4-9.9,6-19.4,10.7-28.5c4.5-7.4,10.7-13.6,18-18.3c4.9-2.5,10.8-2.6,15.8-0.1c3.9,2.6,5.1,9.6,6.6,14.9c0.5,2.9,0.1,5.9-1.3,8.5c-15.3,31.7-21.2,66.5-32.8,99.2c-17.1,49.6-37.2,98-60.3,145.2c-29.9,59.9-61,119.4-104.5,171.4c-12.1,14.5-20.5,31.9-31.2,47.5c-3.6,6.3-8.8,11.4-15.1,14.9c-6.7,2.1-14,1.6-20.3-1.4c-3.6-1.7-4.7-9.5-5.9-14.8c-0.3-2.9,0.3-5.9,1.7-8.5c14.7-35.3,5.6-68.8-9-101.3c-25.1-55.8-51-111.2-91-158.8c-11.6-15-22-30.8-31-47.5C46.7,662.4,48.2,656,47.3,641.3"></path></g></svg>');
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center center;
display: block;
transform: rotate(40deg);
top: 50%;
margin-top: 1.5vw;
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more a.active:before {
opacity: 1;
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more a.active:hover {
color: var(--color-gruen);
}
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more.current-page-parent a, header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more.current_page_item a {
color: var(--color-gruen);
font-weight: 700;
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more.current-page-parent a:after, header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more.current_page_item a:after {
content: "";
position: absolute;
bottom: -1.5vw;
left: 1vw;
right: 1vw;
height: 0.35vw;
background-color: var(--color-gruen);
display: block;
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more.current-page-parent a.active, header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more.current_page_item a.active {
color: var(--color-gruen);
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more.current-page-parent a.active:after, header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more.current_page_item a.active:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: transparent;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 450 1000" style="enable-background:new 0 0 450 1000;" xml:space="preserve"><style>.down-arrow{fill-rule:evenodd;clip-rule:evenodd;fill:green;}</style><g><path class="down-arrow" d="M47.3,641.3c47.1,30.4,85.9,71.8,113.2,120.5c25.3,43.8,47,89.7,71.8,137.6c5.7-5.4,12.9-8.9,14.7-14.3c23-69,48.1-137.8,57.9-210.1c12-80.9,4.4-163.5-22-241c-27.6-79.4-73.2-148.5-120.3-216.8c-23-33.7-47.9-66.1-74.6-97.1C65.1,93.9,38.5,70.7,13.1,46.6C-5,29.4-5,23.6,17.3,0c18.2,2,29.1,15.9,41.6,27.9c49.9,48,87.4,105.6,126.4,161.8C230.2,254.4,271,321.6,300,395.3c26.5,67.3,41.5,136.1,37.4,208.7c-2,36.4-4.2,72.5-15,107.7c-1.8,6.1,0.8,13.5,2.1,28.8c8.9-13.7,14.4-19.9,17.5-27.2c23.6-55,39.6-112.4,56.7-169.6c2.4-9.9,6-19.4,10.7-28.5c4.5-7.4,10.7-13.6,18-18.3c4.9-2.5,10.8-2.6,15.8-0.1c3.9,2.6,5.1,9.6,6.6,14.9c0.5,2.9,0.1,5.9-1.3,8.5c-15.3,31.7-21.2,66.5-32.8,99.2c-17.1,49.6-37.2,98-60.3,145.2c-29.9,59.9-61,119.4-104.5,171.4c-12.1,14.5-20.5,31.9-31.2,47.5c-3.6,6.3-8.8,11.4-15.1,14.9c-6.7,2.1-14,1.6-20.3-1.4c-3.6-1.7-4.7-9.5-5.9-14.8c-0.3-2.9,0.3-5.9,1.7-8.5c14.7-35.3,5.6-68.8-9-101.3c-25.1-55.8-51-111.2-91-158.8c-11.6-15-22-30.8-31-47.5C46.7,662.4,48.2,656,47.3,641.3"></path></g></svg>');
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center center;
display: block;
transform: rotate(40deg);
top: 50%;
margin-top: 1.5vw;
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more.current-page-parent a.active:before, header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more.current_page_item a.active:before {
opacity: 1;
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more.current-page-parent a.active:hover, header .header-wrapper #menubar #menu #main-menu ul.main-nav li.more.current_page_item a.active:hover {
color: var(--color-gruen);
}
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.moreclose {
position: absolute;
top: 0.5vw;
right: -3vw;
}
@media (max-width: 1280px) {
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.moreclose {
display: none !important;
}
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.moreclose {
display: none;
}
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.moreclose.active {
display: block;
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.moreclose a {
display: block;
width: 3vw;
height: 3vw;
border-radius: 1.5vw;
border: 0.1vw solid var(--color-schwarz);
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M53,50l36.8-36.8c0.8-0.8,0.8-2.2,0-3c-0.8-0.8-2.1-0.8-3,0L50,47L13.2,10.2c-0.8-0.8-2.2-0.8-3,0c-0.8,0.8-0.8,2.1,0,3	L47,50L10.2,86.8c-0.8,0.8-0.8,2.2,0,3c0.8,0.8,2.1,0.8,3,0L50,53l36.8,36.8c0.8,0.8,2.2,0.8,3,0c0.8-0.8,0.8-2.1,0-3L53,50z"/></svg>');
background-repeat: no-repeat;
background-size: 1.5vw 1.5vw;
background-position: center center;
transition: all 0.2s;
text-indent: -99999px;
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.moreclose a:hover {
border: 0.2vw solid var(--color-schwarz);
background-size: 1.8vw 1.8vw;
}
header .header-wrapper #menubar #menu #main-menu ul.main-nav li.moreclose a:after {
display: none;
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #sub-menu {
padding-top: 2vw;
}
}
header .header-wrapper #menubar #menu #sub-menu ul.sub-nav {
margin: 0 0 0 0;
padding: 0 20px;
display: block;
list-style-type: none;
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #sub-menu ul.sub-nav {
display: block;
position: relative;
width: 90vw;
text-align: center;
padding: 2vw 0 0 0;
}
}
header .header-wrapper #menubar #menu #sub-menu ul.sub-nav li {
display: block;
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #sub-menu ul.sub-nav li {
display: inline-block;
}
}
header .header-wrapper #menubar #menu #sub-menu ul.sub-nav li a {
display: inline-block;
padding: 0;
margin: 5px 0;
font-size: 21px;
font-weight: 400;
text-decoration: none;
color: var(--color-schwarz);
}
@media (min-width: 768px) {
header .header-wrapper #menubar #menu #sub-menu ul.sub-nav li a {
font-size: 24px;
}
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #sub-menu ul.sub-nav li a {
border: 1px solid var(--color-schwarz);
margin: 0 1vw;
height: auto;
line-height: 1;
padding: 1vw 2vw;
border-radius: 1.6vw;
font-size: 1.2vw !important;
color: var(--color-schwarz);
}
header .header-wrapper #menubar #menu #sub-menu ul.sub-nav li a:after {
display: none !important;
}
header .header-wrapper #menubar #menu #sub-menu ul.sub-nav li a:hover {
background-color: var(--color-schwarz);
color: var(--color-weiss);
}
}
header .header-wrapper #menubar #menu #sub-menu ul.sub-nav li.current-menu-item a, header .header-wrapper #menubar #menu #sub-menu ul.sub-nav li.current_page_item a {
color: var(--color-gruen);
font-weight: 700;
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #sub-menu ul.sub-nav li.current-menu-item a, header .header-wrapper #menubar #menu #sub-menu ul.sub-nav li.current_page_item a {
border-color: var(--color-gruen);
background-color: var(--color-gruen);
color: var(--color-weiss);
}
}
header .header-wrapper #menubar #menu #social-menu ul {
display: block;
list-style-type: none;
padding: 40px 20px;
margin: 0;
}
@media (min-width: 768px) {
header .header-wrapper #menubar #menu #social-menu ul {
padding: 60px 20px 40px 20px;
}
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #social-menu ul {
padding: 2vw 0;
text-align: center;
}
}
header .header-wrapper #menubar #menu #social-menu ul li.sm {
display: inline-block;
margin-right: 10px;
}
header .header-wrapper #menubar #menu #social-menu ul li.sm a {
display: block;
padding: 0;
margin: 0;
width: 48px;
height: 48px;
border: 1px solid var(--color-gruen);
background-color: var(--color-gruen);
border-radius: 50%;
text-indent: -99999px;
background-repeat: no-repeat;
background-size: 24px 24px;
background-position: center center;
opacity: 1;
transition: all 0.2s;
}
@media (min-width: 768px) {
header .header-wrapper #menubar #menu #social-menu ul li.sm a {
width: 60px;
height: 60px;
background-size: 30px 30px;
}
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #social-menu ul li.sm a {
width: 3vw;
height: 3vw;
background-size: 1.5vw 1.5vw;
}
}
header .header-wrapper #menubar #menu #social-menu ul li.sm a:hover {
opacity: 1;
background-color: var(--color-schwarz);
}
header .header-wrapper #menubar #menu #social-menu ul li.sm.fb a {
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-facebook.svg);
}
header .header-wrapper #menubar #menu #social-menu ul li.sm.ig a {
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-instagram.svg);
}
header .header-wrapper #menubar #menu #social-menu ul li.sm.li a {
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-linkedin.svg);
}
header .header-wrapper #menubar #menu #social-menu ul li.sm.xg a {
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-xing.svg);
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu #social-menu ul li.sm {
margin-left: 0.6vw;
margin-right: 0.6vw;
}
}
@media (min-width: 1281px) {
header .header-wrapper #menubar #menu .theSubs {
display: none;
}
}
footer {
display: block;
padding: 40px 0;
margin: 0;
background-color: var(--color-schwarz);
}
@media (min-width: 1281px) {
footer {
padding: 3vw 0;
}
}
footer a:focus-visible,
footer button:focus-visible {
outline: 2px solid var(--color-weiss);
outline-offset: 10px;
border-radius: 7px;
}
@media (min-width: 1281px) {
footer a:focus-visible,
footer button:focus-visible {
outline: 0.2vw solid var(--color-weiss);
outline-offset: 0.5vw;
border-radius: 0.1vw;
}
}
footer .footer-wrapper {
display: block;
padding: 0 20px;
}
footer .footer-wrapper:after {
content: "";
display: table;
clear: both;
}
@media (min-width: 768px) {
footer .footer-wrapper {
padding: 0 40px;
}
}
@media (min-width: 1281px) {
footer .footer-wrapper {
max-width: 72.5vw;
margin: 0 auto;
padding: 0;
}
}
@media (min-width: 768px) {
footer .col-left {
display: block;
width: calc(60% - 40px);
float: left;
}
}
@media (min-width: 1281px) {
footer .col-left {
width: calc(35% - 2vw);
}
}
@media (min-width: 768px) {
footer .col-right {
display: block;
width: calc(40% - 40px);
float: right;
}
}
@media (min-width: 1281px) {
footer .col-right {
width: calc(65% - 2vw);
}
}
footer h2,
footer .like_h2 {
hyphens: auto;
padding: 0;
max-width: none;
margin: 0 20px 10px 20px;
}
@media (min-width: 768px) {
footer h2,
footer .like_h2 {
margin: 0 40px 20px 40px;
}
}
@media (min-width: 1281px) {
footer h2,
footer .like_h2 {
font-size: 2.604vw;
max-width: 72.5vw;
margin: 0 auto;
padding-bottom: 1vw;
hyphens: none;
}
}
footer h3,
footer .h3 {
margin: 1em 0;
color: var(--color-weiss);
}
@media (min-width: 1281px) {
footer h3,
footer .h3 {
font-size: 2vw;
}
}
footer h3 mark,
footer .h3 mark {
padding: 5px 8px;
border-radius: 10px;
background-color: var(--color-gruen);
color: var(--color-weiss);
line-height: 170%;
}
@media (min-width: 1281px) {
footer h3 mark,
footer .h3 mark {
padding: 0.3vw 0.8vw;
border-radius: 0.6vw;
}
}
footer .footer_form_links {
padding-top: 20px;
}
@media (min-width: 1281px) {
footer .footer_form_links {
padding-top: 1.5vw;
}
}
footer .footer_form_links .footer_form_link {
margin-bottom: 20px;
}
@media (min-width: 1281px) {
footer .footer_form_links .footer_form_link {
margin-bottom: 1.5vw;
}
}
footer .footer_form_links .footer_form_link:last-child {
margin-bottom: 0;
}
footer .footer_form_links .footer_form_link button {
border: none;
background: transparent;
cursor: pointer;
color: var(--color-weiss);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 10px;
padding: 20px;
display: block;
transition: background-color 0.2s;
text-align: left;
}
@media (min-width: 1281px) {
footer .footer_form_links .footer_form_link button {
border-radius: 1vw;
padding: 1.5vw;
}
}
footer .footer_form_links .footer_form_link button:after {
display: table;
content: "";
clear: both;
}
footer .footer_form_links .footer_form_link button .icon {
width: calc(30% - 20px);
float: left;
}
@media (min-width: 1281px) {
footer .footer_form_links .footer_form_link button .icon {
width: calc(30% - 1.5vw);
}
}
footer .footer_form_links .footer_form_link button .icon img {
width: 100%;
height: auto;
}
footer .footer_form_links .footer_form_link button .info {
width: 70%;
float: right;
}
footer .footer_form_links .footer_form_link button .info strong {
display: block;
color: var(--color-weiss);
padding: 0 0 6px 0;
margin: 0;
font-weight: semibold;
font-weight: 600;
font-size: 21px;
}
@media (min-width: 1281px) {
footer .footer_form_links .footer_form_link button .info strong {
padding: 0 0 0.5vw 0;
font-size: 1.5vw;
}
}
footer .footer_form_links .footer_form_link button .info i {
font-style: normal;
padding: 0;
margin: 0;
line-height: 150%;
opacity: 0.7;
}
@media (min-width: 1281px) {
footer .footer_form_links .footer_form_link button .info i {
font-size: 1.2vw;
}
}
footer .footer_form_links .footer_form_link button .checkcheck p {
padding: 0;
margin: 0;
}
footer .footer_form_links .footer_form_link button:hover {
background-color: var(--color-hellblau);
}
footer .footer_form_links .footer_form_link button:hover .info p {
opacity: 1;
}
footer .footer_form_links .footer_form_link button.mailschreiben:hover {
background-color: var(--color-gruen);
}
footer .footer_kontakt {
color: var(--color-weiss);
display: block;
padding-top: 60px;
}
@media (min-width: 1281px) {
footer .footer_kontakt {
padding-top: 2vw;
}
}
footer .footer_kontakt span {
display: block;
padding-bottom: 30px;
}
@media (min-width: 1281px) {
footer .footer_kontakt span {
padding-bottom: 0;
display: inline-block;
padding-right: 2vw;
}
}
footer .footer_kontakt span:last-child {
padding-bottom: 0;
}
@media (min-width: 1281px) {
footer .footer_kontakt span:last-child {
padding-right: 0;
}
}
footer .footer_kontakt span i.headline {
color: var(--color-weiss);
font-weight: regular;
font-weight: 400;
padding: 0 0 6px 0;
margin: 0;
font-size: 21px;
font-style: normal;
display: block;
}
@media (min-width: 1281px) {
footer .footer_kontakt span i.headline {
padding: 0 0 0.5vw 0;
font-size: 1.35vw;
}
}
footer .footer_kontakt span i.headline strong {
font-weight: bold;
font-weight: 700;
}
footer .footer_kontakt span i.paragraph {
padding: 0;
margin: 0;
font-style: normal;
}
footer .footer_kontakt span a {
color: var(--color-weiss);
text-decoration: none;
}
footer .footer_kontakt span a:hover {
color: var(--color-gruen);
text-decoration: underline;
}
footer .social_media {
display: block;
padding-top: 60px;
}
@media (min-width: 1281px) {
footer .social_media {
padding-top: 3vw;
}
}
footer .social_media h4, footer .social_media .h4 {
color: var(--color-weiss);
font-weight: regular;
font-weight: 400;
padding: 0 0 6px 0;
margin: 0;
font-size: 21px;
}
@media (min-width: 1281px) {
footer .social_media h4, footer .social_media .h4 {
padding: 0 0 0.5vw 0;
font-size: 1.35vw;
}
}
footer .social_media h4 strong, footer .social_media .h4 strong {
font-weight: bold;
font-weight: 700;
}
footer .social_media ul {
display: block;
padding: 0;
margin: 0;
list-style-type: none;
}
footer .social_media ul li {
display: inline-block;
margin: 0 10px 5px 0;
}
@media (min-width: 1281px) {
footer .social_media ul li {
margin: 0 1vw 0 0;
}
}
footer .social_media ul li:last-child {
margin: 0;
}
footer .social_media ul li a {
color: var(--color-weiss);
text-decoration: none;
}
footer .social_media ul li a:hover {
color: var(--color-gruen);
text-decoration: underline;
}
footer .footer_menu {
display: block;
padding-top: 60px;
}
@media (min-width: 1281px) {
footer .footer_menu {
padding-top: 3vw;
}
}
footer .footer_menu h4, footer .footer_menu .h4 {
color: var(--color-weiss);
font-weight: regular;
font-weight: 400;
padding: 0 0 6px 0;
margin: 0;
font-size: 21px;
}
@media (min-width: 1281px) {
footer .footer_menu h4, footer .footer_menu .h4 {
padding: 0 0 0.5vw 0;
font-size: 1.35vw;
}
}
footer .footer_menu h4 strong, footer .footer_menu .h4 strong {
font-weight: bold;
font-weight: 700;
}
footer .footer_menu ul {
display: block;
padding: 0;
margin: 0;
list-style-type: none;
}
footer .footer_menu ul li {
display: inline-block;
margin: 0 10px 5px 0;
}
@media (min-width: 1281px) {
footer .footer_menu ul li {
margin: 0 1vw 0 0;
}
}
footer .footer_menu ul li:last-child {
margin: 0;
}
footer .footer_menu ul li a {
color: var(--color-weiss);
text-decoration: none;
}
footer .footer_menu ul li a:hover {
color: var(--color-weiss);
text-decoration: underline;
}
footer #footer-menu a:hover {
color: var(--color-weiss);
}
footer .cookie-preferenzen {
display: block;
}
footer .borlabs-cookie-open-dialog-preferences {
padding-top: 40px;
padding-bottom: 30px;
display: block;
}
@media (min-width: 1281px) {
footer .borlabs-cookie-open-dialog-preferences {
padding-top: 3vw;
padding-bottom: 2vw;
}
}
footer .borlabs-cookie-open-dialog-preferences a {
display: inline-block;
color: var(--color-weiss);
text-decoration: none;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/images/cookie.svg);
background-repeat: no-repeat;
background-position: left center;
background-size: 40px 40px;
padding: 20px 0 20px 50px;
}
@media (min-width: 1281px) {
footer .borlabs-cookie-open-dialog-preferences a {
background-size: 3vw 3vw;
padding: 1.5vw 0 1.5vw 4vw;
}
}
footer .borlabs-cookie-open-dialog-preferences a:hover {
color: var(--color-gruen);
text-decoration: underline;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/images/cookie-green.svg);
}
hr.wp-block-separator {
margin-top: 10px;
margin-bottom: 10px;
border-color: #999;
}
.wp-block-image a {
transition: all 0.2s;
display: inline-block;
color: transparent;
position: relative;
z-index: 0;
}
.wp-block-image a:before {
transition: all 0.2s;
content: "";
position: absolute;
right: 10px;
bottom: 10px;
width: 42px;
height: 42px;
background-color: white;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/resize-black.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 24px 24px;
z-index: 2;
border-radius: 0;
}
.wp-block-image a img {
position: relative;
z-index: 1;
}
.wp-block-image a:hover {
background-color: black;
}
.wp-block-image a:hover:before {
background-color: transparent;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/resize-white.svg);
}
.wp-block-image a:hover img {
opacity: 0.2;
}
.wp-block-image figcaption.wp-element-caption {
font-size: 0.8em;
}
.wp-custom-acf-block-accordion .question {
display: block;
cursor: pointer;
font-weight: bold;
}
.wp-custom-acf-block-accordion .question.active {
color: var(--color-blau);
}
.wp-custom-acf-block-accordion .answer {
display: block;
}
.custom-block {
margin-top: 40px;
margin-bottom: 40px;
}
@media (min-width: 1024px) {
.custom-block {
margin-top: 80px;
margin-bottom: 80px;
}
}
.custom-block.alignwide {
margin-left: 0;
margin-right: 0;
}
@media (min-width: 768px) {
.custom-block.alignwide {
margin-top: 40px;
margin-bottom: 40px;
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 1024px) {
.custom-block.alignwide {
margin-top: 80px;
margin-bottom: 80px;
}
}
.custom-block.alignfull {
margin-left: -20px;
margin-right: -20px;
}
@media (min-width: 768px) {
.custom-block.alignfull {
margin-top: 40px;
margin-bottom: 40px;
margin-left: -40px;
margin-right: -40px;
}
}
.custom-block.has-background {
padding: 20px;
}
@media (min-width: 768px) {
.custom-block.has-background {
padding: 40px;
}
}
.custom-block.has-background p:last-child {
margin-bottom: 0;
}
.acf-block-lastnews {
margin: 2em 0 0 0;
}
@media (min-width: 768px) {
.acf-block-lastnews {
display: flex;
flex-wrap: wrap;
margin: 2em -20px 0 -20px;
}
}
.acf-block-lastnews .acf-block-lastnews-item {
margin-bottom: 50px;
}
@media (min-width: 768px) {
.acf-block-lastnews .acf-block-lastnews-item {
flex: 0 0 50%;
}
}
.acf-block-lastnews .acf-block-lastnews-item:after {
content: "";
clear: both;
display: table;
}
@media (min-width: 768px) {
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper {
padding: 0 20px;
}
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper:after {
content: "";
clear: both;
display: table;
}
}
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper .thumbnail {
display: block;
width: 80px;
height: 80px;
float: left;
position: relative;
}
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper .thumbnail a {
display: block;
width: 80px;
height: 80px;
overflow: hidden;
border-radius: 10px;
}
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper .thumbnail a img {
transition: all 0.2s;
width: 80px;
height: 80px;
aspect-ratio: 1/1;
object-fit: cover;
object-position: center;
overflow: hidden;
}
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper .thumbnail a .no-thumb {
transition: all 0.2s;
display: block;
width: 80px;
height: 80px;
background-color: #ccc;
text-indent: -9999px;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-link.svg);
background-size: 32px 32px;
background-position: center center;
background-repeat: no-repeat;
}
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper .thumbnail a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper .thumbnail a:hover img {
width: 90px;
height: 90px;
margin-top: -5px;
margin-left: -5px;
}
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper .thumbnail a:hover .no-thumb {
background-color: white;
background-size: 38px 83px;
}
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper .content {
display: block;
width: calc(100% - 100px);
float: right;
}
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper .content .title {
display: block;
}
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper .content .title a {
font-weight: bold;
font-size: 130%;
}
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper .content .date {
display: block;
font-weight: bold;
padding: 5px 0;
opacity: 0.7;
}
.acf-block-lastnews .acf-block-lastnews-item .item-wrapper .content .excerpt {
display: block;
}
.acf-block-lastnews-more {
clear: both;
} .acf-block-infoblocks {
gap: 0;
display: flex;
flex-direction: column;
padding-bottom: 30px;
}
@media (min-width: 768px) {
.acf-block-infoblocks {
flex-direction: row;
}
}
.acf-block-infoblocks .row {
flex: 1;
padding: 0 0 30px 0;
position: relative;
}
.acf-block-infoblocks .row:last-child {
padding: 0 0 0 0;
}
.acf-block-infoblocks .row .headline {
display: block;
padding-left: 100px;
}
@media (min-width: 768px) {
.acf-block-infoblocks .row .headline {
padding: 0;
}
}
.acf-block-infoblocks .row .headline:after {
content: "";
display: table;
clear: both;
}
.acf-block-infoblocks .row .headline .count {
display: block;
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 80px;
}
@media (min-width: 768px) {
.acf-block-infoblocks .row .headline .count {
width: 100%;
height: auto;
position: relative;
}
}
.acf-block-infoblocks .row .headline .count img {
padding: 0;
width: 80px;
height: 80px;
}
@media (min-width: 768px) {
.acf-block-infoblocks .row .headline .count img {
width: 100%;
height: auto;
padding-left: 0;
}
}
.acf-block-infoblocks .row .headline h3 {
padding-bottom: 0;
margin-bottom: 10px;
padding-right: 0;
}
@media (min-width: 768px) {
.acf-block-infoblocks .row .headline h3 {
padding-right: 40px;
}
}
.acf-block-infoblocks .row .text {
display: block;
padding-left: 100px;
}
@media (min-width: 768px) {
.acf-block-infoblocks .row .text {
padding-left: 0;
}
}
.acf-block-infoblocks .row .text p {
margin-top: 0;
padding-right: 0;
}
@media (min-width: 768px) {
.acf-block-infoblocks .row .text p {
padding-right: 40px;
}
}
.wp-block-buttons {
gap: 0 0.5em;
margin: 0 20px;
}
@media (min-width: 768px) {
.wp-block-buttons {
margin: 0 40px;
}
}
@media (min-width: 1281px) {
.wp-block-buttons {
margin: 0 auto;
max-width: 72.5vw;
}
}
.wp-block-button.wp-block-button, .btn.wp-block-button {
margin-bottom: 1em !important;
}
.wp-block-button a, .btn a {
border-radius: 0;
box-shadow: none;
text-decoration: none;
padding: 8px 14px !important;
border-radius: 10px;
transition: all 0.2s;
background-color: var(--color-blau);
color: var(--color-weiss);
-webkit-tap-highlight-color: transparent !important;
outline: none !important;
opacity: 1;
}
.wp-block-button a strong, .btn a strong {
padding: 0;
margin: 0;
}
@media (min-width: 1281px) {
.wp-block-button a, .btn a {
padding: 0.7vw 1vw !important;
border-radius: 0.8vw;
}
}
.wp-block-button a:hover, .wp-block-button a:active, .btn a:hover, .btn a:active {
background-color: var(--color-schwarz);
color: var(--color-weiss);
}
.wp-block-button a.touch, .btn a.touch {
background-color: var(--color-schwarz);
color: var(--color-weiss);
}
.wp-block-button a:focus-visible, .btn a:focus-visible {
outline: 2px solid var(--color-blau);
outline-offset: 10px;
border-radius: 7px;
}
@media (min-width: 1281px) {
.wp-block-button a:focus-visible, .btn a:focus-visible {
outline: 0.2vw solid var(--color-blau) !important;
outline-offset: 0.2vw;
border-radius: 0.1vw;
}
}
.wp-block-button.is-style-outline a, .btn.is-style-outline a {
background-color: transparent;
color: var(--color-blau) !important;
border-color: var(--color-blau) !important;
border-style: solid;
padding: 6px 12px !important;
border-width: 1px !important;
}
@media (min-width: 1281px) {
.wp-block-button.is-style-outline a, .btn.is-style-outline a {
padding: 0.6vw 0.9vw !important;
border-width: 0.1vw !important;
}
}
.wp-block-button.is-style-outline a:hover, .wp-block-button.is-style-outline a:active, .btn.is-style-outline a:hover, .btn.is-style-outline a:active {
background-color: var(--color-schwarz) !important;
border-color: var(--color-schwarz) !important;
color: var(--color-weiss) !important;
opacity: 1;
}
.wp-block-button.is-style-outline a.touch, .btn.is-style-outline a.touch {
background-color: var(--color-schwarz) !important;
border-color: var(--color-schwarz) !important;
color: var(--color-weiss) !important;
opacity: 1;
}
.serviceselect {
margin-left: 0 !important;
}
.serviceselect li {
margin: 0 !important;
padding: 0;
}
.serviceselect .wp-block-button {
margin: 0 4px 25px 0 !important;
}
@media (min-width: 1281px) {
.serviceselect .wp-block-button {
margin: 0 0.3vw 2vw 0 !important;
}
} .acf-block-timeline {
position: relative;
margin-bottom: 2em;
margin-top: 1em;
}
.acf-block-timeline .border {
position: absolute;
top: 0;
bottom: 0;
left: 75px;
width: 2px;
top: 0;
bottom: 0;
}
.acf-block-timeline .timeline-item:after {
display: table;
content: "";
clear: both;
}
.acf-block-timeline .timeline-item .year {
width: 50px;
float: left;
position: relative;
color: var(--blue);
font-size: 120%;
font-weight: bold;
margin-top: -10px;
}
.acf-block-timeline .timeline-item .year .bullet {
position: absolute;
width: 12px;
height: 12px;
background-color: red;
left: 70px;
top: 8px;
border-radius: 50%;
}
.acf-block-timeline .timeline-item .events {
width: calc(100% - 100px);
float: right;
margin-top: -8px;
padding-bottom: 1em;
}
.acf-block-timeline .timeline-item .events .event {
display: block;
position: relative;
padding-bottom: 1em;
}
.acf-block-timeline .timeline-item .events .event .headline {
font-weight: bold;
}
.acf-block-timeline .timeline-item .events .event .more_text p {
line-height: 1.5;
margin: 0;
padding: 0 0 0.5em 0;
} .wp-custom-acf-block-accordion {
margin: 0 20px;
}
@media (min-width: 768px) {
.wp-custom-acf-block-accordion {
margin: 0 40px;
}
}
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion {
margin: 0 auto;
max-width: 72.5vw;
}
}
.wp-custom-acf-block-accordion .item {
display: block;
padding: 0;
margin: 0;
position: relative;
border-top: 1px solid #ccc;
}
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion .item {
border-top: 0.15vw solid #ccc;
}
}
.wp-custom-acf-block-accordion .item:last-child {
border-bottom: 1px solid #ccc;
}
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion .item:last-child {
border-bottom: 0.15vw solid #ccc;
}
}
.wp-custom-acf-block-accordion .item .question {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
font-weight: 400;
text-decoration: none;
cursor: pointer;
position: relative;
width: 100%;
text-align: left;
border: none;
background-color: transparent;
}
.wp-custom-acf-block-accordion .item .question .icon {
width: 30px;
height: 30px;
margin-left: 10px;
margin-right: 20px;
}
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion .item .question .icon {
width: 4vw;
height: 4vw;
margin-right: 2vw;
}
}
.wp-custom-acf-block-accordion .item .question .text {
width: 100%;
font-weight: 600;
font-size: 120%;
}
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion .item .question .text {
font-size: 2vw;
}
}
@media (min-width: 1600px) {
.wp-custom-acf-block-accordion .item .question .text {
font-size: 1.5vw;
}
}
.wp-custom-acf-block-accordion .item .question .arrow {
width: 30px;
height: 30px;
position: relative;
margin: 0;
bottom: auto;
}
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion .item .question .arrow {
width: 4vw;
height: 4vw;
}
}
.wp-custom-acf-block-accordion .item .question .arrow i {
font-style: normal;
position: absolute;
width: 32px;
height: 32px;
border: 1px solid var(--color-schwarz);
border-radius: 50%;
top: 50%;
margin-top: -16px;
}
@media (max-width: 767px) {
.wp-custom-acf-block-accordion .item .question .arrow i {
right: 0;
}
}
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion .item .question .arrow i {
width: 2.5vw;
height: 2.5vw;
margin-top: -1.25vw;
border: 0.1vw solid var(--color-schwarz);
}
}
.wp-custom-acf-block-accordion .item .question .arrow i svg {
position: absolute;
width: 16px;
height: 16px;
top: 50%;
margin-top: -8px;
transform: rotate(0deg);
left: 50%;
margin-left: -8px;
transition: all 0.2s;
}
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion .item .question .arrow i svg {
width: 1vw;
height: 1vw;
margin-top: -0.5vw;
margin-left: -0.5vw;
}
}
.wp-custom-acf-block-accordion .item .question .arrow:after {
display: none;
}
.wp-custom-acf-block-accordion .item .question:hover .text {
color: var(--color-blau);
}
.wp-custom-acf-block-accordion .item .question:hover .arrow svg {
transform: rotate(90deg);
fill: var(--color-blau);
}
.wp-custom-acf-block-accordion .item .answer {
display: none;
padding: 5px 0 0 0;
margin: 0;
}
@media (min-width: 768px) {
.wp-custom-acf-block-accordion .item .answer {
padding: 0;
}
}
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion .item .answer {
padding: 0;
}
}
.wp-custom-acf-block-accordion .item .answer .inner {
display: block;
padding: 0 0 20px 0; }
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion .item .answer .inner {
padding: 0 4vw 0 0;
display: flex;
}
}
.wp-custom-acf-block-accordion .item .answer .inner .excerpt {
padding-bottom: 10px;
display: block;
}
@media (min-width: 768px) {
.wp-custom-acf-block-accordion .item .answer .inner .excerpt {
padding-top: 10px;
padding-bottom: 0;
}
}
.wp-custom-acf-block-accordion .item .answer .inner .excerpt p {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}
.wp-custom-acf-block-accordion .item .answer .inner .link {
display: block;
margin-top: 10px;
margin-bottom: 10px;
}
.wp-custom-acf-block-accordion .item .answer .inner .link a {
display: inline-block;
border: 1px solid #999;
color: var(--color-schwarz);
padding: 8px 14px;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
transition: all 0.2;
}
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion .item .answer .inner .link a {
margin: 0;
border: 0.1vw solid #999;
padding: 0.8vw 1.1vw;
border-radius: 0.8vw;
}
}
.wp-custom-acf-block-accordion .item .answer .inner .link a:hover {
border: 0.1vw solid var(--color-blau);
color: var(--color-weiss);
background-color: var(--color-blau);
}
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion .item .answer .inner.has-link {
padding: 0.5vw 4vw 0 6vw;
display: flex;
}
}
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion .item .answer .inner.has-link .excerpt {
padding-right: 3vw;
padding-bottom: 3vw;
width: 70%;
}
}
@media (min-width: 1281px) {
.wp-custom-acf-block-accordion .item .answer .inner.has-link .btn {
margin: 0;
width: 30%;
display: inline-block;
text-align: right;
padding-top: 1vw;
}
}
.wp-custom-acf-block-accordion .item.active .question .text {
color: var(--color-blau);
}
.wp-custom-acf-block-accordion .item.active .question .arrow svg {
transform: rotate(90deg);
fill: var(--color-blau);
}
.job-accordion {
margin-top: 20px;
margin-bottom: 20px;
}
@media (min-width: 768px) {
.job-accordion {
margin-top: 40px;
margin-bottom: 40px;
}
}
@media (min-width: 1281px) {
.job-accordion {
margin-top: 3vw;
margin-bottom: 3vw;
}
}
.job-accordion .question.active .arrow svg {
transform: rotate(90deg) !important;
} .wp-custom-acf-block-downloads .downloads-item a {
border-style: solid;
border-width: 2px;
padding: 1em 50px 1em 60px;
text-decoration: none;
position: relative;
display: block;
margin-bottom: 10px;
}
.wp-custom-acf-block-downloads .downloads-item a:last-child a {
margin-bottom: 0;
}
.wp-custom-acf-block-downloads .downloads-item a:after {
content: "";
display: table;
clear: both;
}
.wp-custom-acf-block-downloads .downloads-item a .icon {
width: 24px;
height: 24px;
position: absolute;
left: 1em;
top: 50%;
margin-top: -12px;
}
.wp-custom-acf-block-downloads .downloads-item a .icon svg {
width: 24px;
height: 24px;
}
.wp-custom-acf-block-downloads .downloads-item a .data .name {
display: block;
font-weight: 600;
font-size: 1em;
line-height: 1.3;
}
.wp-custom-acf-block-downloads .downloads-item a .data .file_info .ext {
margin-right: 20px;
}
.wp-custom-acf-block-downloads .downloads-item a .data .caption {
display: block;
font-size: 13px;
font-weight: 600;
}
.wp-custom-acf-block-downloads .downloads-item a .download-icon {
width: 18px;
height: 18px;
position: absolute;
right: 1em;
top: 50%;
margin-top: -9px;
}
.wp-custom-acf-block-downloads .downloads-item a .download-icon svg {
width: 18px;
height: 18px;
}
.wp-custom-acf-block-downloads .downloads-item a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
background-color: #eee;
}
.acf-block-jobs .jobs .joblist ul {
display: block;
padding: 0;
margin: 0;
list-style-type: none;
}
.acf-block-jobs .jobs .joblist ul li {
display: block;
padding-bottom: 40px;
}
.acf-block-jobs .jobs .joblist ul li:last-child {
padding-bottom: 0;
}
.acf-block-jobs .jobs .joblist ul li .title {
display: block;
padding-bottom: 5px;
}
.acf-block-jobs .jobs .joblist ul li .title a {
font-weight: bold;
}
.acf-block-jobs .jobs .joblist ul li .date {
display: inline-block;
padding-right: 20px;
}
.acf-block-jobs .jobs .joblist ul li ul.terms {
display: inline-block;
}
.acf-block-jobs .jobs .joblist ul li ul.terms li {
display: inline-block;
padding: 0;
}
.acf-block-jobs .jobs .joblist ul li .excerpt {
display: block;
padding-top: 5px;
} .subpages {
margin: 0 20px;
}
.subpages * {
display: block;
padding: 0;
margin: 0;
max-width: none;
}
@media (min-width: 768px) {
.subpages {
margin: 0 40px;
}
}
@media (min-width: 1281px) {
.subpages {
margin: 0 auto;
max-width: 72.5vw;
}
}
.subpages ul {
display: block;
padding: 0;
margin: 0;
list-style-type: none;
text-align: center;
}
.subpages ul li {
display: inline-block;
margin: 5px;
}
@media (min-width: 1281px) {
.subpages ul li {
margin: 0.8vw;
}
}
.subpages ul li a {
display: inline-block;
border: 1px solid var(--color-schwarz);
padding: 8px 14px;
border-radius: 10px;
text-decoration: none;
color: var(--color-schwarz);
font-weight: semibold;
font-weight: 600;
opacity: 0.6;
}
@media (min-width: 1281px) {
.subpages ul li a {
border: 0.1vw solid var(--color-schwarz);
padding: 0.5vw 0.75vw;
border-radius: 0.5vw;
}
}
.subpages ul li a:hover {
opacity: 1;
}
.subpages ul li.current a, .subpages ul li.current a:hover {
opacity: 1;
border: 1px solid var(--color-blau);
background-color: var(--color-blau);
color: var(--color-weiss);
font-weight: bold;
font-weight: 700;
cursor: default;
}
@media (min-width: 1281px) {
.subpages ul li.current a, .subpages ul li.current a:hover {
border: 0.1vw solid var(--color-blau);
}
}
.wp-block-columns {
position: relative;
margin: 0 auto;
padding: 0 20px;
}
@media (min-width: 768px) {
.wp-block-columns {
padding: 0 40px;
}
}
@media (min-width: 1281px) {
.wp-block-columns {
padding: 0;
max-width: 72.5vw;
gap: 4em;
}
}
.wp-block-columns .wp-block-columns {
padding: 0;
}
.wp-block-columns .wp-block-columns.has-background {
padding: 20px !important;
}
@media (min-width: 768px) {
.wp-block-columns .wp-block-columns.has-background {
padding: 40px !important;
border-radius: 20px;
}
}
@media (min-width: 1281px) {
.wp-block-columns .wp-block-columns.has-background {
padding: 3vw !important;
border-radius: 1.5vw;
}
}
.wp-block-columns.alignfull {
max-width: 100%;
}
@media (min-width: 1281px) {
.wp-block-columns.alignfull {
max-width: none;
margin: 0 -3.5vw;
}
}
.wp-block-columns .wp-block-column *:not(mark) {
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.wp-block-columns .wp-block-column.has-background {
border-radius: 10px;
}
@media (min-width: 1281px) {
.wp-block-columns .wp-block-column.has-background {
border-radius: 1.5vw;
}
}
@media (min-width: 1281px) {
.wp-block-columns .wp-block-column {
max-width: 72.5vw;
margin: 0 auto;
}
}
.wp-block-columns .wp-block-column ul, .wp-block-columns .wp-block-column ol {
margin: 0 0 0 30px;
}
@media (min-width: 1281px) {
.wp-block-columns .wp-block-column ul, .wp-block-columns .wp-block-column ol {
margin: 0 0 0 3vw;
}
}
@font-face {
font-family: "flexslider-icon";
src: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/styles/css/fonts/flexslider-icon.eot);
src: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/styles/css/fonts/flexslider-icon.eot?#iefix) format("embedded-opentype"), url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/styles/css/fonts/flexslider-icon.woff) format("woff"), url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/styles/css/fonts/flexslider-icon.ttf) format("truetype"), url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/styles/css/fonts/flexslider-icon.svg#flexslider-icon) format("svg");
font-weight: normal;
font-style: normal;
} .flex-container a:hover,
.flex-slider a:hover {
outline: none;
}
.slides,
.slides > li,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
.flex-pauseplay span {
text-transform: capitalize;
} .flexslider {
padding: 0;
max-width: 768px;
margin: 0 auto;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}
.flexslider .slides img {
width: 100%;
display: block;
}
.flexslider .slides:after {
content: " ";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .flexslider .slides {
display: block;
}
* html .flexslider .slides {
height: 1%;
}
.no-js .flexslider .slides > li:first-child {
display: block;
} .flexslider {
margin: 0;
position: relative;
}
.flexslider .slides img {
height: auto;
-moz-user-select: none;
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport {
max-height: 300px;
}
@-moz-document url-prefix() {
.loading .flex-viewport {
max-height: none;
}
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
height: auto;
display: block;
opacity: 0.7;
cursor: pointer;
-moz-user-select: none;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
} .standard {
max-width: none;
margin-bottom: 120px;
}
.standard .flex-viewport {
padding-bottom: 0;
}
@media (min-width: 1281px) {
.standard {
margin-bottom: 9vw;
}
}
.standard * {
max-width: none;
}
.standard ul.slides li {
position: relative;
}
.standard ul.slides li .slide-content .image img {
width: 100%;
height: 60vh;
object-fit: cover;
object-position: center center;
}
.standard ul.slides li .slide-content .info {
position: absolute;
left: 0;
bottom: 0;
right: 0;
display: block;
color: var(--color-weiss);
background: rgb(0, 0, 0);
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%);
padding: 60px 20px 20px 20px;
}
@media (min-width: 768px) {
.standard ul.slides li .slide-content .info {
padding: 120px 40px 40px 40px;
}
}
@media (min-width: 1281px) {
.standard ul.slides li .slide-content .info {
padding: 9vw 3vw 3vw 3vw;
}
}
.standard ul.slides li .slide-content .info:after {
content: "";
display: table;
clear: both;
}
.standard ul.slides li .slide-content .info h3 {
color: var(--color-weiss);
padding: 0;
margin: 0 0 10px 0;
}
@media (min-width: 1281px) {
.standard ul.slides li .slide-content .info h3 {
margin: 0 0 1vw 0;
}
}
@media (min-width: 768px) {
.standard ul.slides li .slide-content .info h3 {
width: 66%;
float: left;
}
}
.standard ul.slides li .slide-content .info p {
padding: 0;
margin: 0 0 10px 0;
}
@media (min-width: 1281px) {
.standard ul.slides li .slide-content .info p {
margin: 0 0 1vw 0;
}
}
@media (min-width: 768px) {
.standard ul.slides li .slide-content .info p {
width: 66%;
float: left;
}
}
.standard ul.slides li .slide-content .info .btn {
display: block;
text-align: right;
padding: 10px 0;
}
@media (min-width: 768px) {
.standard ul.slides li .slide-content .info .btn {
width: 33%;
position: absolute;
bottom: 40px;
right: 40px;
}
}
@media (min-width: 1281px) {
.standard ul.slides li .slide-content .info .btn {
padding: 1vw 0;
bottom: 3vw;
right: 3vw;
}
}
.standard ul.slides li .slide-content .info .btn a {
background-color: transparent;
border-color: var(--color-weiss) !important;
color: var(--color-weiss) !important;
}
@media (hover: hover) {
.standard ul.slides li .slide-content .info .btn a:hover {
color: var(--color-blau) !important;
background-color: var(--color-weiss) !important;
}
}
.standard .flex-control-paging {
display: flex;
}
.standard .flex-control-paging li {
flex: 1;
justify-content: space-between;
}
.standard .flex-control-paging li a {
text-indent: -99999px;
height: 3px;
margin: 0 3px;
background-color: var(--color-gruen);
display: block;
opacity: 0.4;
text-decoration: none;
pointer-events: none;
}
@media (min-width: 1281px) {
.standard .flex-control-paging li a {
height: 0.5vw;
margin: 0 0.5vw;
}
}
.standard .flex-control-paging li a.flex-active,
.standard .flex-control-paging li a.flex-active:hover {
opacity: 1;
}
.standard .flex-control-nav {
width: calc(100% - 20px);
position: absolute;
bottom: -30px;
text-align: center;
right: 10px;
left: 10px;
}
@media (min-width: 768px) {
.standard .flex-control-nav {
width: calc(100% - 60px);
bottom: -30px;
right: 30px;
left: 30px;
}
}
@media (min-width: 1281px) {
.standard .flex-control-nav {
width: calc(100% + 2vw);
bottom: -2vw;
right: -1vw;
left: -1vw;
}
}
.standard .flex-control-nav li {
margin: 0 6px;
display: inline-block;
*display: inline;
}
@media (min-width: 1281px) {
.standard .flex-control-nav li {
margin: 0 0.5vw;
}
}
.standard .flex-direction-nav {
margin: 0 !important;
padding: 0;
list-style: none;
width: 120px;
position: absolute;
bottom: -42px;
left: calc(50% - 10px) !important;
margin-left: -60px !important;
}
@media (min-width: 1281px) {
.standard .flex-direction-nav {
width: 9vw !important;
left: 50% !important;
margin: 0 0 0 -4.5vw !important;
padding: 0 !important;
top: auto;
bottom: -3vw;
}
}
.standard .flex-direction-nav li {
position: absolute;
width: 50px;
height: 50px;
padding: 0;
}
@media (min-width: 1281px) {
.standard .flex-direction-nav li {
width: 4vw;
height: 4vw;
}
}
.standard .flex-direction-nav li a {
transition: background-position 0.2s;
display: block;
text-indent: -99999px;
width: 50px;
height: 50px;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M59.6,11.7c-0.8,0.8-0.8,2.1,0,2.9l33.3,33.3H2.1C0.9,47.9,0,48.9,0,50s0.9,2.1,2.1,2.1h90.9L59.6,85.4c-0.8,0.8-0.8,2.1,0,2.9c0.8,0.8,2.1,0.8,2.9,0l36.9-36.9c0.4-0.4,0.6-0.9,0.6-1.5c0-0.5-0.2-1.1-0.6-1.5L62.5,11.7C61.7,10.9,60.4,10.9,59.6,11.7z"/></svg>');
background-repeat: no-repeat;
background-size: 25px 25px;
background-position: center center;
border: 1px solid var(--color-schwarz);
border-radius: 50%;
}
@media (min-width: 1281px) {
.standard .flex-direction-nav li a {
width: 4vw;
height: 4vw;
background-size: 1.5vw 1.5vw;
border-width: 0.1vw;
transition: background-size 0.2s;
}
}
.standard .flex-direction-nav li a:hover {
border: 2px solid var(--color-schwarz);
width: 48px;
height: 48px;
}
@media (min-width: 1281px) {
.standard .flex-direction-nav li a:hover {
width: 4vw;
height: 4vw;
border-width: 0.2vw;
}
}
.standard .flex-direction-nav li.flex-nav-prev {
transition: all 0.2s;
left: 0;
}
.standard .flex-direction-nav li.flex-nav-prev a {
transform: rotate(180deg);
}
.standard .flex-direction-nav li.flex-nav-prev a:hover {
background-position: center center;
}
@media (min-width: 1281px) {
.standard .flex-direction-nav li.flex-nav-prev a:hover {
background-position: center center;
background-size: 2vw 2vw;
}
}
.standard .flex-direction-nav li.flex-nav-next {
left: 70px;
}
@media (min-width: 1281px) {
.standard .flex-direction-nav li.flex-nav-next {
left: 4.8vw;
}
}
.standard .flex-direction-nav li.flex-nav-next a:hover {
background-position: center center;
}
@media (min-width: 1281px) {
.standard .flex-direction-nav li.flex-nav-next a:hover {
background-position: center center;
background-size: 2vw 2vw;
}
}
.standard .flex-pauseplay {
display: block;
position: absolute;
bottom: -93px;
left: 50%;
margin-left: -33px !important;
}
@media (min-width: 1281px) {
.standard .flex-pauseplay {
bottom: auto;
top: auto;
bottom: -7.2vw;
left: 50%;
margin: 0 0 0 -4.5vw !important;
padding: 0 !important;
width: 9vw;
}
}
.standard .flex-pauseplay a {
transition: background-size 0.2s;
display: block;
width: 50px;
height: 50px;
border: 1px solid var(--color-schwarz);
text-decoration: none;
text-indent: -9999px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: 20px 20px;
}
.standard .flex-pauseplay a:hover {
background-size: 25px 25px;
width: 48px;
height: 48px;
border: 2px solid var(--color-schwarz);
}
@media (min-width: 1281px) {
.standard .flex-pauseplay a {
text-indent: 0;
width: 100%;
height: 4vw;
border-radius: 2vw;
background-position: 1.3vw center;
background-size: 1.5vw 1.5vw;
line-height: 4vw;
text-transform: uppercase;
color: var(--color-schwarz);
border-width: 0.1vw;
font-weight: 600;
text-align: right;
padding-right: 1.5vw;
font-size: 1.2vw;
display: block;
}
.standard .flex-pauseplay a:hover {
width: 100%;
height: 4vw;
border-width: 0.2vw;
line-height: 3.75vw;
background-size: 1.5vw 1.5vw;
background-position: 1.2vw center;
padding-right: 1.4vw;
}
}
.standard .flex-pauseplay a.flex-pause {
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><path d="M3,24V0h6v24H3zM15,24V0h6v24H15z"/></svg>');
}
.standard .flex-pauseplay a.flex-play {
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"><polygon points="3.4,24 3.4,0 20.6,12 "/></svg>');
}
.standard.autoplay .flex-direction-nav {
width: 210px;
left: calc(50% - 55px) !important;
}
@media (min-width: 1281px) {
.standard.autoplay .flex-direction-nav {
width: 20vw !important;
left: 50% !important;
margin: 0 0 0 -10vw !important;
padding: 0 !important;
top: auto;
bottom: -3vw;
}
}
.standard.autoplay .flex-direction-nav li.flex-nav-prev {
left: 0;
}
.standard.autoplay .flex-direction-nav li.flex-nav-next {
left: 160px;
}
@media (min-width: 1281px) {
.standard.autoplay .flex-direction-nav li.flex-nav-next {
left: 15.5vw;
}
} .carousel {
padding-bottom: 50px;
margin-left: 0 !important;
margin-right: -20px !important;
}
@media (min-width: 768px) {
.carousel {
margin-right: -40px !important;
}
}
@media (min-width: 1281px) {
.carousel .flex-viewport {
padding-left: 1.5vw !important;
margin-left: -1.5vw !important;
padding-top: 1vw;
}
}
.carousel img {
border-radius: 10px;
}
@media (min-width: 768px) {
.carousel img {
border-radius: 20px;
}
}
@media (min-width: 1281px) {
.carousel img {
border-radius: 1.5vw;
}
}
@media (min-width: 1281px) {
.carousel {
margin-right: -13.75vw !important;
padding-bottom: 0;
}
}
.carousel .slides {
display: flex;
margin-left: 0 !important;
}
.carousel .slides li {
position: relative;
z-index: 0;
padding-right: 20px;
padding-bottom: 20px;
}
@media (min-width: 768px) {
.carousel .slides li {
padding-right: 40px;
padding-bottom: 40px;
}
}
@media (min-width: 1281px) {
.carousel .slides li {
padding-right: 2vw;
padding-bottom: 1vw;
}
}
.carousel .slides li .slide-content {
display: block;
padding: 20px;
margin: 0;
border-radius: 10px;
}
@media (min-width: 768px) {
.carousel .slides li .slide-content {
border-radius: 20px;
}
}
@media (min-width: 1281px) {
.carousel .slides li .slide-content {
padding: 40px;
}
}
@media (min-width: 1281px) {
.carousel .slides li .slide-content {
padding: 2vw 2vw 2vw 2vw;
border-radius: 2vw;
}
}
.carousel .slides li .slide-content .image {
display: block;
overflow: hidden;
}
.carousel .slides li .slide-content .image img {
width: 100%;
height: 100%;
aspect-ratio: 1/1;
object-fit: cover;
object-position: center;
}
@media (min-width: 768px) {
.carousel .slides li .slide-content .image img {
aspect-ratio: 3/2;
}
}
@media (min-width: 1281px) {
.carousel .slides li .slide-content .image img {
height: auto;
aspect-ratio: auto;
object-fit: unset;
}
}
.carousel .slides li .slide-content .info .counter {
width: 50px;
height: 50px;
font-weight: semibold;
font-weight: 600;
font-size: 120%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-repeat: no-repeat;
background-position: center center;
background-size: 50px 50px;
margin-bottom: 10px;
}
@media (min-width: 768px) {
.carousel .slides li .slide-content .info .counter {
margin-bottom: 20px;
width: 100px;
height: 100px;
background-size: 100px 100px;
font-size: 200%;
}
}
@media (min-width: 1281px) {
.carousel .slides li .slide-content .info .counter {
margin-bottom: 1.5vw;
width: 6vw;
height: 6vw;
background-size: 6vw 6vw;
font-size: 200%;
}
}
.carousel .slides li .slide-content .info h3.space {
padding-top: 20px;
}
@media (min-width: 1281px) {
.carousel .slides li .slide-content .info h3 {
font-size: 1.3vw;
}
}
.carousel .slides li .slide-content .info p {
padding: 0;
margin: 0;
}
.carousel .slides li .slide-content .info .btn {
display: block;
padding: 20px 0 0 0;
margin: 0;
text-align: left;
}
@media (min-width: 1281px) {
.carousel .slides li .slide-content .info .btn {
padding: 1.5vw 0 0 0;
}
}
.carousel .slides li .slide-content.image-slide {
padding: 0;
border-radius: 0;
}
.carousel .slides li .slide-content a.slide-hover {
text-decoration: none;
color: var(--color-schwarz);
display: block;
}
.carousel .slides li .slide-content a.slide-hover .image {
display: block;
border-radius: 10px;
overflow: hidden;
position: relative;
}
@media (min-width: 768px) {
.carousel .slides li .slide-content a.slide-hover .image {
border-radius: 20px;
}
}
@media (min-width: 1281px) {
.carousel .slides li .slide-content a.slide-hover .image {
border-radius: 1vw;
}
.carousel .slides li .slide-content a.slide-hover .image:after {
transition: all 0.5s;
content: "";
display: block;
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
}
}
.carousel .slides li .slide-content a.slide-hover .image img {
transition: transform 0.3s ease-in-out;
float: left;
}
.carousel .slides li .slide-content a.slide-hover .image:hover img {
transform: scale(1.1);
}
@media (min-width: 1281px) {
.carousel .slides li .slide-content a.slide-hover .image:hover:after {
opacity: 1;
}
}
.carousel .slides li .slide-content a.slide-hover .info {
display: block;
padding-bottom: 1.5vw;
}
.carousel .slides li .slide-content a.slide-hover .info h3 {
position: relative;
display: inline-block;
padding-bottom: 0;
}
@media (min-width: 1281px) {
.carousel .slides li .slide-content a.slide-hover .info h3:after {
content: "";
display: block;
width: 0%;
height: 0.2vw;
position: absolute;
left: 0;
bottom: -5px;
transition: width 0.2s;
background-color: var(--color-hellblau);
}
}
.carousel .slides li .slide-content a.slide-hover .info h3:hover {
color: var(--color-hellblau);
}
.carousel .slides li .slide-content a.slide-hover .info h3:hover:after {
width: 100%;
}
.carousel .slides li .slide-content a.slide-hover .info p {
padding-top: 0;
}
@media (min-width: 1281px) {
.carousel .slides li .slide-content a.slide-hover .info p {
padding-top: 0.5vw;
}
}
.carousel .slides li .slide-content a.slide-hover .info p:hover {
cursor: text;
}
@media (min-width: 1281px) {
.carousel .slides li .slide-content a.slide-hover:focus-visible {
border-radius: 1vw;
}
}
.carousel .slides li.no-space .slide-content {
padding: 20px 0;
}
@media (min-width: 1281px) {
.carousel .slides li.no-space .slide-content {
padding: 40px 0;
}
}
@media (min-width: 1281px) {
.carousel .slides li.no-space .slide-content {
padding: 2vw 0 1vw 0;
}
}
.carousel .slides li:nth-child(3n+1) .slide-content .info .counter {
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/circle1.svg);
}
.carousel .slides li:nth-child(3n+2) .slide-content .info .counter {
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/circle2.svg);
}
.carousel .slides li:nth-child(3n+3) .slide-content .info .counter {
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/circle3.svg);
}
.carousel .flex-direction-nav {
margin: 0 !important;
padding: 0;
list-style: none;
width: 120px;
position: absolute;
bottom: 40px;
left: calc(50% - 10px) !important;
margin-left: -60px !important;
}
@media (min-width: 1281px) {
.carousel .flex-direction-nav {
width: 9vw !important;
left: -11.5vw !important;
margin: 0 !important;
padding: 0 !important;
top: 1vw;
}
}
.carousel .flex-direction-nav li {
position: absolute;
width: 50px;
height: 50px;
padding: 0;
}
@media (min-width: 1281px) {
.carousel .flex-direction-nav li {
width: 4vw;
height: 4vw;
}
}
.carousel .flex-direction-nav li a {
transition: background-position 0.2s;
display: block;
text-indent: -99999px;
width: 50px;
height: 50px;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M59.6,11.7c-0.8,0.8-0.8,2.1,0,2.9l33.3,33.3H2.1C0.9,47.9,0,48.9,0,50s0.9,2.1,2.1,2.1h90.9L59.6,85.4c-0.8,0.8-0.8,2.1,0,2.9c0.8,0.8,2.1,0.8,2.9,0l36.9-36.9c0.4-0.4,0.6-0.9,0.6-1.5c0-0.5-0.2-1.1-0.6-1.5L62.5,11.7C61.7,10.9,60.4,10.9,59.6,11.7z"/></svg>');
background-repeat: no-repeat;
background-size: 25px 25px;
background-position: center center;
border: 1px solid var(--color-schwarz);
border-radius: 50%;
}
@media (min-width: 1281px) {
.carousel .flex-direction-nav li a {
width: 4vw;
height: 4vw;
background-size: 1.5vw 1.5vw;
border-width: 0.1vw;
transition: background-size 0.2s;
}
}
.carousel .flex-direction-nav li a:hover {
border: 2px solid var(--color-schwarz);
width: 48px;
height: 48px;
}
@media (min-width: 1281px) {
.carousel .flex-direction-nav li a:hover {
width: 4vw;
height: 4vw;
border-width: 0.2vw;
}
}
.carousel .flex-direction-nav li.flex-nav-prev {
transition: all 0.2s;
left: 0;
}
.carousel .flex-direction-nav li.flex-nav-prev a {
transform: rotate(180deg);
}
.carousel .flex-direction-nav li.flex-nav-prev a:hover {
background-position: center center;
}
@media (min-width: 1281px) {
.carousel .flex-direction-nav li.flex-nav-prev a:hover {
background-position: center center;
background-size: 2vw 2vw;
}
}
.carousel .flex-direction-nav li.flex-nav-next {
left: 70px;
}
@media (min-width: 1281px) {
.carousel .flex-direction-nav li.flex-nav-next {
left: 4.8vw;
}
}
.carousel .flex-direction-nav li.flex-nav-next a:hover {
background-position: center center;
}
@media (min-width: 1281px) {
.carousel .flex-direction-nav li.flex-nav-next a:hover {
background-position: center center;
background-size: 2vw 2vw;
}
}
.carousel .flex-pauseplay {
display: block;
position: absolute;
bottom: -12px;
left: 50%;
margin-left: -33px !important;
}
@media (min-width: 1281px) {
.carousel .flex-pauseplay {
bottom: auto;
top: 6vw;
left: -11.5vw;
width: 100%;
margin: 0 !important;
padding: 0 !important;
width: 9vw;
}
}
.carousel .flex-pauseplay a {
transition: background-size 0.2s;
display: block;
width: 50px;
height: 50px;
border: 1px solid var(--color-schwarz);
text-decoration: none;
text-indent: -9999px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: 20px 20px;
}
.carousel .flex-pauseplay a:hover {
background-size: 25px 25px;
width: 48px;
height: 48px;
border: 2px solid var(--color-schwarz);
}
@media (min-width: 1281px) {
.carousel .flex-pauseplay a {
text-indent: 0;
width: 100%;
height: 4vw;
border-radius: 2vw;
background-position: 1.3vw center;
background-size: 1.5vw 1.5vw;
line-height: 4vw;
text-transform: uppercase;
color: var(--color-schwarz);
border-width: 0.1vw;
font-weight: 600;
text-align: right;
padding-right: 1.5vw;
font-size: 1.2vw;
display: block;
}
.carousel .flex-pauseplay a:hover {
width: 100%;
height: 4vw;
border-width: 0.2vw;
line-height: 3.75vw;
background-size: 1.5vw 1.5vw;
background-position: 1.2vw center;
padding-right: 1.4vw;
}
}
.carousel .flex-pauseplay a.flex-pause {
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path class="st0" d="M-16,58"/><g><path class="st0" d="M34.7,8.5c-3.8,2.2-6.7,5.4-7.9,10.5c-2.9,18.1-2.1,45.3,1.4,63.2c0.9,4.5,3.9,10.1,5.5,9.4c3.2-0.5,6.1-4.6,9.5-8.6c-0.7-21.1-1-49.1-2.3-68.5C39.9,11.7,37.4,8.8,34.7,8.5z"/><path class="st0" d="M72.3,9.6c-3.2,0.5-7,1.8-9.8,5c-1.2,2.5-1.9,6.8-4.3,13.5c-0.1,15.7-0.4,35-0.2,54.3c0.4,3.5,1.9,6.3,4,6.6c2.7-0.6,5.5-2.9,7.2-6.2c1.3-5.1,2.1-11.1,2.3-17.2C72.7,50.8,74.4,37,75,22.2C75.2,17.8,73.4,9.7,72.3,9.6z"/></g></svg>');
}
.carousel .flex-pauseplay a.flex-play {
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path class="st0" d="M82.2,40.7C62.7,25.5,41.1,13.6,20.6,1.8c-1,0.5-1.8,1-2.4,1.6c-0.7,0.2-1.3,0.8-1.9,2c-0.8,1.2-1.1,3.3-1.2,5.5c0,20.1,0.2,44.1,0.7,65.1c0.1,7.4,1.7,17.2,4.1,20c0.3,0.3,1.2,1.2,1.4,1.5c3.7-1.6,7.5-3.3,11.6-5.1c15.7-9.4,49.5-34,57-42.8C87.8,46.7,85.3,43.3,82.2,40.7z M25.7,87.7c0.1-1.2,0.2-2.4,0.2-3.7c-0.1-15.8-0.4-31.6-0.8-47.4c-0.1-4.7-0.9-14.2-1.5-20.6c3,2.2,6.2,4.2,9.7,6c9.9,5.6,20.2,11,30,16.6c3.5,2.4,6.7,5,9.8,7.6C58.6,63.3,39.5,72.7,25.7,87.7z"/><path class="st0" d="M-16,58"/></svg>');
}
.carousel.autoplay .flex-direction-nav {
width: 210px;
left: calc(50% - 55px) !important;
}
@media (min-width: 1281px) {
.carousel.autoplay .flex-direction-nav {
width: 9vw;
left: -11.5vw !important;
margin: 0 !important;
padding: 0 !important;
top: 0;
}
}
.carousel.autoplay .flex-direction-nav li.flex-nav-prev {
left: 0;
}
.carousel.autoplay .flex-direction-nav li.flex-nav-next {
left: 160px;
}
@media (min-width: 1281px) {
.carousel.autoplay .flex-direction-nav li.flex-nav-next {
left: 4.8vw;
}
}
.slideshowgallery {
padding-bottom: 40px;
margin-left: -20px !important;
margin-right: -20px !important;
}
@media (min-width: 1281px) {
.slideshowgallery {
margin-right: -13.75vw !important;
margin-left: 0 !important;
padding-bottom: 0;
}
}
.slideshowgallery .slides {
margin: 0 0 50px 0 !important;
}
.slideshowgallery .slides li {
padding: 0;
}
.slideshowgallery .slides li .slide-content {
padding: 0 20px;
}
.slideshowgallery .slides li .slide-content a .image {
overflow: visible;
border-radius: 0;
}
.slideshowgallery .slides li .slide-content a .image:after {
display: none !important;
}
.slideshowgallery .slides li .slide-content a .image img {
width: 100%;
height: auto;
aspect-ratio: unset; object-fit: unset; object-position: unset; }
.slideshowgallery .flex-direction-nav {
bottom: 80px;
}
@media (min-width: 1281px) {
.slideshowgallery .flex-direction-nav {
left: calc(-14.5vw - 20px) !important;
top: 6vw;
}
}
.slideshowgallery .flex-direction-nav.hidden {
display: none !important;
}
.flex-direction-nav.hidden {
display: none;
}
.flexslider.mobilefalse .flex-direction-nav {
display: none;
}
@media (min-width: 1281px) {
.flexslider.mobilefalse .flex-direction-nav {
display: block;
}
}
@media (min-width: 1281px) {
.flexslider.desktopfalse .flex-direction-nav {
display: none;
}
}
.flexslider .flex-direction-nav.mobilefalse.desktopfalse {
display: none;
}
.acf-block-customerlogos ul {
list-style-type: none;
padding: 0;
margin: 0 !important;
display: flex;
gap: 80px 100px;
flex-wrap: wrap;
align-items: center;
}
@media (min-width: 768px) {
.acf-block-customerlogos ul {
gap: 50px 120px;
}
}
@media (min-width: 1281px) {
.acf-block-customerlogos ul {
gap: 4vw 8vw;
}
}
.acf-block-customerlogos ul li {
width: calc(50% - 50px);
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
max-width: 100%;
position: relative;
}
@media (min-width: 768px) {
.acf-block-customerlogos ul li {
width: calc(25% - 50px);
}
}
@media (min-width: 1281px) {
.acf-block-customerlogos ul li {
width: calc(25% - 8vw);
}
}
.acf-block-customerlogos ul li img {
width: 100%;
height: auto;
padding: 0;
}
.acf-block-certificate {
display: block;
max-width: 72.5vw;
margin: 0 20px;
}
@media (min-width: 768px) {
.acf-block-certificate {
margin: 0 40px;
}
}
@media (min-width: calc(72.5vw + 80px)) {
.acf-block-certificate {
margin: 0 auto;
max-width: 72.5vw;
}
}
.acf-block-certificate ul {
padding: 0;
margin: 0 !important;
list-style-type: none;
columns: 2;
column-gap: 40px;
}
@media (min-width: 768px) {
.acf-block-certificate ul {
column-gap: 100px;
columns: 3;
}
}
.acf-block-certificate ul li {
display: block;
padding-bottom: 40px;
padding-left: 0;
padding-right: 0;
}
@media (min-width: 768px) {
.acf-block-certificate ul li {
padding-bottom: 60px;
}
}
.acf-block-certificate ul li img {
display: block;
width: 100%;
height: auto;
padding-left: 0;
padding-right: 0;
}
@media (min-width: 768px) {
.wp-block-column[style*="flex-basis:33.33%"] .acf-block-certificate ul, .wp-block-column[style*="flex-basis: 33.33%"] .acf-block-certificate ul {
column-gap: 40px;
columns: 2;
}
}
@media (min-width: 768px) {
.wp-block-column[style*="flex-basis:33.33%"] .acf-block-certificate ul li, .wp-block-column[style*="flex-basis: 33.33%"] .acf-block-certificate ul li {
padding-bottom: 40px;
}
}
.acf-block-team {
max-width: 72.5vw;
padding: 0 20px;
margin: 0;
display: flex;
gap: 50px 50px;
flex-wrap: wrap;
align-items: center;
}
@media (min-width: 768px) {
.acf-block-team {
padding: 0;
gap: 60px 100px;
align-items: flex-start;
}
}
@media (min-width: 1281px) {
.acf-block-team {
padding: 0;
gap: 3vw 5.2vw;
align-items: flex-start;
}
}
.acf-block-team .teammember {
display: table;
}
@media (min-width: 768px) {
.acf-block-team .teammember {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 100%;
position: relative;
flex: 0 1 calc(33.33333333% - 70px);
}
}
@media (min-width: 1281px) {
.acf-block-team .teammember {
flex: 0 1 calc(25% - 4vw);
}
}
.acf-block-team .teammember .image {
position: relative;
display: table-cell;
vertical-align: middle;
padding-right: 20px;
width: 30vw;
}
@media (min-width: 768px) {
.acf-block-team .teammember .image {
width: 100%;
padding: 0 0 10px 0;
vertical-align: top;
}
}
@media (min-width: 1281px) {
.acf-block-team .teammember .image {
padding: 0 0 0.6vw 0;
}
}
.acf-block-team .teammember .image:after {
content: "";
clear: both;
display: table;
}
.acf-block-team .teammember .image img {
width: 100%;
height: auto;
aspect-ratio: 1/1;
object-fit: cover;
float: left;
border: 2px solid var(--color-gruen);
border-radius: 50%;
}
@media (min-width: 1281px) {
.acf-block-team .teammember .image img {
border: 0.15625vw solid var(--color-gruen);
}
}
.acf-block-team .teammember .content {
display: table-cell;
vertical-align: middle;
}
@media (min-width: 768px) {
.acf-block-team .teammember .content {
vertical-align: top;
}
}
.acf-block-team .teammember .content .title {
display: block;
font-weight: bold;
font-size: 140%;
}
@media (min-width: 768px) {
.acf-block-team .teammember .content .title {
text-align: center;
}
}
@media (min-width: 1600px) {
.acf-block-team .teammember .content .title {
font-size: 120%;
}
}
.acf-block-team .teammember .content .position {
display: block;
margin-bottom: 10px;
}
@media (min-width: 768px) {
.acf-block-team .teammember .content .position {
text-align: center;
}
}
.acf-block-hero {
clear: both;
padding: 0;
margin: 0 auto;
position: relative;
z-index: 0;
max-width: 100%;
overflow: hidden;
}
.acf-block-hero:after {
content: "";
display: table;
clear: both;
}
.acf-block-hero .block-wrapper {
margin: 0 auto;
padding: 100px 20px 50px 20px;
}
@media (min-width: 768px) {
.acf-block-hero .block-wrapper {
padding: 100px 40px 50px 0;
}
}
@media (min-width: 1281px) {
.acf-block-hero .block-wrapper {
padding: 5vw 2.5vw 2.5vw 2vw;
}
}
.acf-block-hero .block-wrapper h1, .acf-block-hero .block-wrapper .like_h1 {
padding: 0;
max-width: none;
margin: 0 20px 10px 20px;
transform: rotate(-2deg);
hyphens: none;
font-family: "Flaters";
font-size: 32px;
}
@media (min-width: 768px) {
.acf-block-hero .block-wrapper h1, .acf-block-hero .block-wrapper .like_h1 {
hyphens: none;
padding: 0;
margin: 0 40px 20px 40px;
font-size: 50px;
}
}
@media (min-width: 1281px) {
.acf-block-hero .block-wrapper h1, .acf-block-hero .block-wrapper .like_h1 {
font-size: 5vw;
max-width: 72.5vw;
margin: 0 auto;
padding-bottom: 1vw;
}
}
.acf-block-hero .block-wrapper h1 span, .acf-block-hero .block-wrapper .like_h1 span {
padding: 6px 10px;
-webkit-padding-before: 1px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
line-height: 70px;
}
@media (min-width: 768px) {
.acf-block-hero .block-wrapper h1 span, .acf-block-hero .block-wrapper .like_h1 span {
line-height: 80px;
}
}
@media (min-width: 1281px) {
.acf-block-hero .block-wrapper h1 span, .acf-block-hero .block-wrapper .like_h1 span {
line-height: 7.5vw;
padding: 0.5vw 1.5vw;
}
}
.acf-block-hero .block-wrapper h1 br, .acf-block-hero .block-wrapper .like_h1 br {
display: none;
}
@media (min-width: 768px) {
.acf-block-hero .block-wrapper h1 br, .acf-block-hero .block-wrapper .like_h1 br {
display: block;
}
}
.acf-block-hero .block-wrapper h1 i, .acf-block-hero .block-wrapper .like_h1 i {
display: inline-block;
width: 10px;
padding: 0;
margin: 0;
}
@media (min-width: 768px) {
.acf-block-hero .block-wrapper h1 i, .acf-block-hero .block-wrapper .like_h1 i {
display: none;
}
}
.acf-block-hero svg.hero-background-image {
width: calc((100vw - 1600px) / 2);
min-width: 400px;
height: auto;
margin: 0;
position: absolute;
top: 0;
right: -20px;
z-index: -1;
opacity: 0.1;
}
.hero-arrow {
margin-top: -60px;
position: absolute;
left: 50%;
text-align: center;
z-index: 2;
}
@media (min-width: 768px) {
.hero-arrow {
margin-top: -60px;
}
}
.hero-arrow svg {
width: auto;
height: 80px;
}
@media (min-width: 768px) {
.hero-arrow svg {
height: 120px;
}
}
.features {
display: flex;
flex-wrap: wrap; gap: 20px;
justify-content: space-between;
}
.features .feature {
flex: 0 0 calc(25% - 20px);
text-align: center;
padding: 40px 20px;
border-radius: 20px;
box-sizing: border-box;
position: relative;
}
.features .feature .icon {
display: flex; justify-content: center; align-items: center; width: 25%; height: auto; aspect-ratio: 1/1;
margin: 0 auto;
}
.features .feature .icon svg {
width: 100%;
height: 100%;
}
.features .feature .title {
display: block;
font-weight: bold;
font-weight: 700;
padding-top: 20px;
font-size: 1rem;
}
.features .feature .desc {
display: block;
padding-top: 5px;
font-size: 0.85rem;
}
.acf-block-background {
display: block;
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}
.acf-block-background img {
width: 100%;
height: 100%;
object-fit: cover;
}
.acf-block-background.is-right {
right: 0;
}
.acf-block-background.is-left {
left: 0;
}
.wp-block-columns.has-background h1 {
transform: rotate(-2deg);
hyphens: none;
margin-top: 40px;
}
@media (min-width: 1281px) {
.wp-block-columns.has-background h1 {
margin-top: 0.3vw;
}
}
.wp-block-columns.has-background h1 span {
padding: 6px 10px;
-webkit-padding-before: 1px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
line-height: 70px;
background-color: var(--color-weiss);
border-top: 10px solid var(--color-weiss);
}
@media (min-width: 768px) {
.wp-block-columns.has-background h1 span {
line-height: 80px;
}
}
@media (min-width: 1281px) {
.wp-block-columns.has-background h1 span {
line-height: 4.7vw;
padding: 0.3vw 0.5vw;
border-top: 0.5vw solid var(--color-weiss) !important;
}
}
.wp-block-columns.has-background h1 br {
display: none;
}
@media (min-width: 768px) {
.wp-block-columns.has-background h1 br {
display: block;
}
}
.wp-block-columns.has-background h1 i {
display: inline-block;
width: 10px;
padding: 0;
margin: 0;
}
@media (min-width: 768px) {
.wp-block-columns.has-background h1 i {
display: none;
}
}
#breadcrumb {
display: block;
max-width: none;
margin: 0 20px;
border-top: 1px solid #777;
padding: 20px 0;
}
@media (min-width: 768px) {
#breadcrumb {
margin: 0 40px;
padding: 40px 0;
}
}
@media (min-width: 1281px) {
#breadcrumb {
margin: 0 0;
padding: 2vw 0;
border-top: 0.1vw solid #777;
}
}
#breadcrumb ul {
display: block;
padding: 0;
margin: 0;
max-width: none;
list-style-type: none;
}
#breadcrumb ul li {
display: inline;
}
#breadcrumb ul li a {
color: var(--color-schwarz);
text-decoration: none;
margin: 0;
display: inline-block;
}
#breadcrumb ul li a:hover {
text-decoration: underline;
}
#breadcrumb ul li .current {
display: inline-block;
margin: 0;
}
#subpages {
display: block;
padding: 0;
margin: 20px 20px 20px 20px;
border-bottom: 1px solid var(--color-grau);
}
@media (min-width: 768px) {
#subpages {
margin: 20px 40px 20px 40px;
border-bottom: 1px solid var(--color-grau);
}
}
@media (min-width: 1281px) {
#subpages {
margin: 0 0 1.5vw 0;
border-bottom: 0.1vw solid var(--color-grau);
}
}
#subpages .parent_page {
display: block;
}
#subpages .parent_page button {
display: block;
width: 100%;
background-color: transparent;
border: none;
padding: 15px 40px 15px 0;
margin: 0;
font-weight: 600;
border-top: 1px solid var(--color-grau);
text-align: left;
font-size: 14px;
cursor: pointer;
position: relative;
}
@media (min-width: 768px) {
#subpages .parent_page button {
padding: 15px 60px 15px 0;
font-size: 16px;
border-bottom: none;
}
}
@media (min-width: 1281px) {
#subpages .parent_page button {
border-top: 0.1vw solid var(--color-grau);
padding: 1vw 6vw 1vw 0;
font-size: 1.2vw;
}
}
@media (min-width: 768px) {
#subpages .parent_page button .title {
padding-right: 10px;
}
}
@media (min-width: 1281px) {
#subpages .parent_page button .title {
padding-right: 0.5vw;
}
}
#subpages .parent_page button i {
font-style: normal;
position: absolute;
width: 32px;
height: 32px;
border: 1px solid var(--color-schwarz);
border-radius: 50%;
top: 50%;
margin-top: -16px;
}
@media (max-width: 767px) {
#subpages .parent_page button i {
right: 0;
}
}
@media (min-width: 1281px) {
#subpages .parent_page button i {
width: 2.5vw;
height: 2.5vw;
margin-top: -1.25vw;
border: 0.1vw solid var(--color-schwarz);
}
}
#subpages .parent_page button i svg {
position: absolute;
width: 16px;
height: 16px;
top: 50%;
margin-top: -8px;
transform: rotate(0deg);
left: 50%;
margin-left: -8px;
transition: all 0.2s;
}
@media (min-width: 1281px) {
#subpages .parent_page button i svg {
width: 1vw;
height: 1vw;
margin-top: -0.5vw;
margin-left: -0.5vw;
}
}
#subpages .parent_page button.active svg {
transform: rotate(90deg);
}
#subpages .the_subpages {
display: none;
padding: 0;
margin: 0;
}
@media (min-width: 768px) {
#subpages .the_subpages {
border-bottom: none;
}
}
#subpages .the_subpages ul {
display: block;
padding: 10px 0 10px 0;
margin: 0;
list-style-type: none;
max-width: none;
}
@media (min-width: 768px) {
#subpages .the_subpages ul {
padding: 10px 0 10px 0;
margin: 0;
}
}
@media (min-width: 1281px) {
#subpages .the_subpages ul {
padding: 0.5vw 0 1vw 0;
}
}
#subpages .the_subpages ul li {
display: inline-block;
padding: 0;
margin: 0 10px 10px 0; }
@media (min-width: 768px) {
#subpages .the_subpages ul li {
display: inline-block;
margin: 0 10px 10px 0;
}
}
@media (min-width: 1281px) {
#subpages .the_subpages ul li {
margin: 0 1vw 1vw 0;
}
}
#subpages .the_subpages ul li a {
display: inline-block;
text-decoration: none;
color: var(--color-schwarz);
padding: 10px 0;
border-bottom: 1px solid var(--color-mittelgrau);
position: relative;
font-size: 14px;
}
@media (min-width: 768px) {
#subpages .the_subpages ul li a {
font-size: 16px;
}
}
@media (min-width: 1281px) {
#subpages .the_subpages ul li a {
font-size: 1.2vw;
}
}
#subpages .the_subpages ul li a svg {
width: 16px;
height: 16px;
position: absolute;
top: 50%;
margin-top: -8px;
}
@media (max-width: 767px) {
#subpages .the_subpages ul li a svg {
right: 0;
}
}
@media (min-width: 1281px) {
#subpages .the_subpages ul li a svg {
width: 1vw;
height: 1vw;
margin-top: -0.5vw;
}
}
#subpages .the_subpages ul li a:hover {
color: var(--color-hellblau);
}
#subpages .the_subpages ul li a:hover svg {
fill: var(--color-hellblau);
}
@media (min-width: 768px) {
#subpages .the_subpages ul li a {
display: inline-block;
border: 1px solid var(--color-grau);
padding: 8px 14px;
border-radius: 10px;
}
#subpages .the_subpages ul li a:hover {
color: var(--color-hellblau);
border: 1px solid var(--color-hellblau);
}
}
@media (min-width: 1281px) {
#subpages .the_subpages ul li a {
border: 0.1vw solid var(--color-grau);
padding: 1vw 1.5vw;
border-radius: 1vw;
}
#subpages .the_subpages ul li a:hover {
border: 0.1vw solid var(--color-hellblau);
}
}
#subpages .the_subpages ul li.current a {
font-weight: 600;
padding-right: 40px !important;
border-color: var(--color-blau) !important;
color: var(--color-weiss);
}
@media (min-width: 1281px) {
#subpages .the_subpages ul li.current a {
padding-right: 3vw !important;
}
}
#subpages .the_subpages ul li.current a svg {
right: 10px;
fill: var(--color-weiss);
}
@media (min-width: 1281px) {
#subpages .the_subpages ul li.current a svg {
right: 1vw;
}
}
#subpages .the_subpages ul li.current a:hover {
border-color: var(--color-schwarz) !important;
}
ul.customlist {
display: block;
padding: 0;
margin: 0 !important;
list-style-type: none;
}
@media (min-width: 1281px) {
ul.customlist.twocol {
columns: 2;
column-gap: 2vw;
}
}
ul.customlist li {
display: flex;
align-items: center;
margin: 0;
padding: 10px 0;
}
@media (min-width: 1281px) {
ul.customlist li {
padding: 0.8vw 0;
}
}
ul.customlist li .icon {
padding-right: 10px;
}
@media (min-width: 1281px) {
ul.customlist li .icon {
padding-right: 0.8vw;
}
}
ul.customlist li .icon svg {
width: auto;
height: 16px;
}
@media (min-width: 1281px) {
ul.customlist li .icon svg {
height: 1.25vw;
}
}  ul.acf-gallery {
display: block;
padding: 0;
margin: 0 !important;
list-style-type: none;
}
ul.acf-gallery li {
display: block;
padding-bottom: 10px;
}
ul.acf-gallery li a {
display: block;
border-radius: 10px;
position: relative;
overflow: hidden !important;
}
@media (min-width: 768px) {
ul.acf-gallery li a {
border-radius: 20px;
}
}
@media (min-width: 1281px) {
ul.acf-gallery li a {
display: inline-block;
overflow: hidden !important;
transition: transform 0.3s ease-in-out;
border-radius: 1vw;
}
ul.acf-gallery li a:after {
transition: all 0.5s;
content: "";
display: block;
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
}
}
ul.acf-gallery li a img {
width: 100% !important;
height: auto;
transition: all 0.2s;
float: left;
}
@media (min-width: 1281px) {
ul.acf-gallery li a img {
height: 100%;
width: 100% !important;
object-fit: cover;
object-position: center;
}
}
@media (min-width: 1281px) {
ul.acf-gallery li a:hover img {
transform: scale(1.1);
}
ul.acf-gallery li a:hover:before, ul.acf-gallery li a:hover:after {
opacity: 1;
}
}
@media (min-width: 1281px) {
ul.acf-gallery li {
display: inline-block;
margin: 0 !important;
padding-bottom: 20px;
vertical-align: top;
}
ul.acf-gallery li a {
height: 200px;
max-width: 50%;
overflow: hidden;
}
ul.acf-gallery li a img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
ul.acf-gallery li a:hover img {
height: 120% !important;
width: 120% !important;
}
}
ul.acf-gallery li p {
padding-top: 10px;
padding-bottom: 10px;
}
@media (min-width: 1024px) {
ul.acf-gallery li p {
font-size: 90%;
}
}
@media (min-width: 1281px) {
.has-gallery-wrapper {
max-width: none;
margin-left: 10.435vw;
}
.has-gallery-wrapper .gallery-left {
flex-basis: 10.435vw !important;
}
.has-gallery-wrapper .has-gallery {
width: 70vw !important;
}
.has-gallery-wrapper .has-gallery ul.acf-gallery li {
margin: 0 2vw 0 0 !important;
}
.has-gallery-wrapper .has-gallery ul.acf-gallery li a {
height: 14vw;
}
.has-gallery-wrapper .has-gallery ul.acf-gallery li.landscape a {
width: 20.9888vw !important;
}
.has-gallery-wrapper .has-gallery ul.acf-gallery li.portrait a {
aspect-ratio: 1/1.4 !important;
}
.has-gallery-wrapper .has-gallery ul.acf-gallery li.portrait a img {
aspect-ratio: 1/1.4 !important;
}
.has-gallery-wrapper .has-gallery ul.acf-gallery li.square a {
aspect-ratio: 1/1 !important;
}
.has-gallery-wrapper .has-gallery ul.acf-gallery li.square a img {
aspect-ratio: 1/1 !important;
}
}
.meinungen {
background-color: var(--color-mittelgrau);
border-radius: 10px;
padding: 20px !important;
display: block;
}
@media (min-width: 1024px) {
.meinungen {
padding: 40px !important;
border-radius: 20px;
}
}
@media (min-width: 1281px) {
.meinungen {
padding: 3vw !important;
border-radius: 1vw;
}
}
.meinungen:after {
display: table;
clear: both;
content: "";
}
.meinungen .image {
width: calc(30% - 20px);
float: left;
}
.meinungen .image img {
width: 100%;
height: auto;
aspect-ratio: 1/1;
border-radius: 50%;
}
@media (min-width: 1024px) {
.meinungen .image {
width: 120px;
}
}
@media (min-width: 1281px) {
.meinungen .image {
width: 9vw !important;
}
}
.meinungen .name {
display: block;
float: right;
display: block;
float: right;
width: 70%;
font-weight: semibold;
font-weight: 600;
padding-bottom: 5px;
padding-top: 10px;
}
@media (min-width: 1024px) {
.meinungen .name {
width: calc(100% - 160px);
}
}
@media (min-width: 1281px) {
.meinungen .name {
width: calc(100% - 12vw);
padding-bottom: 0.5vw;
padding-top: 1vw;
}
}
.meinungen .position {
display: block;
float: right;
width: 70%;
font-size: 85%;
}
@media (min-width: 1024px) {
.meinungen .position {
width: calc(100% - 160px);
}
}
@media (min-width: 1281px) {
.meinungen .position {
width: calc(100% - 12vw);
}
}
.meinungen .text {
display: block;
clear: both;
padding-top: 10px;
}
.meinungen .text p:last-child {
padding-bottom: 0;
margin-bottom: 0;
}
@media (min-width: 600px) {
.meinungen .text {
clear: none;
width: 70%;
float: right;
}
}
@media (min-width: 1024px) {
.meinungen .text {
width: calc(100% - 160px);
}
}
@media (min-width: 1281px) {
.meinungen .text {
width: calc(100% - 12vw);
padding-top: 1vw;
}
}
.titleimage {
display: block;
aspect-ratio: 1/1;
}
@media (min-width: 768px) {
.titleimage {
aspect-ratio: 2/1;
}
}
@media (min-width: 1024px) {
.titleimage {
aspect-ratio: 3/1;
}
}
@media (min-width: 1281px) {
.titleimage {
aspect-ratio: 3.5/1;
}
}
.titleimage img {
aspect-ratio: 1/1;
object-fit: cover;
object-position: center center;
max-width: none !important;
width: 100%;
height: 100%;
}
@media (min-width: 1281px) {
.arbeitenauswahl {
max-width: 72.5vw;
margin: 2vw auto 0 auto;
}
}
.arbeitenauswahl ul li {
display: inline-block;
padding: 0;
}
.arbeitenauswahl .currentService {
display: flex;
padding: 20px 20px 0 20px;
}
@media (min-width: 768px) {
.arbeitenauswahl .currentService {
padding: 20px 40px 0 40px;
}
}
@media (min-width: 1024px) {
.arbeitenauswahl .currentService {
display: none !important;
}
}
.arbeitenauswahl .currentService:after {
content: "";
display: table;
clear: both;
}
.arbeitenauswahl .currentService button {
display: block;
float: left;
margin-right: 10px;
cursor: pointer;
}
.arbeitenauswahl .currentService button.currentService {
border: 1px solid var(--color-blau);
font-size: 16px;
background-color: var(--color-blau);
color: var(--color-weiss);
padding: 0 14px;
border-radius: 10px;
height: 42px;
line-height: 42px;
}
@media (min-width: 768px) {
.arbeitenauswahl .currentService button.currentService {
font-size: 21px;
line-height: 21px;
}
}
.arbeitenauswahl .currentService button.currentService:hover {
background-color: var(--color-schwarz);
border-color: var(--color-schwarz);
}
.arbeitenauswahl .currentService button.serviceFilter {
aspect-ratio: 1/1;
border: 1px solid var(--color-blau);
background-color: transparent;
padding: 0;
height: 42px;
width: 42px;
position: relative;
border-radius: 10px;
}
.arbeitenauswahl .currentService button.serviceFilter svg {
width: 16px;
height: 16px;
position: absolute;
top: 50%;
margin-top: -8px;
left: 50%;
margin-left: -8px;
}
@media (min-width: 768px) {
.arbeitenauswahl .currentService button.serviceFilter svg {
width: 21px;
height: 21px;
}
}
.arbeitenauswahl .currentService button.serviceFilter:hover {
background-color: var(--color-schwarz);
border-color: var(--color-schwarz);
}
.arbeitenauswahl .currentService button.serviceFilter:hover svg {
fill: var(--color-weiss);
}
.arbeitenauswahl .headbar {
display: block;
padding-top: 20px;
}
@media (min-width: 1281px) {
.arbeitenauswahl .headbar {
display: flex;
}
}
.arbeitenauswahl .headbar .headline {
display: inline-block;
position: relative;
}
.arbeitenauswahl .headbar .headline:after {
content: "";
position: absolute;
width: 50px;
height: 10px;
bottom: 10px;
right: -20px;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/dotted-arrow.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
transform: rotate(90deg);
opacity: 0.5;
}
@media (min-width: 600px) {
.arbeitenauswahl .headbar .headline:after {
width: 50px;
height: 10px;
bottom: 10px;
right: -60px;
transform: rotate(45deg);
}
}
@media (min-width: 768px) {
.arbeitenauswahl .headbar .headline:after {
width: 80px;
height: 15px;
bottom: 20px;
right: -40px;
transform: rotate(30deg);
}
}
@media (min-width: 1281px) {
.arbeitenauswahl .headbar .headline:after {
width: 7vw;
height: 1.3vw;
bottom: auto;
right: -1.56128vw;
transform: rotate(0deg);
top: 3vw;
}
}
@media (min-width: 1281px) {
.arbeitenauswahl .headbar .headline {
width: 50vw;
}
}
.arbeitenauswahl .headbar .selection {
display: none;
padding: 20px 20px 0 20px;
}
@media (min-width: 768px) {
.arbeitenauswahl .headbar .selection {
padding: 20px 40px 0 40px;
}
}
@media (min-width: 1024px) {
.arbeitenauswahl .headbar .selection {
padding: 20px 40px 0 40px;
width: calc(60vw - 40px);
display: block;
margin-left: 40vw;
margin-top: -100px;
}
}
@media (min-width: 1281px) {
.arbeitenauswahl .headbar .selection {
width: 70vw;
margin: 0;
padding: 0 0 0 3vw;
}
}
.arbeitenauswahl .headbar .selection button {
border: 1px solid var(--color-blau);
background-color: transparent;
padding: 8px 14px;
color: var(--color-blau);
border-radius: 10px;
margin: 0 10px 10px 0;
cursor: pointer;
}
@media (min-width: 1281px) {
.arbeitenauswahl .headbar .selection button {
padding: 0.6vw 1.1vw;
border-radius: 0.8vw;
margin: 0 0.8vw 0.8vw 0;
border: 0.1vw solid var(--color-blau);
}
}
.arbeitenauswahl .headbar .selection button:hover {
border: 1px solid var(--color-blau);
background-color: var(--color-blau);
color: var(--color-weiss);
}
@media (min-width: 1281px) {
.arbeitenauswahl .headbar .selection button:hover {
border: 0.1vw solid var(--color-blau);
}
}
.arbeitenauswahl .headbar .selection button.is-checked {
background-image: url('data:image/svg+xml;utf8,<svg style="fill: var(--color-blau);" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>');
background-size: 16px 16px;
background-position: calc(100% - 16px) center;
background-repeat: no-repeat;
font-weight: 700;
padding: 7px 13px;
padding-right: 40px;
border: 2px solid var(--color-blau);
}
.arbeitenauswahl .headbar .selection button.is-checked:hover {
background-color: transparent;
color: var(--color-blau);
cursor: default;
border: 1px solid var(--color-blau);
padding: 7px 13px;
padding-right: 40px;
border: 2px solid var(--color-blau);
}
@media (min-width: 1024px) {
.arbeitenauswahl .headbar .selection button.is-checked {
background-image: none;
padding: 8px 14px;
border: 1px solid var(--color-blau);
background-color: var(--color-blau);
color: var(--color-weiss);
font-weight: 400;
}
.arbeitenauswahl .headbar .selection button.is-checked:hover {
border: 1px solid var(--color-blau);
background-color: var(--color-blau);
color: var(--color-weiss);
padding: 8px 14px;
}
}
@media (min-width: 1281px) {
.arbeitenauswahl .headbar .selection button.is-checked {
padding: 0.6vw 1.1vw;
border: 0.1vw solid var(--color-blau);
}
.arbeitenauswahl .headbar .selection button.is-checked:hover {
border: 0.1vw solid var(--color-blau);
padding: 0.6vw 1.1vw;
}
}
.arbeitenauswahl .die-arbeiten {
display: block;
padding: 40px 20px 40px 20px; }
@media (min-width: 768px) {
.arbeitenauswahl .die-arbeiten {
padding: 40px 0 40px 0;
}
}
@media (min-width: 1281px) {
.arbeitenauswahl .die-arbeiten {
padding: 3vw 0 3vw 0;
margin-left: -3vw;
margin-right: -3vw;
}
}
.arbeitenauswahl .die-arbeiten .arbeit {
margin-bottom: 40px;
display: block;
margin-right: 20px;
}
@media (min-width: 768px) {
.arbeitenauswahl .die-arbeiten .arbeit {
width: calc(50vw - 80px);
margin-right: 40px;
margin-left: 40px;
}
}
@media (min-width: 1024px) {
.arbeitenauswahl .die-arbeiten .arbeit {
width: calc(33.3333333vw - 80px);
margin-right: 40px;
margin-left: 40px;
}
}
@media (min-width: 1281px) {
.arbeitenauswahl .die-arbeiten .arbeit {
width: calc(33% - 6vw);
margin-right: 3vw;
margin-left: 3vw;
margin-bottom: 4vw;
}
}
.arbeitenauswahl .die-arbeiten .arbeit .image {
overflow: hidden;
}
.arbeitenauswahl .die-arbeiten .arbeit .image a {
display: block;
border-radius: 10px;
overflow: hidden;
position: relative;
}
@media (min-width: 768px) {
.arbeitenauswahl .die-arbeiten .arbeit .image a {
border-radius: 20px;
}
}
@media (min-width: 1281px) {
.arbeitenauswahl .die-arbeiten .arbeit .image a {
border-radius: 1vw;
}
.arbeitenauswahl .die-arbeiten .arbeit .image a:after {
transition: all 0.5s;
content: "";
display: block;
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.8);
opacity: 0;
}
}
.arbeitenauswahl .die-arbeiten .arbeit .image a img {
transition: transform 0.3s ease-in-out;
float: left;
aspect-ratio: 1/1.25;
object-fit: cover;
}
.arbeitenauswahl .die-arbeiten .arbeit .image a:hover img {
transform: scale(1.1);
}
@media (min-width: 1281px) {
.arbeitenauswahl .die-arbeiten .arbeit .image a:hover:before {
opacity: 1;
}
.arbeitenauswahl .die-arbeiten .arbeit .image a:hover:after {
opacity: 1;
}
}
.arbeitenauswahl .die-arbeiten .arbeit .title {
display: block;
padding: 20px 0 10px 0;
}
.arbeitenauswahl .die-arbeiten .arbeit .title a {
display: inline-block;
text-decoration: none;
color: var(--color-schwarz);
position: relative;
font-weight: bold;
font-weight: 700;
font-size: 120%;
margin-bottom: 5px;
}
@media (min-width: 1281px) {
.arbeitenauswahl .die-arbeiten .arbeit .title a {
margin-bottom: 0.7vw;
}
}
.arbeitenauswahl .die-arbeiten .arbeit .title a:after {
content: "";
position: absolute;
width: 0%;
height: 2px;
background-color: var(--color-blau);
left: 0;
transition: width 0.2s;
bottom: -5px;
}
@media (min-width: 1281px) {
.arbeitenauswahl .die-arbeiten .arbeit .title a:after {
bottom: -0.5vw;
}
}
.arbeitenauswahl .die-arbeiten .arbeit .title a:hover {
color: var(--color-blau);
}
.arbeitenauswahl .die-arbeiten .arbeit .title a:hover:after {
width: 100%;
}
.arbeitenauswahl .die-arbeiten .arbeit .excerpt p {
margin: 0 0 10px 0;
font-size: 90%;
}
.arbeitenauswahl .my-masonry-grid-item {
margin: 0 0 2em 0;
}
@media (min-width: 768px) {
.arbeitenauswahl .my-masonry-grid-item {
margin: 0 20px 40px 20px;
}
}
ul.services-list {
display: block;
padding: 10px 0 0 0;
margin: 0 !important;
list-style-type: none;
}
@media (min-width: 1281px) {
ul.services-list {
padding: 1vw 0 0 0;
}
}
ul.services-list li {
display: inline-block;
margin: 0 10px 10px 0 !important;
}
@media (min-width: 1281px) {
ul.services-list li {
margin: 0 1vw 1vw 0 !important;
}
}
ul.services-list li:last-child {
margin: 0 !important;
}
ul.services-list li a {
display: inline-block;
padding: 8px 14px !important;
color: var(--color-schwarz);
text-decoration: none;
border-radius: 10px;
border: 1px solid var(--color-schwarz);
}
@media (min-width: 1281px) {
ul.services-list li a {
border: 0.12vw solid var(--color-schwarz);
padding: 0.625vw 1.1vw !important;
border-radius: 0.8vw;
}
}
ul.services-list li a:hover {
color: var(--color-weiss);
background-color: var(--color-blau);
border: 1px solid var(--color-blau);
}
@media (min-width: 1281px) {
ul.services-list li a:hover {
border: 0.12vw solid var(--color-blau);
}
}
#skillz {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
}
@media (min-width: 768px) {
#skillz {
flex-direction: row;
}
}
#skillz .skillz_item {
position: relative;
padding-bottom: 50px;
}
@media (min-width: 768px) {
#skillz .skillz_item {
width: calc(50% - 50px);
margin-bottom: 10px;
padding: 0;
}
}
@media (min-width: 1281px) {
#skillz .skillz_item {
width: calc(50% - 4vw);
margin-bottom: 1vw;
}
}
@media (min-width: 1281px) {
#skillz .skillz_item {
padding-bottom: 4vw;
}
}
#skillz .skillz_item:after {
content: "";
display: table;
clear: both;
}
#skillz .skillz_item .icon {
float: left;
width: 20%;
}
#skillz .skillz_item .content {
float: right;
width: calc(80% - 20px);
}
@media (min-width: 1281px) {
#skillz .skillz_item .content {
width: calc(80% - 1.5vw);
}
}
#skillz .skillz_item .content .title-h4 {
font-weight: 700;
padding: 0 0 10px 0;
margin: 0;
}
@media (min-width: 1281px) {
#skillz .skillz_item .content .title-h4 {
padding: 0 0 0.5vw 0;
}
}
#skillz .skillz_item .arrows {
clear: both;
position: absolute;
right: 0;
bottom: 10px;
z-index: 0;
transform: rotate(90deg);
}
@media (min-width: 768px) {
#skillz .skillz_item .arrows {
transform: rotate(0deg);
bottom: auto;
top: 10px;
right: -80px;
}
}
@media (min-width: 1281px) {
#skillz .skillz_item .arrows {
top: 1vw;
right: 6vw;
}
}
#skillz .skillz_item .arrows .arrow {
width: auto;
display: none;
height: 50px;
overflow: auto;
position: static;
margin: 0;
}
@media (min-width: 768px) {
#skillz .skillz_item .arrows .arrow {
height: 80px;
}
}
@media (min-width: 1281px) {
#skillz .skillz_item .arrows .arrow {
height: 6vw;
}
}
#skillz .skillz_item .arrows .arrow svg {
width: 50px;
height: auto;
}
@media (min-width: 768px) {
#skillz .skillz_item .arrows .arrow svg {
width: 80px;
}
}
@media (min-width: 1281px) {
#skillz .skillz_item .arrows .arrow svg {
width: 6vw;
}
}
#skillz .skillz_item .arrows .arrow:first-child {
display: block;
}
#skillz .skillz_item .arrows .arrow:after {
display: none;
}
@media (min-width: 768px) {
#skillz .skillz_item:nth-child(even) {
padding-bottom: 40px;
}
}
@media (min-width: 1281px) {
#skillz .skillz_item:nth-child(even) {
padding-bottom: 3vw;
}
}
#skillz .skillz_item:nth-child(even) .arrows {
right: auto;
left: 0;
transform: scaleY(-1) rotate(-90deg);
}
@media (min-width: 768px) {
#skillz .skillz_item:nth-child(even) .arrows {
transform: scaleY(1) rotate(90deg);
left: auto;
right: -20px;
top: auto;
bottom: 0;
}
}
@media (min-width: 1281px) {
#skillz .skillz_item:nth-child(even) .arrows {
right: -1.5vw;
}
}
@media (min-width: 768px) {
#skillz .skillz_item:nth-child(odd) .arrows {
transform: scaleY(-1) rotate(0deg);
left: auto;
right: -85px;
top: 0;
bottom: auto;
}
}
@media (min-width: 1281px) {
#skillz .skillz_item:nth-child(odd) .arrows {
right: -6.75vw;
}
}
@media (min-width: 768px) {
#skillz .skillz_item:nth-child(4n+1) .arrows {
transform: scaleY(1) rotate(0deg);
left: auto;
right: -85px;
top: 10px;
bottom: auto;
}
}
@media (min-width: 1281px) {
#skillz .skillz_item:nth-child(4n+1) .arrows {
right: -6.75vw;
top: 1vw;
}
}
#skillz .skillz_item:last-child {
padding-bottom: 0;
}
#skillz .skillz_item:last-child .arrows {
display: none;
}
#anfragebutton {
display: flex;
align-items: center;
}
#anfragebutton button {
border-radius: 0;
box-shadow: none;
text-decoration: none;
padding: 8px 14px !important;
border-radius: 10px;
transition: all 0.2s;
background-color: var(--color-blau);
color: var(--color-weiss);
border: none;
cursor: pointer;
font-weight: 600;
}
#anfragebutton button strong {
padding: 0;
margin: 0;
}
@media (min-width: 1281px) {
#anfragebutton button {
padding: 0.7vw 1vw !important;
border-radius: 0.8vw;
}
}
#anfragebutton button:hover {
background-color: var(--color-schwarz) !important;
color: var(--color-weiss);
}
#anfragebutton .subtext {
padding-left: 20px;
}
@media (min-width: 1281px) {
#anfragebutton .subtext {
padding-left: 1.5vw;
font-size: 1.2vw;
}
}
@media (min-width: 1600px) {
#anfragebutton .subtext {
font-size: 1vw;
}
} html.swipebox-html.swipebox-touch {
overflow: hidden !important;
}
#swipebox-overlay img {
border: none !important;
}
#swipebox-overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999 !important;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#swipebox-container {
position: relative;
width: 100%;
height: 100%;
}
#swipebox-slider {
-webkit-transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease;
height: 100%;
left: 0;
top: 0;
width: 100%;
white-space: nowrap;
position: absolute;
display: none;
cursor: pointer;
}
#swipebox-slider .slide {
height: 100%;
width: 100%;
line-height: 1px;
text-align: center;
display: inline-block;
}
#swipebox-slider .slide:before {
content: "";
display: inline-block;
height: 50%;
width: 1px;
margin-right: -1px;
}
#swipebox-slider .slide img,
#swipebox-slider .slide .swipebox-video-container,
#swipebox-slider .slide .swipebox-inline-container {
display: inline-block;
max-height: 100%;
max-width: 100%;
margin: 0;
padding: 0;
width: auto;
height: auto;
vertical-align: middle;
}
#swipebox-slider .slide .swipebox-video-container {
background: none;
max-width: 1140px;
max-height: 100%;
width: 100%;
padding: 5%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#swipebox-slider .slide .swipebox-video-container .swipebox-video {
width: 100%;
height: 0;
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
}
#swipebox-slider .slide .swipebox-video-container .swipebox-video iframe {
width: 100% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0;
}
#swipebox-slider .slide-loading {
background: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/images/loader.gif) no-repeat center center;
background-size: 60px 60px;
}
@media (min-width: 768px) {
#swipebox-slider .slide-loading {
background-size: 100px 100px;
}
}
@media (min-width: 1281px) {
#swipebox-slider .slide-loading {
background-size: 200px 200px;
}
}
#swipebox-title {
display: none;
}
#swipebox-close {
border: none !important;
text-decoration: none !important;
cursor: pointer;
width: 50px;
height: 50px;
top: 0;
}
#swipebox-prev {
position: absolute;
left: 20px;
bottom: 20px;
width: 48px;
height: 48px;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M59.6,11.7c-0.8,0.8-0.8,2.1,0,2.9l33.3,33.3H2.1C0.9,47.9,0,48.9,0,50s0.9,2.1,2.1,2.1h90.9L59.6,85.4c-0.8,0.8-0.8,2.1,0,2.9c0.8,0.8,2.1,0.8,2.9,0l36.9-36.9c0.4-0.4,0.6-0.9,0.6-1.5c0-0.5-0.2-1.1-0.6-1.5L62.5,11.7C61.7,10.9,60.4,10.9,59.6,11.7z"></path></svg>') !important;
background-repeat: no-repeat;
background-size: 18px 18px;
background-position: center center;
background-color: var(--color-weiss);
border: 1px solid var(--color-schwarz);
border-radius: 50%;
cursor: pointer;
transition: all 0.2s;
transform: rotate(180deg);
}
#swipebox-prev:hover {
background-position: center center;
background-size: 24px 24px;
border: 2px solid var(--color-schwarz);
}
#swipebox-prev.disabled {
border: 1px solid var(--color-schwarz);
background-color: var(--color-weiss);
}
#swipebox-prev.disabled:hover {
cursor: default;
background-size: 18px 18px;
background-position: center center;
border: 1px solid var(--color-schwarz);
background-color: var(--color-weiss);
}
@media (min-width: 1281px) {
#swipebox-prev {
left: 3.5vw;
bottom: 3.5vw;
width: 5vw;
height: 5vw;
background-size: 2vw 2vw;
}
#swipebox-prev:hover {
background-position: center center;
background-size: 2.5vw 2.5vw;
}
#swipebox-prev.disabled:hover {
background-size: 2vw 2vw;
}
}
#swipebox-next {
position: absolute;
right: 20px;
bottom: 20px;
width: 48px;
height: 48px;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M59.6,11.7c-0.8,0.8-0.8,2.1,0,2.9l33.3,33.3H2.1C0.9,47.9,0,48.9,0,50s0.9,2.1,2.1,2.1h90.9L59.6,85.4c-0.8,0.8-0.8,2.1,0,2.9c0.8,0.8,2.1,0.8,2.9,0l36.9-36.9c0.4-0.4,0.6-0.9,0.6-1.5c0-0.5-0.2-1.1-0.6-1.5L62.5,11.7C61.7,10.9,60.4,10.9,59.6,11.7z"/></svg>') !important;
background-repeat: no-repeat;
background-size: 18px 18px;
background-position: center center;
background-color: var(--color-weiss);
border: 1px solid var(--color-schwarz);
border-radius: 50%;
transition: all 0.2s;
cursor: pointer !important;
}
#swipebox-next:hover {
background-position: center center;
background-size: 24px 24px;
border: 2px solid var(--color-schwarz);
}
#swipebox-next.disabled {
background-color: var(--color-weiss);
border: 1px solid var(--color-schwarz);
}
#swipebox-next.disabled:hover {
cursor: default;
background-size: 18px 18px;
background-position: center center;
background-color: var(--color-weiss);
border: 1px solid var(--color-schwarz);
}
@media (min-width: 1281px) {
#swipebox-next {
right: 3.5vw;
bottom: 3.5vw;
width: 5vw;
height: 5vw;
background-size: 2vw 2vw;
}
#swipebox-next:hover {
background-position: center center;
background-size: 2.5vw 2.5vw;
}
#swipebox-next.disabled:hover {
background-size: 2vw 2vw;
}
}
#swipebox-close {
position: absolute;
right: 20px;
top: 20px;
width: 48px;
height: 48px;
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path d="M53,50l36.8-36.8c0.8-0.8,0.8-2.2,0-3c-0.8-0.8-2.1-0.8-3,0L50,47L13.2,10.2c-0.8-0.8-2.2-0.8-3,0c-0.8,0.8-0.8,2.1,0,3L47,50L10.2,86.8c-0.8,0.8-0.8,2.2,0,3c0.8,0.8,2.1,0.8,3,0L50,53l36.8,36.8c0.8,0.8,2.2,0.8,3,0c0.8-0.8,0.8-2.1,0-3L53,50z"/></svg>');
background-repeat: no-repeat;
background-size: 18px 18px;
background-position: center center;
background-color: var(--color-weiss);
border: 1px solid var(--color-schwarz) !important;
border-radius: 50%;
transform: rotate(0deg);
transition: all 0.2s;
cursor: pointer !important;
}
#swipebox-close:hover {
background-size: 24px 24px;
transform: rotate(180deg);
border: 2px solid var(--color-schwarz) !important;
}
@media (min-width: 1281px) {
#swipebox-close {
right: 3.5vw;
top: 3.5vw;
width: 5vw;
height: 5vw;
background-size: 2vw 2vw;
}
#swipebox-close:hover {
background-size: 2.5vw 2.5vw;
}
}
.swipebox-no-close-button #swipebox-close {
display: none;
}
#swipebox-prev.disabled,
#swipebox-next.disabled {
opacity: 0.3;
}
.swipebox-no-touch #swipebox-overlay.rightSpring #swipebox-slider {
-webkit-animation: rightSpring 0.3s;
animation: rightSpring 0.3s;
}
.swipebox-no-touch #swipebox-overlay.leftSpring #swipebox-slider {
-webkit-animation: leftSpring 0.3s;
animation: leftSpring 0.3s;
}
.swipebox-touch #swipebox-container:before, .swipebox-touch #swipebox-container:after {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
content: " ";
position: absolute;
z-index: 999;
top: 0;
height: 100%;
width: 20px;
opacity: 0;
}
.swipebox-touch #swipebox-container:before {
left: 0;
-webkit-box-shadow: inset 10px 0px 10px -8px #656565;
box-shadow: inset 10px 0px 10px -8px #656565;
}
.swipebox-touch #swipebox-container:after {
right: 0;
-webkit-box-shadow: inset -10px 0px 10px -8px #656565;
box-shadow: inset -10px 0px 10px -8px #656565;
}
.swipebox-touch #swipebox-overlay.leftSpringTouch #swipebox-container:before {
opacity: 1;
}
.swipebox-touch #swipebox-overlay.rightSpringTouch #swipebox-container:after {
opacity: 1;
}
@-webkit-keyframes rightSpring {
0% {
left: 0;
}
50% {
left: -30px;
}
100% {
left: 0;
}
}
@keyframes rightSpring {
0% {
left: 0;
}
50% {
left: -30px;
}
100% {
left: 0;
}
}
@-webkit-keyframes leftSpring {
0% {
left: 0;
}
50% {
left: 30px;
}
100% {
left: 0;
}
}
@keyframes leftSpring {
0% {
left: 0;
}
50% {
left: 30px;
}
100% {
left: 0;
}
} #swipebox-overlay {
background: #fff;
}
#swipebox-top-bar {
text-shadow: 1px 1px 1px black;
background: #000;
opacity: 0.95;
}
#swipebox-top-bar {
color: white !important;
font-size: 15px;
line-height: 43px;
font-family: Helvetica, Arial, sans-serif;
}  .single_post .infos .date {
display: inline-block;
position: relative;
padding: 0 0 0 24px;
font-weight: bold;
}
.single_post .infos .date:before {
content: "";
position: absolute;
left: 0;
bottom: 3px;
width: 16px;
height: 16px;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-calendar.svg);
background-repeat: no-repeat;
background-size: auto 16px;
opacity: 0.4;
}
.single_post .infos ul.post-categories {
display: inline-block;
padding: 0 0 0 24px;
margin: 0 0 0 30px;
list-style-type: none;
position: relative;
}
.single_post .infos ul.post-categories:before {
content: "";
position: absolute;
left: 0;
bottom: 3px;
width: 16px;
height: 16px;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-category.svg);
background-repeat: no-repeat;
background-size: auto 16px;
opacity: 0.4;
}
.single_post .infos ul.post-categories li {
display: inline-block;
margin-right: 10px;
}
.single_post .infos ul.post-categories li:last-child {
margin-right: 0;
}
.single_post .infos ul.post-categories li a {
font-weight: bold;
}
.single-hero {
margin-left: -20px;
margin-right: -20px;
margin-top: -20px;
margin-bottom: 40px;
overflow: hidden;
}
@media (min-width: 768px) {
.single-hero {
margin-top: -40px;
margin-left: -40px;
margin-right: -40px;
}
}
.single-hero img {
width: 100vw;
height: 100vw;
display: block;
overflow: hidden;
aspect-ratio: 1/1;
object-fit: cover;
}
@media (min-width: 768px) {
.single-hero img {
aspect-ratio: 16/9;
height: auto;
}
}
@media (min-width: 1024px) {
.single-hero img {
aspect-ratio: 16/8;
}
}
@media (min-width: 1281px) {
.single-hero img {
aspect-ratio: 16/5;
}
}
.news-archive {
margin: 2em 0 0 0;
}
@media (min-width: 768px) {
.news-archive {
display: flex;
flex-wrap: wrap;
margin: 2em -20px 0 -20px;
}
}
.news-archive .news-item {
margin-bottom: 50px;
}
@media (min-width: 768px) {
.news-archive .news-item {
flex: 0 0 50%;
}
}
.news-archive .news-item:after {
content: "";
clear: both;
display: table;
}
@media (min-width: 768px) {
.news-archive .news-item .item-wrapper {
padding: 0 20px;
}
.news-archive .news-item .item-wrapper:after {
content: "";
clear: both;
display: table;
}
}
.news-archive .news-item .item-wrapper .thumbnail {
display: block;
width: 80px;
height: 80px;
float: left;
position: relative;
}
.news-archive .news-item .item-wrapper .thumbnail a {
display: block;
width: 80px;
height: 80px;
overflow: hidden;
border-radius: 10px;
}
.news-archive .news-item .item-wrapper .thumbnail a img {
transition: all 0.2s;
width: 80px;
height: 80px;
aspect-ratio: 1/1;
object-fit: cover;
object-position: center;
overflow: hidden;
}
.news-archive .news-item .item-wrapper .thumbnail a .no-thumb {
transition: all 0.2s;
display: block;
width: 80px;
height: 80px;
background-color: #ccc;
text-indent: -9999px;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-link.svg);
background-size: 32px 32px;
background-position: center center;
background-repeat: no-repeat;
}
.news-archive .news-item .item-wrapper .thumbnail a:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.news-archive .news-item .item-wrapper .thumbnail a:hover img {
width: 90px;
height: 90px;
margin-top: -5px;
margin-left: -5px;
}
.news-archive .news-item .item-wrapper .thumbnail a:hover .no-thumb {
background-color: white;
background-size: 38px 83px;
}
.news-archive .news-item .item-wrapper .content {
display: block;
width: calc(100% - 100px);
float: right;
}
.news-archive .news-item .item-wrapper .content .title {
display: block;
}
.news-archive .news-item .item-wrapper .content .title a {
font-weight: bold;
font-size: 130%;
}
.news-archive .news-item .item-wrapper .content .date {
display: inline-block;
font-weight: bold;
padding: 5px 0 5px 25px;
opacity: 0.7;
position: relative;
}
.news-archive .news-item .item-wrapper .content .date:before {
content: "";
position: absolute;
left: 0;
bottom: 9px;
width: 16px;
height: 16px;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-calendar.svg);
background-repeat: no-repeat;
background-size: auto 16px;
opacity: 0.4;
}
.news-archive .news-item .item-wrapper .content .excerpt {
display: block;
}
.single-job .single-job-info .infos .terms {
padding: 0;
margin: 0;
list-style: none;
}
.single-job .single-job-info .infos .terms li {
display: inline-block;
}
.twocol:after {
display: table;
content: "";
clear: both;
}
.twocol section.wp_left_content {
margin-bottom: 40px;
}
@media (min-width: 1024px) {
.twocol section.wp_left_content {
width: calc(70% - 80px);
float: left;
}
}
.twocol aside.wp_sidebar {
padding: 1em;
margin-bottom: 40px;
}
@media (min-width: 1024px) {
.twocol aside.wp_sidebar {
width: 30%;
float: right;
}
}
.twocol aside.wp_sidebar ul.sidebar_linklist {
display: block;
padding: 0;
margin: 0 -1em;
list-style-type: none;
}
.twocol aside.wp_sidebar ul.sidebar_linklist li {
display: block;
}
.twocol aside.wp_sidebar ul.sidebar_linklist li a {
border-top: 1px solid #ccc;
display: block;
padding: 12px 1em;
}
.twocol aside.wp_sidebar ul.sidebar_linklist li:last-child a {
border-bottom: 1px solid #ccc;
}
.twocol aside.wp_sidebar ul.sidebar_linklist.news_linklist {
padding-bottom: 2em;
}
.twocol aside.wp_sidebar ul.sidebar_linklist.news_linklist li a {
text-decoration: none;
}
.twocol aside.wp_sidebar ul.sidebar_linklist.news_linklist li a:after {
content: "";
display: table;
clear: both;
}
.twocol aside.wp_sidebar ul.sidebar_linklist.news_linklist li a span.date {
color: black;
width: 110px;
float: left;
}
.twocol aside.wp_sidebar ul.sidebar_linklist.news_linklist li a span.title {
float: right;
width: calc(100% - 110px);
text-decoration: underline;
font-weight: bold;
}
.twocol aside.wp_sidebar ul.sidebar_linklist.news_linklist li a span.title:hover {
text-decoration: none;
}
.twocol aside.wp_sidebar .wp_sidebar_text + .wp_sidebar_more_news {
padding-top: 1em;
}
.search ul {
display: block;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
.search ul li {
display: block;
margin-bottom: 20px;
}
.search ul li .label {
display: inline-block;
font-size: 80%;
padding: 2px 5px;
background-color: #ccc;
position: relative;
bottom: 2px;
}
.search .no-results {
display: block;
text-align: center;
}
.search .no-results p {
padding-bottom: 30px;
font-weight: bold;
}
.searchform {
display: none;
}
@media (min-width: 1366px) {
.searchform {
display: inline-block;
margin: -20px 20px 0 0;
height: 42px;
position: relative;
top: -7px;
}
.searchform .search-form {
position: relative;
}
.searchform .search-form label input.search-field {
height: 45px;
border-style: solid;
border-width: 1.5px;
padding-left: 20px;
padding-right: 48px;
}
.searchform .search-form .submit-container {
width: 42px;
height: 42px;
position: absolute;
top: 1px;
right: 1px;
}
.searchform .search-form .submit-container input.search-submit {
width: 45px;
height: 45px;
position: relative;
z-index: 1;
padding: 0;
margin: 0;
text-indent: -9999px;
background-color: transparent;
border: none;
cursor: pointer;
}
.searchform .search-form .submit-container span.icon {
display: block;
position: absolute;
z-index: 0;
left: 0;
top: 0;
width: 43px;
height: 43px;
line-height: 43px;
text-align: center;
border-style: none;
}
.searchform .search-form .submit-container span.icon img,
.searchform .search-form .submit-container span.icon svg {
width: 24px;
height: 24px;
margin-top: 9px;
}
}
@media (max-width: 781px) {
#single-arbeiten .wp-block-columns {
gap: 0.5em;
}
#single-arbeiten .wp-block-columns h5 {
font-size: 16px;
}
}
@media (min-width: 782px) {
#single-arbeiten .wp-block-columns h5 {
margin-top: 10px;
}
}
#single-arbeiten .next-project {
display: block;
margin: 0;
text-align: left;
background-color: var(--color-blau);
padding: 40px 20px;
}
@media (min-width: 768px) {
#single-arbeiten .next-project {
padding: 40px;
}
}
@media (min-width: 1281px) {
#single-arbeiten .next-project {
padding: 3vw 0;
margin-left: -3.5vw;
margin-right: -3.5vw;
padding-left: 13.75vw;
}
}
#single-arbeiten .next-project a {
margin: 0;
text-align: left;
color: var(--color-weiss);
display: inline-block;
cursor: default;
}
#single-arbeiten .next-project a .inner {
text-align: left;
display: inline-block;
position: relative;
padding-right: 70px;
min-height: 42px;
}
@media (min-width: 1281px) {
#single-arbeiten .next-project a .inner {
padding-right: 6vw;
min-height: 4vw;
max-width: 72.5vw;
}
}
#single-arbeiten .next-project a .inner .info {
display: inline-block;
position: relative;
padding-bottom: 5px;
opacity: 0.6;
}
@media (min-width: 768px) {
#single-arbeiten .next-project a .inner .info {
font-size: 24px;
padding-bottom: 10px;
}
}
@media (min-width: 1281px) {
#single-arbeiten .next-project a .inner .info {
font-size: 1.8vw;
padding-bottom: 0.8vw;
}
}
#single-arbeiten .next-project a .inner .info svg {
position: absolute;
right: -20px;
top: 5px;
width: auto;
height: 20px;
fill: var(--color-weiss);
transform: rotate(-20deg);
opacity: 0.6;
}
@media (min-width: 768px) {
#single-arbeiten .next-project a .inner .info svg {
right: -30px;
top: 10px;
height: 30px;
}
}
@media (min-width: 1281px) {
#single-arbeiten .next-project a .inner .info svg {
right: -2.3vw;
top: 0.8vw;
height: 2.3vw;
}
}
#single-arbeiten .next-project a .inner .break {
display: block;
width: 100%;
}
#single-arbeiten .next-project a .inner .title {
display: inline-block;
font-weight: bold;
font-size: 130%;
position: relative;
}
#single-arbeiten .next-project a .inner .title:after {
content: "";
position: absolute;
width: 0%;
height: 2px;
left: 0;
bottom: -5px;
background-color: var(--color-weiss);
transition: all 0.2s;
}
@media (min-width: 1281px) {
#single-arbeiten .next-project a .inner .title:after {
height: 0.2vw;
bottom: -0.5vw;
}
}
@media (min-width: 768px) {
#single-arbeiten .next-project a .inner .title {
font-size: 32px;
}
}
@media (min-width: 1281px) {
#single-arbeiten .next-project a .inner .title {
font-size: 2.5vw;
}
}
#single-arbeiten .next-project a .inner .title:hover {
cursor: pointer;
}
#single-arbeiten .next-project a .inner .title:hover:after {
content: "";
width: 100%;
}
#single-arbeiten .next-project a .inner .excerpt {
display: block;
padding-top: 5px;
opacity: 0.6;
}
@media (min-width: 768px) {
#single-arbeiten .next-project a .inner .excerpt {
padding-top: 10px;
font-size: 18px;
}
}
@media (min-width: 1281px) {
#single-arbeiten .next-project a .inner .excerpt {
padding-top: 0.8vw;
font-size: 1.2vw;
}
}
#single-arbeiten .next-project a .inner .icon {
display: block;
position: absolute;
top: 50%;
right: 0;
margin-top: -25px;
border-radius: 50%;
width: 50px;
height: 50px;
border: 1px solid var(--color-weiss);
}
@media (min-width: 1281px) {
#single-arbeiten .next-project a .inner .icon {
margin-top: -2vw;
width: 4vw;
height: 4vw;
border: 0.1vw solid var(--color-weiss);
}
}
#single-arbeiten .next-project a .inner .icon svg {
width: 25px;
height: 25px;
position: absolute;
top: 50%;
margin-top: -12.5px;
left: 50%;
margin-left: -12.5px;
fill: var(--color-weiss);
transition: all 0.2s;
}
@media (min-width: 1281px) {
#single-arbeiten .next-project a .inner .icon svg {
width: 1.5vw;
height: 1.5vw;
margin-top: -0.75vw;
margin-left: -0.75vw;
}
}
#single-arbeiten .next-project a .inner .icon:hover {
border: 3px solid var(--color-weiss);
cursor: pointer;
}
@media (min-width: 1281px) {
#single-arbeiten .next-project a .inner .icon:hover {
border: 0.2vw solid var(--color-weiss);
}
}
#single-arbeiten .next-project a .inner .icon:hover svg {
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
}
@media (min-width: 1281px) {
#single-arbeiten .next-project a .inner .icon:hover svg {
width: 2vw;
height: 2vw;
margin-top: -1vw;
margin-left: -1vw;
}
}
#single-arbeiten .next-project a:focus-visible {
outline: 2px solid var(--color-weiss);
outline-offset: 10px;
border-radius: 7px;
}
@media (min-width: 1281px) {
#single-arbeiten .next-project a:focus-visible {
outline: 0.2vw solid var(--color-weiss);
outline-offset: 0.5vw;
border-radius: 0.1vw;
}
}
#projektanfrage, #kontaktanfrage {
display: none;
position: fixed;
width: 100vw;
height: 100vh;
background-color: var(--color-hellblau);
z-index: 999;
top: 0;
left: 0;
overflow-y: auto;
}
#projektanfrage h2, #projektanfrage .like_h2, #kontaktanfrage h2, #kontaktanfrage .like_h2 {
hyphens: auto;
padding: 0;
max-width: none;
margin: 20px 20px 20px 20px;
color: var(--color-weiss);
font-weight: 700;
font-size: 28px;
text-align: center;
}
@media (min-width: 768px) {
#projektanfrage h2, #projektanfrage .like_h2, #kontaktanfrage h2, #kontaktanfrage .like_h2 {
margin: 40px;
font-size: 40px;
}
}
@media (min-width: 1281px) {
#projektanfrage h2, #projektanfrage .like_h2, #kontaktanfrage h2, #kontaktanfrage .like_h2 {
font-size: 2.604vw;
max-width: 72.5vw;
margin: 4vw auto;
padding-bottom: 1vw;
hyphens: none;
}
}
#projektanfrage .btn_close, #kontaktanfrage .btn_close {
display: block;
width: 100%;
text-align: center;
}
@media (min-width: 1281px) {
#projektanfrage .btn_close, #kontaktanfrage .btn_close {
margin-top: 2vw;
}
}
#projektanfrage .btn_close button, #kontaktanfrage .btn_close button {
background-color: transparent;
border: none;
padding: 20px 0 10px 0;
margin: 0;
position: relative;
display: inline-block;
color: var(--color-weiss);
cursor: pointer;
font-size: 16px;
}
@media (min-width: 1281px) {
#projektanfrage .btn_close button, #kontaktanfrage .btn_close button {
padding: 1vw 0;
font-size: 1.5vw;
}
}
#projektanfrage .btn_close button:focus-visible, #kontaktanfrage .btn_close button:focus-visible {
outline: 2px solid var(--color-weiss);
outline-offset: 10px;
border-radius: 7px;
}
@media (min-width: 1281px) {
#projektanfrage .btn_close button:focus-visible, #kontaktanfrage .btn_close button:focus-visible {
outline: 0.2vw solid var(--color-weiss);
outline-offset: 0.5vw;
border-radius: 0.1vw;
}
}
#projektanfrage .btn_close button .close, #kontaktanfrage .btn_close button .close {
opacity: 0.5;
transition: all 0.2s;
}
#projektanfrage .btn_close button .close .times, #kontaktanfrage .btn_close button .close .times {
font-style: normal;
font-size: 50px;
font-weight: 400;
width: 50px;
height: 50px;
line-height: 50px;
border: 1px solid var(--color-weiss);
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
transition: all 0.2s;
}
@media (min-width: 1281px) {
#projektanfrage .btn_close button .close .times, #kontaktanfrage .btn_close button .close .times {
width: 3vw;
height: 3vw;
font-size: 3vw;
line-height: 2.7vw;
border: 0.1vw solid var(--color-weiss);
top: 0.5vw;
}
}
#projektanfrage .btn_close button .close .schliessen, #kontaktanfrage .btn_close button .close .schliessen {
font-style: normal;
font-weight: 600;
padding-left: 62px;
position: relative;
top: -5px;
}
@media (min-width: 1281px) {
#projektanfrage .btn_close button .close .schliessen, #kontaktanfrage .btn_close button .close .schliessen {
padding-left: 4vw;
top: 0;
}
}
#projektanfrage .btn_close button:hover .close, #kontaktanfrage .btn_close button:hover .close {
opacity: 1;
}
#projektanfrage .btn_close button:hover .close .times, #kontaktanfrage .btn_close button:hover .close .times {
transform: rotate(360deg);
}
#projektanfrage .wrapper, #kontaktanfrage .wrapper {
display: block;
padding: 20px 20px 40px 20px;
}
@media (min-width: 768px) {
#projektanfrage .wrapper, #kontaktanfrage .wrapper {
padding: 40px 40px 40px 40px;
}
}
@media (min-width: 1281px) {
#projektanfrage .wrapper, #kontaktanfrage .wrapper {
padding: 2vw 0 3vw 0;
margin: 0 auto;
max-width: 50vw;
}
}
#projektanfrage .wrapper .anrede, #kontaktanfrage .wrapper .anrede {
display: block;
padding: 0 0 20px 0;
text-align: center;
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .anrede, #kontaktanfrage .wrapper .anrede {
padding: 0 0 1.5vw 0;
}
}
#projektanfrage .wrapper .anrede p, #kontaktanfrage .wrapper .anrede p {
color: var(--color-weiss);
font-size: 16px;
}
@media (min-width: 768px) {
#projektanfrage .wrapper .anrede p, #kontaktanfrage .wrapper .anrede p {
font-size: 18px;
}
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .anrede p, #kontaktanfrage .wrapper .anrede p {
font-size: 1.2vw;
}
}
#projektanfrage .wrapper .anrede form, #kontaktanfrage .wrapper .anrede form {
padding: 0;
margin: 0;  }
#projektanfrage .wrapper .anrede form label.radio-button, #kontaktanfrage .wrapper .anrede form label.radio-button {
display: inline-block;
padding: 10px 20px;
background-color: rgba(255, 255, 255, 0.2);
color: var(--color-weiss);
cursor: pointer;
border-radius: 5px;
margin: 5px;
text-align: center;
margin: 0 5px 0;
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .anrede form label.radio-button, #kontaktanfrage .wrapper .anrede form label.radio-button {
padding: 1vw 1.5vw;
border-radius: 0.8vw;
margin: 0 0.5vw;
}
}
#projektanfrage .wrapper .anrede form label.radio-button:hover, #kontaktanfrage .wrapper .anrede form label.radio-button:hover {
border: 2px solid var(--color-weiss);
padding: 8px 18px;
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .anrede form label.radio-button:hover, #kontaktanfrage .wrapper .anrede form label.radio-button:hover {
border: 0.2vw solid var(--color-weiss);
padding: 0.8vw 1.3vw;
}
}
#projektanfrage .wrapper .anrede form input[type=radio]:checked + label.radio-button, #kontaktanfrage .wrapper .anrede form input[type=radio]:checked + label.radio-button {
background-color: var(--color-weiss);
color: var(--color-hellbau);
}
#projektanfrage .wrapper .wpcf7-list-item, #kontaktanfrage .wrapper .wpcf7-list-item {
margin: 0 0 0 0;
}
#projektanfrage .wrapper h2, #kontaktanfrage .wrapper h2 {
color: var(--color-weiss);
text-align: center;
}
#projektanfrage .wrapper .name, #projektanfrage .wrapper .company, #projektanfrage .wrapper .email, #projektanfrage .wrapper .phonenumber, #projektanfrage .wrapper .message, #kontaktanfrage .wrapper .name, #kontaktanfrage .wrapper .company, #kontaktanfrage .wrapper .email, #kontaktanfrage .wrapper .phonenumber, #kontaktanfrage .wrapper .message {
display: block;
padding-bottom: 20px;
position: relative;
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .name, #projektanfrage .wrapper .company, #projektanfrage .wrapper .email, #projektanfrage .wrapper .phonenumber, #projektanfrage .wrapper .message, #kontaktanfrage .wrapper .name, #kontaktanfrage .wrapper .company, #kontaktanfrage .wrapper .email, #kontaktanfrage .wrapper .phonenumber, #kontaktanfrage .wrapper .message {
padding-bottom: 2vw;
}
}
#projektanfrage .wrapper .name p, #projektanfrage .wrapper .company p, #projektanfrage .wrapper .email p, #projektanfrage .wrapper .phonenumber p, #projektanfrage .wrapper .message p, #kontaktanfrage .wrapper .name p, #kontaktanfrage .wrapper .company p, #kontaktanfrage .wrapper .email p, #kontaktanfrage .wrapper .phonenumber p, #kontaktanfrage .wrapper .message p {
padding: 0;
margin: 0;
}
#projektanfrage .wrapper .name label, #projektanfrage .wrapper .company label, #projektanfrage .wrapper .email label, #projektanfrage .wrapper .phonenumber label, #projektanfrage .wrapper .message label, #kontaktanfrage .wrapper .name label, #kontaktanfrage .wrapper .company label, #kontaktanfrage .wrapper .email label, #kontaktanfrage .wrapper .phonenumber label, #kontaktanfrage .wrapper .message label {
display: block;
font-weight: 400;
padding-bottom: 10px;
color: var(--color-weiss);
position: absolute;
top: 10px;
left: 10px;
right: 10px;
transition: all 0.2s;
}
@media (min-width: 768px) {
#projektanfrage .wrapper .name label, #projektanfrage .wrapper .company label, #projektanfrage .wrapper .email label, #projektanfrage .wrapper .phonenumber label, #projektanfrage .wrapper .message label, #kontaktanfrage .wrapper .name label, #kontaktanfrage .wrapper .company label, #kontaktanfrage .wrapper .email label, #kontaktanfrage .wrapper .phonenumber label, #kontaktanfrage .wrapper .message label {
font-size: 18px;
top: 20px;
left: 20px;
right: 20px;
}
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .name label, #projektanfrage .wrapper .company label, #projektanfrage .wrapper .email label, #projektanfrage .wrapper .phonenumber label, #projektanfrage .wrapper .message label, #kontaktanfrage .wrapper .name label, #kontaktanfrage .wrapper .company label, #kontaktanfrage .wrapper .email label, #kontaktanfrage .wrapper .phonenumber label, #kontaktanfrage .wrapper .message label {
font-size: 1.2vw;
top: 2.2vw;
left: 2vw;
right: 1.5vw;
}
}
#projektanfrage .wrapper .name label.focus-label, #projektanfrage .wrapper .company label.focus-label, #projektanfrage .wrapper .email label.focus-label, #projektanfrage .wrapper .phonenumber label.focus-label, #projektanfrage .wrapper .message label.focus-label, #kontaktanfrage .wrapper .name label.focus-label, #kontaktanfrage .wrapper .company label.focus-label, #kontaktanfrage .wrapper .email label.focus-label, #kontaktanfrage .wrapper .phonenumber label.focus-label, #kontaktanfrage .wrapper .message label.focus-label {
font-size: 70%;
opacity: 0.6;
}
@media (min-width: 768px) {
#projektanfrage .wrapper .name label.focus-label, #projektanfrage .wrapper .company label.focus-label, #projektanfrage .wrapper .email label.focus-label, #projektanfrage .wrapper .phonenumber label.focus-label, #projektanfrage .wrapper .message label.focus-label, #kontaktanfrage .wrapper .name label.focus-label, #kontaktanfrage .wrapper .company label.focus-label, #kontaktanfrage .wrapper .email label.focus-label, #kontaktanfrage .wrapper .phonenumber label.focus-label, #kontaktanfrage .wrapper .message label.focus-label {
top: 10px;
}
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .name label.focus-label, #projektanfrage .wrapper .company label.focus-label, #projektanfrage .wrapper .email label.focus-label, #projektanfrage .wrapper .phonenumber label.focus-label, #projektanfrage .wrapper .message label.focus-label, #kontaktanfrage .wrapper .name label.focus-label, #kontaktanfrage .wrapper .company label.focus-label, #kontaktanfrage .wrapper .email label.focus-label, #kontaktanfrage .wrapper .phonenumber label.focus-label, #kontaktanfrage .wrapper .message label.focus-label {
top: 1vw;
}
}
#projektanfrage .wrapper .name input, #projektanfrage .wrapper .name textarea, #projektanfrage .wrapper .company input, #projektanfrage .wrapper .company textarea, #projektanfrage .wrapper .email input, #projektanfrage .wrapper .email textarea, #projektanfrage .wrapper .phonenumber input, #projektanfrage .wrapper .phonenumber textarea, #projektanfrage .wrapper .message input, #projektanfrage .wrapper .message textarea, #kontaktanfrage .wrapper .name input, #kontaktanfrage .wrapper .name textarea, #kontaktanfrage .wrapper .company input, #kontaktanfrage .wrapper .company textarea, #kontaktanfrage .wrapper .email input, #kontaktanfrage .wrapper .email textarea, #kontaktanfrage .wrapper .phonenumber input, #kontaktanfrage .wrapper .phonenumber textarea, #kontaktanfrage .wrapper .message input, #kontaktanfrage .wrapper .message textarea {
display: block;
width: 100%;
box-sizing: border-box; padding: 10px;
font-size: 16px;
font-weight: 600;
border: none;
background-color: rgba(255, 255, 255, 0.2);
color: var(--color-weiss);
transition: all 0.2s;
font-family: Encode;
border-radius: 5px;
}
@media (min-width: 768px) {
#projektanfrage .wrapper .name input, #projektanfrage .wrapper .name textarea, #projektanfrage .wrapper .company input, #projektanfrage .wrapper .company textarea, #projektanfrage .wrapper .email input, #projektanfrage .wrapper .email textarea, #projektanfrage .wrapper .phonenumber input, #projektanfrage .wrapper .phonenumber textarea, #projektanfrage .wrapper .message input, #projektanfrage .wrapper .message textarea, #kontaktanfrage .wrapper .name input, #kontaktanfrage .wrapper .name textarea, #kontaktanfrage .wrapper .company input, #kontaktanfrage .wrapper .company textarea, #kontaktanfrage .wrapper .email input, #kontaktanfrage .wrapper .email textarea, #kontaktanfrage .wrapper .phonenumber input, #kontaktanfrage .wrapper .phonenumber textarea, #kontaktanfrage .wrapper .message input, #kontaktanfrage .wrapper .message textarea {
border-radius: 10px;
}
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .name input, #projektanfrage .wrapper .name textarea, #projektanfrage .wrapper .company input, #projektanfrage .wrapper .company textarea, #projektanfrage .wrapper .email input, #projektanfrage .wrapper .email textarea, #projektanfrage .wrapper .phonenumber input, #projektanfrage .wrapper .phonenumber textarea, #projektanfrage .wrapper .message input, #projektanfrage .wrapper .message textarea, #kontaktanfrage .wrapper .name input, #kontaktanfrage .wrapper .name textarea, #kontaktanfrage .wrapper .company input, #kontaktanfrage .wrapper .company textarea, #kontaktanfrage .wrapper .email input, #kontaktanfrage .wrapper .email textarea, #kontaktanfrage .wrapper .phonenumber input, #kontaktanfrage .wrapper .phonenumber textarea, #kontaktanfrage .wrapper .message input, #kontaktanfrage .wrapper .message textarea {
padding: 1vw 1.5vw;
font-size: 1.2vw;
border-radius: 0.8vw;
}
}
#projektanfrage .wrapper .name input:focus, #projektanfrage .wrapper .name textarea:focus, #projektanfrage .wrapper .company input:focus, #projektanfrage .wrapper .company textarea:focus, #projektanfrage .wrapper .email input:focus, #projektanfrage .wrapper .email textarea:focus, #projektanfrage .wrapper .phonenumber input:focus, #projektanfrage .wrapper .phonenumber textarea:focus, #projektanfrage .wrapper .message input:focus, #projektanfrage .wrapper .message textarea:focus, #kontaktanfrage .wrapper .name input:focus, #kontaktanfrage .wrapper .name textarea:focus, #kontaktanfrage .wrapper .company input:focus, #kontaktanfrage .wrapper .company textarea:focus, #kontaktanfrage .wrapper .email input:focus, #kontaktanfrage .wrapper .email textarea:focus, #kontaktanfrage .wrapper .phonenumber input:focus, #kontaktanfrage .wrapper .phonenumber textarea:focus, #kontaktanfrage .wrapper .message input:focus, #kontaktanfrage .wrapper .message textarea:focus {
padding-top: 30px;
}
@media (min-width: 768px) {
#projektanfrage .wrapper .name input:focus, #projektanfrage .wrapper .name textarea:focus, #projektanfrage .wrapper .company input:focus, #projektanfrage .wrapper .company textarea:focus, #projektanfrage .wrapper .email input:focus, #projektanfrage .wrapper .email textarea:focus, #projektanfrage .wrapper .phonenumber input:focus, #projektanfrage .wrapper .phonenumber textarea:focus, #projektanfrage .wrapper .message input:focus, #projektanfrage .wrapper .message textarea:focus, #kontaktanfrage .wrapper .name input:focus, #kontaktanfrage .wrapper .name textarea:focus, #kontaktanfrage .wrapper .company input:focus, #kontaktanfrage .wrapper .company textarea:focus, #kontaktanfrage .wrapper .email input:focus, #kontaktanfrage .wrapper .email textarea:focus, #kontaktanfrage .wrapper .phonenumber input:focus, #kontaktanfrage .wrapper .phonenumber textarea:focus, #kontaktanfrage .wrapper .message input:focus, #kontaktanfrage .wrapper .message textarea:focus {
padding-top: 40px;
}
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .name input:focus, #projektanfrage .wrapper .name textarea:focus, #projektanfrage .wrapper .company input:focus, #projektanfrage .wrapper .company textarea:focus, #projektanfrage .wrapper .email input:focus, #projektanfrage .wrapper .email textarea:focus, #projektanfrage .wrapper .phonenumber input:focus, #projektanfrage .wrapper .phonenumber textarea:focus, #projektanfrage .wrapper .message input:focus, #projektanfrage .wrapper .message textarea:focus, #kontaktanfrage .wrapper .name input:focus, #kontaktanfrage .wrapper .name textarea:focus, #kontaktanfrage .wrapper .company input:focus, #kontaktanfrage .wrapper .company textarea:focus, #kontaktanfrage .wrapper .email input:focus, #kontaktanfrage .wrapper .email textarea:focus, #kontaktanfrage .wrapper .phonenumber input:focus, #kontaktanfrage .wrapper .phonenumber textarea:focus, #kontaktanfrage .wrapper .message input:focus, #kontaktanfrage .wrapper .message textarea:focus {
padding-top: 2.5vw;
}
}
#projektanfrage .wrapper .name input.has-content, #projektanfrage .wrapper .name textarea.has-content, #projektanfrage .wrapper .company input.has-content, #projektanfrage .wrapper .company textarea.has-content, #projektanfrage .wrapper .email input.has-content, #projektanfrage .wrapper .email textarea.has-content, #projektanfrage .wrapper .phonenumber input.has-content, #projektanfrage .wrapper .phonenumber textarea.has-content, #projektanfrage .wrapper .message input.has-content, #projektanfrage .wrapper .message textarea.has-content, #kontaktanfrage .wrapper .name input.has-content, #kontaktanfrage .wrapper .name textarea.has-content, #kontaktanfrage .wrapper .company input.has-content, #kontaktanfrage .wrapper .company textarea.has-content, #kontaktanfrage .wrapper .email input.has-content, #kontaktanfrage .wrapper .email textarea.has-content, #kontaktanfrage .wrapper .phonenumber input.has-content, #kontaktanfrage .wrapper .phonenumber textarea.has-content, #kontaktanfrage .wrapper .message input.has-content, #kontaktanfrage .wrapper .message textarea.has-content {
padding-top: 30px;
}
@media (min-width: 768px) {
#projektanfrage .wrapper .name input.has-content, #projektanfrage .wrapper .name textarea.has-content, #projektanfrage .wrapper .company input.has-content, #projektanfrage .wrapper .company textarea.has-content, #projektanfrage .wrapper .email input.has-content, #projektanfrage .wrapper .email textarea.has-content, #projektanfrage .wrapper .phonenumber input.has-content, #projektanfrage .wrapper .phonenumber textarea.has-content, #projektanfrage .wrapper .message input.has-content, #projektanfrage .wrapper .message textarea.has-content, #kontaktanfrage .wrapper .name input.has-content, #kontaktanfrage .wrapper .name textarea.has-content, #kontaktanfrage .wrapper .company input.has-content, #kontaktanfrage .wrapper .company textarea.has-content, #kontaktanfrage .wrapper .email input.has-content, #kontaktanfrage .wrapper .email textarea.has-content, #kontaktanfrage .wrapper .phonenumber input.has-content, #kontaktanfrage .wrapper .phonenumber textarea.has-content, #kontaktanfrage .wrapper .message input.has-content, #kontaktanfrage .wrapper .message textarea.has-content {
padding-top: 40px;
}
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .name input.has-content, #projektanfrage .wrapper .name textarea.has-content, #projektanfrage .wrapper .company input.has-content, #projektanfrage .wrapper .company textarea.has-content, #projektanfrage .wrapper .email input.has-content, #projektanfrage .wrapper .email textarea.has-content, #projektanfrage .wrapper .phonenumber input.has-content, #projektanfrage .wrapper .phonenumber textarea.has-content, #projektanfrage .wrapper .message input.has-content, #projektanfrage .wrapper .message textarea.has-content, #kontaktanfrage .wrapper .name input.has-content, #kontaktanfrage .wrapper .name textarea.has-content, #kontaktanfrage .wrapper .company input.has-content, #kontaktanfrage .wrapper .company textarea.has-content, #kontaktanfrage .wrapper .email input.has-content, #kontaktanfrage .wrapper .email textarea.has-content, #kontaktanfrage .wrapper .phonenumber input.has-content, #kontaktanfrage .wrapper .phonenumber textarea.has-content, #kontaktanfrage .wrapper .message input.has-content, #kontaktanfrage .wrapper .message textarea.has-content {
padding-top: 2.5vw;
}
}
#projektanfrage .wrapper .name input.wpcf7-not-valid, #projektanfrage .wrapper .name textarea.wpcf7-not-valid, #projektanfrage .wrapper .company input.wpcf7-not-valid, #projektanfrage .wrapper .company textarea.wpcf7-not-valid, #projektanfrage .wrapper .email input.wpcf7-not-valid, #projektanfrage .wrapper .email textarea.wpcf7-not-valid, #projektanfrage .wrapper .phonenumber input.wpcf7-not-valid, #projektanfrage .wrapper .phonenumber textarea.wpcf7-not-valid, #projektanfrage .wrapper .message input.wpcf7-not-valid, #projektanfrage .wrapper .message textarea.wpcf7-not-valid, #kontaktanfrage .wrapper .name input.wpcf7-not-valid, #kontaktanfrage .wrapper .name textarea.wpcf7-not-valid, #kontaktanfrage .wrapper .company input.wpcf7-not-valid, #kontaktanfrage .wrapper .company textarea.wpcf7-not-valid, #kontaktanfrage .wrapper .email input.wpcf7-not-valid, #kontaktanfrage .wrapper .email textarea.wpcf7-not-valid, #kontaktanfrage .wrapper .phonenumber input.wpcf7-not-valid, #kontaktanfrage .wrapper .phonenumber textarea.wpcf7-not-valid, #kontaktanfrage .wrapper .message input.wpcf7-not-valid, #kontaktanfrage .wrapper .message textarea.wpcf7-not-valid {
border: 2px solid var(--color-weiss);
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .name input.wpcf7-not-valid, #projektanfrage .wrapper .name textarea.wpcf7-not-valid, #projektanfrage .wrapper .company input.wpcf7-not-valid, #projektanfrage .wrapper .company textarea.wpcf7-not-valid, #projektanfrage .wrapper .email input.wpcf7-not-valid, #projektanfrage .wrapper .email textarea.wpcf7-not-valid, #projektanfrage .wrapper .phonenumber input.wpcf7-not-valid, #projektanfrage .wrapper .phonenumber textarea.wpcf7-not-valid, #projektanfrage .wrapper .message input.wpcf7-not-valid, #projektanfrage .wrapper .message textarea.wpcf7-not-valid, #kontaktanfrage .wrapper .name input.wpcf7-not-valid, #kontaktanfrage .wrapper .name textarea.wpcf7-not-valid, #kontaktanfrage .wrapper .company input.wpcf7-not-valid, #kontaktanfrage .wrapper .company textarea.wpcf7-not-valid, #kontaktanfrage .wrapper .email input.wpcf7-not-valid, #kontaktanfrage .wrapper .email textarea.wpcf7-not-valid, #kontaktanfrage .wrapper .phonenumber input.wpcf7-not-valid, #kontaktanfrage .wrapper .phonenumber textarea.wpcf7-not-valid, #kontaktanfrage .wrapper .message input.wpcf7-not-valid, #kontaktanfrage .wrapper .message textarea.wpcf7-not-valid {
border-width: 0.2vw;
}
}
@media (min-width: 768px) {
#projektanfrage .wrapper .name input, #projektanfrage .wrapper .name textarea, #projektanfrage .wrapper .company input, #projektanfrage .wrapper .company textarea, #projektanfrage .wrapper .email input, #projektanfrage .wrapper .email textarea, #projektanfrage .wrapper .phonenumber input, #projektanfrage .wrapper .phonenumber textarea, #projektanfrage .wrapper .message input, #projektanfrage .wrapper .message textarea, #kontaktanfrage .wrapper .name input, #kontaktanfrage .wrapper .name textarea, #kontaktanfrage .wrapper .company input, #kontaktanfrage .wrapper .company textarea, #kontaktanfrage .wrapper .email input, #kontaktanfrage .wrapper .email textarea, #kontaktanfrage .wrapper .phonenumber input, #kontaktanfrage .wrapper .phonenumber textarea, #kontaktanfrage .wrapper .message input, #kontaktanfrage .wrapper .message textarea {
font-size: 18px;
padding: 20px;
}
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .name input, #projektanfrage .wrapper .name textarea, #projektanfrage .wrapper .company input, #projektanfrage .wrapper .company textarea, #projektanfrage .wrapper .email input, #projektanfrage .wrapper .email textarea, #projektanfrage .wrapper .phonenumber input, #projektanfrage .wrapper .phonenumber textarea, #projektanfrage .wrapper .message input, #projektanfrage .wrapper .message textarea, #kontaktanfrage .wrapper .name input, #kontaktanfrage .wrapper .name textarea, #kontaktanfrage .wrapper .company input, #kontaktanfrage .wrapper .company textarea, #kontaktanfrage .wrapper .email input, #kontaktanfrage .wrapper .email textarea, #kontaktanfrage .wrapper .phonenumber input, #kontaktanfrage .wrapper .phonenumber textarea, #kontaktanfrage .wrapper .message input, #kontaktanfrage .wrapper .message textarea {
padding: 2vw;
}
}
#projektanfrage .wrapper .name.message, #projektanfrage .wrapper .company.message, #projektanfrage .wrapper .email.message, #projektanfrage .wrapper .phonenumber.message, #projektanfrage .wrapper .message.message, #kontaktanfrage .wrapper .name.message, #kontaktanfrage .wrapper .company.message, #kontaktanfrage .wrapper .email.message, #kontaktanfrage .wrapper .phonenumber.message, #kontaktanfrage .wrapper .message.message {
padding-bottom: 0;
}
#projektanfrage .wrapper .phone, #kontaktanfrage .wrapper .phone {
border: 2px solid rgba(255, 255, 255, 0.2);
padding: 0 20px;
border-radius: 10px;
margin-bottom: 20px;
margin: 0 0 20px 0;
}
@media (min-width: 768px) {
#projektanfrage .wrapper .phone, #kontaktanfrage .wrapper .phone {
border: 4px solid rgba(255, 255, 255, 0.2);
}
}
#projektanfrage .wrapper .phone .phone_info p, #kontaktanfrage .wrapper .phone .phone_info p {
font-size: 16px;
color: var(--color-weiss);
font-weight: 600;
}
@media (min-width: 768px) {
#projektanfrage .wrapper .phone .phone_info p, #kontaktanfrage .wrapper .phone .phone_info p {
font-size: 18px;
}
}
#projektanfrage .wrapper .phone .phonenumber, #kontaktanfrage .wrapper .phone .phonenumber {
padding-bottom: 10px;
}
#projektanfrage .wrapper .phone .phone_container, #kontaktanfrage .wrapper .phone .phone_container {
display: block;
padding: 0 0 10px 0;
margin: 0;
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .phone .phone_container, #kontaktanfrage .wrapper .phone .phone_container {
padding: 0 0 1.5vw 0;
}
}
#projektanfrage .wrapper .phone .phone_container.visible, #kontaktanfrage .wrapper .phone .phone_container.visible {
display: block;
padding: 0;
margin: 0;
}
#projektanfrage .wrapper .phone .phone_container .phone-item, #kontaktanfrage .wrapper .phone .phone_container .phone-item {
display: block;
}
#projektanfrage .wrapper .phone .phone_container .phone-item p, #kontaktanfrage .wrapper .phone .phone_container .phone-item p {
padding: 0;
margin: 0;
}
#projektanfrage .wrapper .phone .phone_container .phone-item .icon, #kontaktanfrage .wrapper .phone .phone_container .phone-item .icon {
width: 30px;
display: table-cell;
vertical-align: middle;
text-align: left;
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .phone .phone_container .phone-item .icon, #kontaktanfrage .wrapper .phone .phone_container .phone-item .icon {
width: 2.5vw;
}
}
#projektanfrage .wrapper .phone .phone_container .phone-item .icon svg, #kontaktanfrage .wrapper .phone .phone_container .phone-item .icon svg {
fill: var(--color-weiss);
opacity: 0.6;
width: 20px;
height: 20px;
margin-top: 3px;
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .phone .phone_container .phone-item .icon svg, #kontaktanfrage .wrapper .phone .phone_container .phone-item .icon svg {
width: 2vw;
height: 2vw;
margin-top: 0.2vw;
}
}
#projektanfrage .wrapper .phone .phone_container .phone-item .label, #kontaktanfrage .wrapper .phone .phone_container .phone-item .label {
width: calc(100% - 30px);
display: table-cell;
vertical-align: middle;
color: var(--color-weiss);
}
@media (min-width: 768px) {
#projektanfrage .wrapper .phone .phone_container .phone-item .label, #kontaktanfrage .wrapper .phone .phone_container .phone-item .label {
font-size: 18px;
}
}
@media (min-width: 768px) {
#projektanfrage .wrapper .phone .phone_container .phone-item .label, #kontaktanfrage .wrapper .phone .phone_container .phone-item .label {
font-size: 1.2vw;
width: calc(100% - 2.5vw);
}
}
#projektanfrage .wrapper .phone .phone_container .phone-item .input, #kontaktanfrage .wrapper .phone .phone_container .phone-item .input {
display: block;
padding-top: 10px;
padding-bottom: 10px;
}
#projektanfrage .wrapper .phone .phone_container .phone-item .input select, #projektanfrage .wrapper .phone .phone_container .phone-item .input input, #kontaktanfrage .wrapper .phone .phone_container .phone-item .input select, #kontaktanfrage .wrapper .phone .phone_container .phone-item .input input {
width: 100%;
box-sizing: border-box; padding: 10px;
font-family: Encode;
font-size: 16px;
border: none;
background-color: rgba(255, 255, 255, 0.2);
color: var(--color-weiss);
border-radius: 5px;
}
@media (min-width: 768px) {
#projektanfrage .wrapper .phone .phone_container .phone-item .input select, #projektanfrage .wrapper .phone .phone_container .phone-item .input input, #kontaktanfrage .wrapper .phone .phone_container .phone-item .input select, #kontaktanfrage .wrapper .phone .phone_container .phone-item .input input {
font-size: 18px;
padding: 20px;
border-radius: 10px;
}
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .phone .phone_container .phone-item .input select, #projektanfrage .wrapper .phone .phone_container .phone-item .input input, #kontaktanfrage .wrapper .phone .phone_container .phone-item .input select, #kontaktanfrage .wrapper .phone .phone_container .phone-item .input input {
font-size: 1.2vw;
padding: 2vw;
}
}
#projektanfrage .wrapper .phone .phone_container .phone-item:last-child .input, #kontaktanfrage .wrapper .phone .phone_container .phone-item:last-child .input {
padding-bottom: 10px;
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .phone .phone_container .phone-item:last-child .input, #kontaktanfrage .wrapper .phone .phone_container .phone-item:last-child .input {
padding-bottom: 1vw;
}
}
#projektanfrage .wrapper .data, #kontaktanfrage .wrapper .data {
padding: 0 0 0 0;
color: var(--color-weiss);
}
@media (min-width: 768px) {
#projektanfrage .wrapper .data, #kontaktanfrage .wrapper .data {
font-size: 18px;
}
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .data, #kontaktanfrage .wrapper .data {
font-size: 1.2vw;
}
}
#projektanfrage .wrapper .data a, #kontaktanfrage .wrapper .data a {
color: var(--color-weiss);
}
#projektanfrage .wrapper .submit, #kontaktanfrage .wrapper .submit {
display: block;
text-align: center;
padding-top: 10px;
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .submit, #kontaktanfrage .wrapper .submit {
padding-top: 1vw;
}
}
#projektanfrage .wrapper .submit input, #kontaktanfrage .wrapper .submit input {
display: inline-block;
padding: 10px;
font-family: Encode;
font-size: 16px;
font-weight: 600;
border: none;
background-color: var(--color-weiss);
color: var(--color-hellbau);
border-radius: 10px;
cursor: pointer;
}
#projektanfrage .wrapper .submit input:hover, #kontaktanfrage .wrapper .submit input:hover {
background-color: var(--color-schwarz);
color: var(--color-weiss);
}
@media (min-width: 768px) {
#projektanfrage .wrapper .submit input, #kontaktanfrage .wrapper .submit input {
font-size: 18px;
padding: 20px;
}
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .submit input, #kontaktanfrage .wrapper .submit input {
font-size: 1.2vw;
padding: 1.5vw;
border-radius: 1vw;
}
}
#projektanfrage .wrapper .submit .wpcf7-spinner, #kontaktanfrage .wrapper .submit .wpcf7-spinner {
display: inline-block;
background-color: transparent;
opacity: 0.9;
z-index: 1;
width: 0px;
height: 0px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0;
position: absolute;
}
#projektanfrage .wrapper .submit .wpcf7-spinner::before, #kontaktanfrage .wrapper .submit .wpcf7-spinner::before {
display: none;
}
@keyframes bgSizeChange {
0% {
background-size: 100px 100px;
@media (min-width: 1281px) {
#projektanfrage .wrapper .submit .wpcf7-spinner, #kontaktanfrage .wrapper .submit .wpcf7-spinner {
background-size: 8vw 8vw;
}
}
}
50% {
background-size: 200px 200px;
@media (min-width: 1281px) {
#projektanfrage .wrapper .submit .wpcf7-spinner, #kontaktanfrage .wrapper .submit .wpcf7-spinner {
background-size: 16vw 16vw;
}
}
}
100% {
background-size: 100px 100px;
@media (min-width: 1281px) {
#projektanfrage .wrapper .submit .wpcf7-spinner, #kontaktanfrage .wrapper .submit .wpcf7-spinner {
background-size: 8vw 8vw;
}
}
}
}
#projektanfrage .wrapper .submit .wpcf7-spinner::after, #kontaktanfrage .wrapper .submit .wpcf7-spinner::after {
z-index: -1;
content: "";
display: block;
position: fixed;
width: 100vw;
height: 100vh;
background-color: #4cad38;
top: 0;
left: 0;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/mail-loader.svg);
background-repeat: no-repeat;
background-position: center center;
animation: bgSizeChange 1.5s linear infinite;
}
#projektanfrage .wrapper .wpcf7-not-valid-tip, #kontaktanfrage .wrapper .wpcf7-not-valid-tip {
display: block;
padding: 10px 10px 10px 40px;
background-color: var(--color-weiss);
border: 1px solid var(--color-weiss);
margin-top: 5px;
border-radius: 5px;
font-size: 16px;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-arrow-top-red.svg);
background-repeat: no-repeat;
background-position: 10px center;
background-size: 12px 12px;
}
@media (min-width: 768px) {
#projektanfrage .wrapper .wpcf7-not-valid-tip, #kontaktanfrage .wrapper .wpcf7-not-valid-tip {
padding: 20px 20px 20px 30px;
font-size: 18px;
}
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .wpcf7-not-valid-tip, #kontaktanfrage .wrapper .wpcf7-not-valid-tip {
padding: 1vw 1.5vw;
font-size: 1.2vw;
padding: 1.2vw 1.2vw 1.2vw 3vw;
border-radius: 0.8vw;
background-size: 1.2vw 1.2vw;
background-position: 1.2vw center;
}
}
#projektanfrage .wrapper .wpcf7-response-output, #kontaktanfrage .wrapper .wpcf7-response-output {
border-color: transparent;
background-color: var(--color-weiss);
padding: 10px;
border-radius: 10px;
color: red;
margin: 40px 0 20px 0;
}
@media (min-width: 768px) {
#projektanfrage .wrapper .wpcf7-response-output, #kontaktanfrage .wrapper .wpcf7-response-output {
padding: 20px;
font-size: 21px;
margin: 40px 0 40px 0;
}
}
@media (min-width: 1281px) {
#projektanfrage .wrapper .wpcf7-response-output, #kontaktanfrage .wrapper .wpcf7-response-output {
padding: 1.5vw;
font-size: 1.4vw;
border-radius: 1vw;
margin: 1.5vw 0;
}
}
#projektanfrage .wpcf7-form, #kontaktanfrage .wpcf7-form {
display: flex;
flex-direction: column;
}
#projektanfrage .wpcf7-form .form_content, #kontaktanfrage .wpcf7-form .form_content {
order: 2;
}
#projektanfrage .wpcf7-form .wpcf7-response-output, #kontaktanfrage .wpcf7-form .wpcf7-response-output {
order: 1;
}
#projektanfrage .wpcf7-form.sent .wpcf7-response-output, #kontaktanfrage .wpcf7-form.sent .wpcf7-response-output {
display: none;
}
#projektanfrage .mailsent, #kontaktanfrage .mailsent {
display: none;
text-align: center;
padding: 100px 0 0 0;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-mail-sent-white.svg);
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center 0;
}
@media (min-width: 1281px) {
#projektanfrage .mailsent, #kontaktanfrage .mailsent {
padding: 8.5vw 0 0 0;
background-size: 7vw 7vw;
}
}
#projektanfrage .mailsent p, #kontaktanfrage .mailsent p {
font-size: 24px;
font-weight: bold;
color: var(--color-weiss);
}
@media (min-width: 1281px) {
#projektanfrage .mailsent p, #kontaktanfrage .mailsent p {
font-size: 2vw;
}
}
#projektanfrage .mailsent button, #kontaktanfrage .mailsent button {
background-color: transparent;
border: 1px solid var(--color-weiss);
padding: 8px 14px;
margin-top: 20px;
border-radius: 10px;
color: var(--color-weiss);
cursor: pointer;
}
@media (min-width: 1281px) {
#projektanfrage .mailsent button, #kontaktanfrage .mailsent button {
border: 0.1vw solid var(--color-weiss);
margin-top: 1.5vw;
border-radius: 1vw;
padding: 0.66vw 0.88vw;
}
}
#projektanfrage .mailsent button:hover, #kontaktanfrage .mailsent button:hover {
color: var(--color-hellbau);
background-color: var(--color-weiss);
border-color: var(--color-weiss);
}
#kontaktanfrage {
background-color: var(--color-gruen);
}
#kontaktanfrage .anrede form input[type=radio]:checked + label.radio-button {
color: var(--color-gruen) !important;
}
#kontaktanfrage .submit {
display: block;
text-align: center;
padding-top: 10px;
}
@media (min-width: 1281px) {
#kontaktanfrage .submit {
padding-top: 1vw;
}
}
#kontaktanfrage .submit input {
color: var(--color-gruen) !important;
}
#kontaktanfrage .submit input:hover {
color: var(--color-weiss) !important;
}
#kontaktanfrage .mailsent button:hover {
color: var(--color-gruen) !important;
}
#karriere {
display: block;
padding: 20px 0 40px 0;
margin: 0 20px;
max-width: none;
}
@media (min-width: 768px) {
#karriere {
margin: 0 40px;
}
}
@media (min-width: 1281px) {
#karriere {
margin: 0 auto;
max-width: 72.5vw;
}
}
.karriere-single .karriere-thumbnail {
display: block;
position: relative;
z-index: 1;
}
.karriere-single .karriere-thumbnail .inner {
display: flex;
align-items: center;
align-self: center;
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
top: -70px;
right: 20px;
transform: rotate(15deg);
background-color: var(--color-hellgrau);
border: 1px solid var(--color-blau);
}
@media (min-width: 768px) {
.karriere-single .karriere-thumbnail .inner {
width: 150px;
height: 150px;
top: -50px;
right: 40px;
}
}
@media (min-width: 1281px) {
.karriere-single .karriere-thumbnail .inner {
width: 18vw;
height: 18vw;
top: -10vw;
right: 3.5vw;
border: none;
background-color: transparent;
transform: rotate(0deg);
}
.karriere-single .karriere-thumbnail .inner img {
filter: drop-shadow(0 0 2vw rgba(36, 85, 158, 0.5));
}
}
.karriere-single .karriere-thumbnail .inner img {
width: 100%;
height: auto;
}
.ui-timepicker-list {
width: 15.625em;
padding: 0.3125em;
}
.service-thumbnail {
display: block;
position: relative;
z-index: 1;
}
.service-thumbnail .inner {
display: flex;
align-items: center;
align-self: center;
position: absolute;
width: 80px;
height: 80px;
padding: 20px;
border-radius: 50%;
top: -60px;
right: 20px;
transform: rotate(15deg);
background-color: var(--color-hellgrau);
}
@media (min-width: 768px) {
.service-thumbnail .inner {
width: 120px;
height: 120px;
top: -80px;
right: 40px;
padding: 30px;
}
}
@media (min-width: 1281px) {
.service-thumbnail .inner {
width: 15vw;
height: 15vw;
top: -10vw;
right: 3.5vw;
border: none;
padding: 3.5vw;
}
}
.service-thumbnail .inner img {
width: 100%;
height: auto;
}  .job_form {
padding-top: 4em;
}
.job_form form .nf-form-content {
padding: 0;
margin: 0 -5px;
}
.job_form form .file_upload-container .nf-field {
padding: 1em;
}
.job_form form .file_upload-container .nf-field .file_upload-wrap {
border: 1px solid #666;
padding: 1em;
}
.job_form form .file_upload-container .nf-field .file_upload-wrap.nf-error {
border: 2px solid red;
}
.job_form form .file_upload-container .nf-field .file_upload-wrap.nf-error :after {
display: none !important;
}
.job_form form .file_upload-container .nf-field .file_upload-wrap .nf-field-element {
position: relative;
}
.job_form form .file_upload-container .nf-field .file_upload-wrap .nf-field-element:after {
content: "";
display: table;
clear: both;
}
.job_form form .file_upload-container .nf-field .file_upload-wrap .nf-field-element button.nf-fu-fileinput-button {
float: left;
}
.job_form form .file_upload-container .nf-field .file_upload-wrap .nf-field-element button.nf-fu-button-cancel {
display: none !important;
}
.job_form form .file_upload-container .nf-field .file_upload-wrap .nf-field-element .files_uploaded {
float: right;
}
.job_form form .file_upload-container .nf-field .file_upload-wrap .nf-field-element .nf-fu-progress {
height: 3px;
width: calc(100% + 2em);
margin-bottom: 0;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
-webkit-box-shadow: none;
box-shadow: none;
position: absolute;
bottom: -1em;
left: -1em;
}
.job_form form .file_upload-container .nf-after-field .nf-error-wrap {
padding: 0 1em;
}
.floating-form {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 1281px) {
.floating-form {
gap: 2vw;
}
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-background-clip: text;
-webkit-text-fill-color: #fff;
transition: background-color 5000s ease-in-out 0s;
box-shadow: unset;
font-size: 16px;
}
@media (min-width: 768px) {
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
font-size: 18px;
}
}
@media (min-width: 1281px) {
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
font-size: 1.2vw;
}
} .floating-label {
width: 100%;
max-width: 100%;
position: relative;
display: block;
box-sizing: border-box;
font-size: 16px;
font-weight: 600;
border: none;
background-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
transition: all 0.2s;
border-radius: 5px;
}
@media (min-width: 768px) {
.floating-label {
border-radius: 10px;
}
}
@media (min-width: 1281px) {
.floating-label {
border-radius: 0.8vw;
}
}
.floating-input,
.floating-select {
border: none;
color: #ffffff;
display: block;
font-size: 16px;
width: 100%;
background-color: rgba(255, 255, 255, 0);
padding-right: 10px;
padding: 20px;
padding-top: 25px;
padding-bottom: 15px;
}
@media (min-width: 1281px) {
.floating-input,
.floating-select {
padding: 2.5vw 2vw 1.5vw 2vw;
font-size: 1.2vw;
border-radius: 0.8vw;
}
}
.floating-phone-box-fields {
padding: 20px;
padding-top: 25px;
padding-bottom: 15px;
}
@media (min-width: 768px) {
.floating-phone-box-fields {
border-radius: 10px;
}
}
@media (min-width: 1281px) {
.floating-phone-box-fields {
padding: 2.5vw 2vw 1.5vw 2vw;
font-size: 1.2vw;
border-radius: 0.8vw;
}
}
.floating-phone-box-fields-select {
padding: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
@media (min-width: 768px) {
.floating-phone-box-fields-select {
border-radius: 10px;
}
}
@media (min-width: 1281px) {
.floating-phone-box-fields-select {
padding: 2vw;
font-size: 1.2vw;
border-radius: 0.8vw;
}
}
.floating-select {
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/arrow_down_white.svg); background-repeat: no-repeat;
background-position: calc(100% - 12px) center;
background-size: 12px 12px; appearance: none; -moz-appearance: none;
cursor: text;
}
@media (min-width: 1281px) {
.floating-select {
background-position: calc(100% - 1vw) center;
background-size: 1vw 1vw;
}
}
.floating-select option {
color: black;
}
.floating-input:focus,
.floating-select:focus {
outline: none;
border-bottom: none;
}
.input-label {
padding-left: 20px;
color: #ffffff;
font-size: 16px;
font-weight: normal;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: 0.3s ease all;
-moz-transition: 0.3s ease all;
-webkit-transition: 0.3s ease all;
display: block;
font-weight: 400;
color: var(--color-weiss);
position: absolute;
left: 0;
pointer-events: none;
}
@media (min-width: 768px) {
.input-label {
font-size: 18px;
padding-left: 20px;
}
}
@media (min-width: 1281px) {
.input-label {
font-size: 1.2vw;
padding-left: 2vw;
}
} .floating-input:focus ~ label,
.floating-input:not(:placeholder-shown) ~ label {
top: 15px;
color: rgba(255, 255, 255, 0.5);
font-size: 80%;
padding-left: 20px;
}
@media (min-width: 768px) {
.floating-input:focus ~ label,
.floating-input:not(:placeholder-shown) ~ label {
padding-left: 20px;
font-size: 80%;
}
}
@media (min-width: 1281px) {
.floating-input:focus ~ label,
.floating-input:not(:placeholder-shown) ~ label {
top: 25px;
padding-left: 2vw;
border-width: 0.2vw;
font-size: 95%;
}
}
.set-static-top-left-label {
top: 15px;
color: rgba(255, 255, 255, 0.5);
font-size: 80%;
padding-left: 20px;
}
@media (min-width: 768px) {
.set-static-top-left-label {
padding-left: 20px;
font-size: 80%;
}
}
@media (min-width: 1281px) {
.set-static-top-left-label {
top: 20px;
padding-left: 2vw;
border-width: 0.2vw;
font-size: 95%;
}
}
.floating-select:focus ~ label,
.floating-select:not([value=""]):valid ~ label {
top: 15px;
color: rgba(255, 255, 255, 0.5);
font-size: 80%;
opacity: 0.6;
padding-left: 20px;
}
@media (min-width: 768px) {
.floating-select:focus ~ label,
.floating-select:not([value=""]):valid ~ label {
padding-left: 20px;
font-size: 80%;
}
}
@media (min-width: 1281px) {
.floating-select:focus ~ label,
.floating-select:not([value=""]):valid ~ label {
padding-left: 2vw;
font-size: 95%;
}
}
.floating-label-active {
top: 15px;
color: rgba(255, 255, 255, 0.5);
font-size: 80%;
opacity: 0.6;
padding-left: 10px;
border: 2px solid var(--color-weiss);
}
@media (min-width: 768px) {
.floating-label-active {
padding-left: 20px;
font-size: 80%;
}
}
@media (min-width: 1281px) {
.floating-label-active {
padding-left: 2vw;
border-width: 0.2vw;
font-size: 95%;
}
} .floating-input:focus ~ .bar:before,
.floating-input:focus ~ .bar:after,
.floating-select:focus ~ .bar:before,
.floating-select:focus ~ .bar:after {
width: 50%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.floating-textarea {
min-height: 30px;
overflow: hidden;
overflow-x: hidden;
display: block;
width: 100%;
box-sizing: border-box;
font-size: 16px;
font-weight: 400;
border: none;
color: var(--color-weiss);
transition: all 0.2s;
font-family: Encode;
border-radius: 5px;
margin-top: 10px;
}
@media (min-width: 768px) {
.floating-textarea {
padding-left: 20px;
padding-top: 25px;
padding-bottom: 15px;
font-size: 18px;
margin-top: 20px;
}
}
@media (min-width: 1281px) {
.floating-textarea {
padding-left: 2vw;
font-size: 1.2vw;
padding-top: 50px;
margin-top: 2vw;
}
}
.textarea-label {
top: 13%;
transform: translateY(-13%);
} .form-phone-box {
border: 2px solid rgba(255, 255, 255, 0.2);
padding: 0 20px;
border-radius: 10px;
padding-bottom: 20px;
}
@media (min-width: 768px) {
.form-phone-box {
border: 4px solid rgba(255, 255, 255, 0.2);
}
}
@media (min-width: 1281px) {
.form-phone-box {
padding-bottom: 1.5vw;
}
}
.form-phone-box p {
font-size: 16px;
color: var(--color-weiss);
font-weight: 600;
}
@media (min-width: 768px) {
.form-phone-box p {
font-size: 18px;
}
}
@media (min-width: 1281px) {
.form-phone-box p {
font-size: 1.1vw;
}
}
.form-box-fields {
display: flex;
flex-direction: column;
gap: 20px;
}
.data {
padding: 0 0 0 0;
color: var(--color-weiss);
}
@media (min-width: 768px) {
.data {
font-size: 18px;
}
}
@media (min-width: 1281px) {
.data {
font-size: 1.2vw;
}
}
.data a {
color: var(--color-weiss);
}
.form-submit {
display: block;
text-align: center;
}
@media (max-width: 768px) {
.form-submit {
padding-bottom: 40px;
}
}
.form-submit .submit-btn {
display: inline-block;
padding: 10px;
font-family: Encode;
font-size: 16px;
font-weight: 600;
border: none;
background-color: var(--color-weiss);
color: var(--color-hellbau);
border-radius: 10px;
cursor: pointer;
}
.form-submit .submit-btn:hover {
background-color: var(--color-schwarz);
color: var(--color-weiss);
}
@media (min-width: 768px) {
.form-submit .submit-btn {
font-size: 18px;
padding: 20px;
}
}
@media (min-width: 1281px) {
.form-submit .submit-btn {
font-size: 1.2vw;
padding: 1.5vw;
border-radius: 1vw;
}
}
.required-error {
position: relative;
padding: 10px;
display: block;
padding: 10px 10px 10px 40px;
background-color: var(--color-weiss);
border: 1px solid var(--color-weiss);
margin-top: 5px;
border-radius: 10px;
font-size: 16px;
background-image: url(//www.dreilaut.de/wp-content/themes/dreilaut/assets/icons/icon-arrow-top-red.svg);
background-repeat: no-repeat;
background-position: 10px center;
background-size: 12px 12px;
color: #dc3232;
font-size: 1em;
font-weight: normal;
display: block;
}
@media (min-width: 1281px) {
.required-error {
font-size: 1.2vw;
padding: 1.5vw;
border-radius: 1vw;
}
}
.required-error-border {
border-width: 0.2vw;
border: 2px solid var(--color-weiss);
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
background-color: #24559e !important;
color: #fff !important;
border: none !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:hover {
background-color: var(--color-schwarz) !important;
}
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus {
box-shadow: none !important;
}
#kontaktanfrage .floating-label input:focus-visible, #kontaktanfrage .floating-label select:focus-visible, #kontaktanfrage .floating-label textarea:focus-visible, #kontaktanfrage .floating-label a:focus-visible, #kontaktanfrage .form-submit input:focus-visible, #kontaktanfrage .form-submit select:focus-visible, #kontaktanfrage .form-submit textarea:focus-visible, #kontaktanfrage .form-submit a:focus-visible, #kontaktanfrage .controll-feedback input:focus-visible, #kontaktanfrage .controll-feedback select:focus-visible, #kontaktanfrage .controll-feedback textarea:focus-visible, #kontaktanfrage .controll-feedback a:focus-visible,
#projektanfrage .floating-label input:focus-visible,
#projektanfrage .floating-label select:focus-visible,
#projektanfrage .floating-label textarea:focus-visible,
#projektanfrage .floating-label a:focus-visible,
#projektanfrage .form-submit input:focus-visible,
#projektanfrage .form-submit select:focus-visible,
#projektanfrage .form-submit textarea:focus-visible,
#projektanfrage .form-submit a:focus-visible,
#projektanfrage .controll-feedback input:focus-visible,
#projektanfrage .controll-feedback select:focus-visible,
#projektanfrage .controll-feedback textarea:focus-visible,
#projektanfrage .controll-feedback a:focus-visible {
outline: 2px solid var(--color-weiss);
outline-offset: 10px;
border-radius: 7px;
}
@media (min-width: 1281px) {
#kontaktanfrage .floating-label input:focus-visible, #kontaktanfrage .floating-label select:focus-visible, #kontaktanfrage .floating-label textarea:focus-visible, #kontaktanfrage .floating-label a:focus-visible, #kontaktanfrage .form-submit input:focus-visible, #kontaktanfrage .form-submit select:focus-visible, #kontaktanfrage .form-submit textarea:focus-visible, #kontaktanfrage .form-submit a:focus-visible, #kontaktanfrage .controll-feedback input:focus-visible, #kontaktanfrage .controll-feedback select:focus-visible, #kontaktanfrage .controll-feedback textarea:focus-visible, #kontaktanfrage .controll-feedback a:focus-visible,
#projektanfrage .floating-label input:focus-visible,
#projektanfrage .floating-label select:focus-visible,
#projektanfrage .floating-label textarea:focus-visible,
#projektanfrage .floating-label a:focus-visible,
#projektanfrage .form-submit input:focus-visible,
#projektanfrage .form-submit select:focus-visible,
#projektanfrage .form-submit textarea:focus-visible,
#projektanfrage .form-submit a:focus-visible,
#projektanfrage .controll-feedback input:focus-visible,
#projektanfrage .controll-feedback select:focus-visible,
#projektanfrage .controll-feedback textarea:focus-visible,
#projektanfrage .controll-feedback a:focus-visible {
outline: 0.2vw solid var(--color-weiss);
outline-offset: 0.5vw;
border-radius: 0.1vw;
}
}
input[type=radio i]:focus-visible + label {
outline: 2px solid var(--color-weiss);
outline-offset: 10px;
border-radius: 7px;
}
@media (min-width: 1281px) {
input[type=radio i]:focus-visible + label {
outline: 0.2vw solid var(--color-weiss);
outline-offset: 0.5vw;
border-radius: 0.1vw;
}
}
.hide-this-radios {
position: absolute;
top: -1000px;
}
.controll-feedback-important {
opacity: 0 !important;
}
.cookie-preferenzen {
display: flex;
gap: 1vw;
}
.cookie-preferenzen a[role=button] {
color: #fff;
text-decoration: none;
}
.cookie-preferenzen a[role=button]:hover {
color: var(--color-gruen);
text-decoration: underline;
}
@media (max-width: 768px) {
.cookie-preferenzen {
gap: 0;
}
.cookie-preferenzen a[role=button] {
margin-left: 10px;
}
}
:root {--color-schwarz: #1f2023;--color-blau: #24559e;--color-hellblau: #24559e;--color-gruen: #39842a;--color-grau: #707070;--color-mittelgrau: #dddddd;--color-hellgrau: #f1f2f4;--color-weiss: #ffffff;--color-hellgruen: #a9e09e;}@font-face {font-family: Flaters;src: url(https://www.dreilaut.de/wp-content/uploads/FlatersRegular.woff2) format("woff2"),url(https://www.dreilaut.de/wp-content/uploads/FlatersRegular.woff) format("woff");font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: Encode;src: url(https://www.dreilaut.de/wp-content/uploads/EncodeSans-Regular.woff2) format("woff2"),url(https://www.dreilaut.de/wp-content/uploads/EncodeSans-Regular.woff) format("woff");font-weight: 400;font-style: normal;font-display: swap}@font-face {font-family: Encode;src: url(https://www.dreilaut.de/wp-content/uploads/EncodeSans-SemiBold.woff2) format("woff2"),url(https://www.dreilaut.de/wp-content/uploads/EncodeSans-SemiBold.woff) format("woff");font-weight: 600;font-style: normal;font-display: swap}@font-face {font-family: Encode;src: url(https://www.dreilaut.de/wp-content/uploads/EncodeSans-Bold.woff2) format("woff2"),url(https://www.dreilaut.de/wp-content/uploads/EncodeSans-Bold.woff) format("woff");font-weight: 700;font-style: normal;font-display: swap}html, body { color: var(--color-schwarz);font-family:Encode;font-weight:400;}button { color: var(--color-schwarz);font-family:Encode;font-weight:400;font-size:16px;}@media (min-width: 768px) { button { font-size:18px; } }@media (min-width: 1281px) { button { font-size:21px; } }h1 {font-family:Flaters;font-weight:400;font-size:28px;color: var(--color-schwarz);}@media (min-width: 768px) { h1 { font-size:34px; } }@media (min-width: 1281px) { h1 { font-size:40px; } }h2 {font-family:Flaters;font-weight:400;font-size:28px;color: var(--color-schwarz);}@media (min-width: 768px) { h2 { font-size:40px; } }@media (min-width: 1281px) { h2 { font-size:px; } }h3, .h3 {font-family:Encode;font-weight:700;font-size:24px;color: var(--color-schwarz);}@media (min-width: 768px) { h3, .h3 { font-size:30px; } }@media (min-width: 1281px) { h3, .h3 { font-size:px; } }h4 {font-family:Encode;font-weight:700;color: var(--color-schwarz);}h5 {font-family:Encode;font-weight:600;color: var(--color-schwarz);}h6 {font-family:Encode;font-weight:600;font-size:16px;color: var(--color-schwarz);}@media (min-width: 768px) { h6 { font-size:16px; } }@media (min-width: 1281px) { h6 { font-size:px; } }a {color: var(--color-hellblau);}a:hover {color: var(--color-schwarz);}a.ek-link[target="_blank"] {border-bottom: 2px dotted var(--color-hellblau);}.has-color-schwarz-color h1 {color: #1f2023;}.has-color-schwarz-color h2 {color: #1f2023;}.has-color-schwarz-color h3 {color: #1f2023;}.has-color-schwarz-color h4 {color: #1f2023;}.has-color-schwarz-color h5 {color: #1f2023;}.has-color-schwarz-color h6 {color: #1f2023;}.has-color-schwarz-color p {color: #1f2023;}.has-color-schwarz-color ul {color: #1f2023;}.has-color-schwarz-color ol {color: #1f2023;}.has-color-blau-color h1 {color: #24559e;}.has-color-blau-color h2 {color: #24559e;}.has-color-blau-color h3 {color: #24559e;}.has-color-blau-color h4 {color: #24559e;}.has-color-blau-color h5 {color: #24559e;}.has-color-blau-color h6 {color: #24559e;}.has-color-blau-color p {color: #24559e;}.has-color-blau-color ul {color: #24559e;}.has-color-blau-color ol {color: #24559e;}.has-color-hellblau-color h1 {color: #24559e;}.has-color-hellblau-color h2 {color: #24559e;}.has-color-hellblau-color h3 {color: #24559e;}.has-color-hellblau-color h4 {color: #24559e;}.has-color-hellblau-color h5 {color: #24559e;}.has-color-hellblau-color h6 {color: #24559e;}.has-color-hellblau-color p {color: #24559e;}.has-color-hellblau-color ul {color: #24559e;}.has-color-hellblau-color ol {color: #24559e;}.has-color-gruen-color h1 {color: #39842a;}.has-color-gruen-color h2 {color: #39842a;}.has-color-gruen-color h3 {color: #39842a;}.has-color-gruen-color h4 {color: #39842a;}.has-color-gruen-color h5 {color: #39842a;}.has-color-gruen-color h6 {color: #39842a;}.has-color-gruen-color p {color: #39842a;}.has-color-gruen-color ul {color: #39842a;}.has-color-gruen-color ol {color: #39842a;}.has-color-grau-color h1 {color: #707070;}.has-color-grau-color h2 {color: #707070;}.has-color-grau-color h3 {color: #707070;}.has-color-grau-color h4 {color: #707070;}.has-color-grau-color h5 {color: #707070;}.has-color-grau-color h6 {color: #707070;}.has-color-grau-color p {color: #707070;}.has-color-grau-color ul {color: #707070;}.has-color-grau-color ol {color: #707070;}.has-color-mittelgrau-color h1 {color: #dddddd;}.has-color-mittelgrau-color h2 {color: #dddddd;}.has-color-mittelgrau-color h3 {color: #dddddd;}.has-color-mittelgrau-color h4 {color: #dddddd;}.has-color-mittelgrau-color h5 {color: #dddddd;}.has-color-mittelgrau-color h6 {color: #dddddd;}.has-color-mittelgrau-color p {color: #dddddd;}.has-color-mittelgrau-color ul {color: #dddddd;}.has-color-mittelgrau-color ol {color: #dddddd;}.has-color-hellgrau-color h1 {color: #f1f2f4;}.has-color-hellgrau-color h2 {color: #f1f2f4;}.has-color-hellgrau-color h3 {color: #f1f2f4;}.has-color-hellgrau-color h4 {color: #f1f2f4;}.has-color-hellgrau-color h5 {color: #f1f2f4;}.has-color-hellgrau-color h6 {color: #f1f2f4;}.has-color-hellgrau-color p {color: #f1f2f4;}.has-color-hellgrau-color ul {color: #f1f2f4;}.has-color-hellgrau-color ol {color: #f1f2f4;}.has-color-weiss-color h1 {color: #ffffff;}.has-color-weiss-color h2 {color: #ffffff;}.has-color-weiss-color h3 {color: #ffffff;}.has-color-weiss-color h4 {color: #ffffff;}.has-color-weiss-color h5 {color: #ffffff;}.has-color-weiss-color h6 {color: #ffffff;}.has-color-weiss-color p {color: #ffffff;}.has-color-weiss-color ul {color: #ffffff;}.has-color-weiss-color ol {color: #ffffff;}.has-color-hellgruen-color h1 {color: #a9e09e;}.has-color-hellgruen-color h2 {color: #a9e09e;}.has-color-hellgruen-color h3 {color: #a9e09e;}.has-color-hellgruen-color h4 {color: #a9e09e;}.has-color-hellgruen-color h5 {color: #a9e09e;}.has-color-hellgruen-color h6 {color: #a9e09e;}.has-color-hellgruen-color p {color: #a9e09e;}.has-color-hellgruen-color ul {color: #a9e09e;}.has-color-hellgruen-color ol {color: #a9e09e;}button {font-family:Encode;}
.body_wrapper {
margin: 0 auto;
max-width: 1600px;
position: relative;
overflow: hidden;
box-shadow: 0 0 0px
rgba(0,0,0,0.3);
}
.content_width {
max-width: 1220px;
}
@media (min-width: 1220px) {
.content_width {
padding-left: 40px;
padding-right: 40px;
}
}
nav#main-menu ul.main-nav {
max-width: 1220px;
}
.has-color-schwarz-background-color {background-color: #1f2023 !important}.has-color-schwarz-border-color {border-color: #1f2023 !important}.has-color-schwarz-color {color: #1f2023 !important}.has-color-blau-background-color {background-color: #24559e !important}.has-color-blau-border-color {border-color: #24559e !important}.has-color-blau-color {color: #24559e !important}.has-color-hellblau-background-color {background-color: #24559e !important}.has-color-hellblau-border-color {border-color: #24559e !important}.has-color-hellblau-color {color: #24559e !important}.has-color-gruen-background-color {background-color: #39842a !important}.has-color-gruen-border-color {border-color: #39842a !important}.has-color-gruen-color {color: #39842a !important}.has-color-grau-background-color {background-color: #707070 !important}.has-color-grau-border-color {border-color: #707070 !important}.has-color-grau-color {color: #707070 !important}.has-color-mittelgrau-background-color {background-color: #dddddd !important}.has-color-mittelgrau-border-color {border-color: #dddddd !important}.has-color-mittelgrau-color {color: #dddddd !important}.has-color-hellgrau-background-color {background-color: #f1f2f4 !important}.has-color-hellgrau-border-color {border-color: #f1f2f4 !important}.has-color-hellgrau-color {color: #f1f2f4 !important}.has-color-weiss-background-color {background-color: #ffffff !important}.has-color-weiss-border-color {border-color: #ffffff !important}.has-color-weiss-color {color: #ffffff !important}.has-color-hellgruen-background-color {background-color: #a9e09e !important}.has-color-hellgruen-border-color {border-color: #a9e09e !important}.has-color-hellgruen-color {color: #a9e09e !important}
.wp-custom-acf-block-downloads .downloads-item a .icon svg {fill: var(--color-);}.wp-custom-acf-block-downloads .downloads-item a .download-icon svg {fill: var(--color-);}
footer {background-color: var(--color-schwarz);color: var(--color-weiss);}footer #footer-menu a {color: var(--color-weiss);}footer #footer-menu a:hover {color: var(--color-gruen);}footer nav#social-media ul li a {border-color: var(--color-);}footer nav#social-media ul li a svg {fill: var(--color-);}footer nav#social-media ul li a:hover {border-color: var(--color-);}footer nav#social-media ul li a:hover svg {fill: var(--color-);}footer nav#social-media ul li a.rounded {border-radius: px;}.nf-form-cont .nf-field-label label {font-size:16px;}@media (min-width: 768px) { .nf-form-cont .nf-field-label label { font-size:18px; } }@media (min-width: 1281px) { .nf-form-cont .nf-field-label label { font-size:21px; } }}
.wp-block-button a.wp-block-button__link.wp-element-button {
color: var(--color-hellblau);
background-color: var(--color-hellblau);
}
.wp-block-button a.wp-block-button__link.wp-element-button:hover {
color: var(--color-weiss);
background-color: var(--color-schwarz);
}
.wp-block-button.is-style-outline a.wp-block-button__link.wp-element-button {
color: var(--color-schwarz);
border-color: var(--color-schwarz);
}
.wp-block-button.is-style-outline a.wp-block-button__link.wp-element-button:hover {
color: var(--color-weiss);
border-color: var(--color-hellblau);
background-color: var(--color-hellblau);
}
.searchform .search-form input.search-field {
border-color: var(--color-);
font-size: 16px;
font-family: Encode;
}
@media (min-width: 768px) {
.searchform .search-form input.search-field {
font-size: 18px;
}
}
@media (min-width: 1281px) {
.searchform .search-form input.search-field {
font-size: 21px;
}
}
.searchform .search-form .submit-container input.search-submit:hover+span.icon {
background-color: var(--color-);
}
.searchform .search-form .submit-container input.search-submit:hover+span.icon svg {
fill: var(--color-);
}
#menu nav#main-menu ul.main-nav li a {
color: var(--color-schwarz);
font-family: Encode;
font-weight: 600;
}
#menu nav#main-menu ul.main-nav li.menu-item-has-children li a {
color: var(--color-grau);
font-family: Encode;
font-weight: 600;
font-size: 16px;
}
@media (min-width: 768px) {
#menu nav#main-menu ul.main-nav li.menu-item-has-children li a {
font-size: 16px;
}
}
@media (min-width: 1281px) {
#menu nav#main-menu ul.main-nav li.menu-item-has-children li a {
font-size: 16px;
}
}
#menu nav#main-menu ul.main-nav li a:hover {
color: var(--color-schwarz);
}
#menu nav#main-menu ul.main-nav li a:hover::after {
background-color: var(--color-schwarz);
}
#menu nav#main-menu ul.main-nav li.current-menu-item a,
#menu nav#main-menu ul.main-nav li.current-menu-item a:hover {
color: var(--color-schwarz);
}
#menu nav#main-menu ul.main-nav li.current-menu-item a::after ,
#menu nav#main-menu ul.main-nav li.current-menu-item a:hover::after{
background-color: var(--color-schwarz);
}
#menu nav#main-menu ul.main-nav li.current-menu-item a:hover {
color: var(--color-schwarz);
}
#menu nav#main-menu ul.main-nav li.menu-item-has-children > a:after {
border-top-color: var(--color-schwarz);
border-right-color: var(--color-schwarz);
}
#menu nav#main-menu ul.main-nav li.menu-item-has-children > a:hover:after {
border-top-color: var(--color-schwarz);
border-right-color: var(--color-schwarz);
}
#menu nav#main-menu ul.main-nav li.menu-item-has-children.menu-active > a {
border-top-color: var(--color-schwarz);
border-right-color: var(--color-schwarz);
}
#menu nav#main-menu ul.main-nav li.menu-active > a::after {
border-top-color: var(--color-schwarz);
border-right-color: var(--color-schwarz);
}
@media (min-width: 1281px) {
#menu nav#main-menu ul.main-nav li.menu-item-has-children ul.sub-menu:before {
background-color: var(--color-schwarz);
}
}
#menu nav#main-menu ul.main-nav li.menu-item-has-children ul.sub-menu li a {
color: var(--color-grau);
}
#menu nav#main-menu ul.main-nav li.menu-item-has-children ul.sub-menu li a:hover {
color: var(--color-schwarz);
}
#menu nav#main-menu ul.main-nav li.menu-item-has-children ul.sub-menu li.current_page_item a {
color: var(--color-schwarz);
}
#menu nav#main-menu ul.main-nav li.menu-item-has-children.menu-active a {
color: var(--color-schwarz);
}
#menu nav#main-menu ul.main-nav li.menu-item-has-children.menu-active a:after {
background-color: var(--color-schwarz);
}
main.overlay:before {
background-color: ;
}
#menu #menubutton button {
color: var(--color-schwarz);
}
#menu #menubutton button:before {
background-color: var(--color-schwarz);
}
#menu #menubutton button:after {
background-color: var(--color-schwarz);
}
#menu #menubutton.open button {
color: var(--color-schwarz);
}
#menu #menubutton.open button:before {
background-color: var(--color-schwarz);
}
#menu #menubutton.open button:after {
background-color: var(--color-schwarz);
}
.controll-feedback-important {
opacity: 0 !important;
}
#terms_and_conditions {
opacity: 0 !important; 
}