/*!
Theme Name: Die kleinen Räuber
Theme URI: https://diekleinenraeuber.info
Author: webcoon
Author URI: https://www.webcoon.de
Description: Theme für die kleinen Räuber
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: raeuber
Tags: raeuber

*/


/*--------------------------------------------------------------
# FONT
--------------------------------------------------------------*/

@font-face {
	font-family: 'ShadowsIntoLight';
	src: url('/wp-content/themes/raeuber/assets/fonts/ShadowsIntoLight.ttf') format('truetype');
}

@font-face {
	font-family: 'Fredoka';
	src: url('/wp-content/themes/raeuber/assets/fonts/Fredoka-SemiBold.ttf') format('truetype');
}

@font-face {
	font-family: 'Rubik';
	src: url('/wp-content/themes/raeuber/assets/fonts/Rubik-VariableFont_wght.ttf') format('truetype');
}




/*--------------------------------------------------------------
# VARIABLE
--------------------------------------------------------------*/

:root {
	--maxwidth: 1200px;
	--width: 90%;
	--header-height: 100px;
	--text: #000;
	--grau: #777;
	--blau: #507fad;
	--red: #d8383d;
	--dark-red: #b7272b;
}



/*--------------------------------------------------------------
# GLOBAL
--------------------------------------------------------------*/

body {
    font-family: 'Rubik', sans-serif;
	font-weight: 300;
	color: var(--grau);
	line-height: 1.6em;
	font-size: 18px;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

*, *:after, *:before {
	box-sizing: border-box;
}

a {
	color: var(--blau);
	text-decoration: none;
}

p a {
	color: var(--blau);
	text-decoration: none;
}

a:hover, p a:hover {
	text-decoration: underline;
}

p {
	margin: 0 0 15px;
}

input, textarea {
	box-shadow: unset;
	outline: unset;
}

strong {
	font-weight: 600;
}

img, video {
	width: 100%;
	height: auto;
	display: block;
}

.overflow-hidden, .overflow-hidden body {
	overflow: hidden;
}

h1 {
	font-size: 44px;
	line-height: 1.2em;
	font-weight: 600;
	margin: 0 0 20px;
	color: var(--blau);
	font-family: 'Fredoka', sans-serif;
}

h2 {
	font-size: 44px;
	line-height: 1.2em;
	font-weight: 600;
	margin: 0 0 20px;
	color: var(--blau);
	font-family: 'Fredoka', sans-serif;
}

h3 {
	font-size: 44px;
	line-height: 1.2em;
	font-weight: 200;
	margin: 0 0 20px;
	color: var(--blau);
	font-family: 'Fredoka', sans-serif;
}

h4, .fake-h4 h1 {
	font-size: 28px;
	line-height: 1.2em;
	font-weight: 700;
	margin: 0 0 20px;
	color: var(--red);
	font-family: 'ShadowsIntoLight', sans-serif;
}

h5 {
	font-size: 44px;
	line-height: 1.2em;
	font-weight: 200;
	margin: 0 0 20px;
	color: var(--dark-green);
}

#content ul {
	list-style: none;
	padding: 0;
	margin: 0 0 15px;
}

#content li {
	padding-left: 30px;
	margin-bottom: 2px;
	position: relative;
}

#content li::before {
	content: "";
	background: url("/wp-content/themes/raeuber/assets/svg/check.svg");
	background-size: auto;
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 0;
	z-index: 1;
	display: block;
}

.upc {
	text-transform: uppercase;
}


/*--------------------------------------------------------------
# BUILDER
--------------------------------------------------------------*/

.min-height-img img {
	max-height: 80vh;
	overflow: hidden;
	min-height: 350px;
	object-fit: cover;
}

.section {
	padding-bottom: 0px;
}

.section > .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0px auto;
	padding: 100px 0;
	width: var(--width);
	max-width: var(--maxwidth);
	justify-content: space-between;
	position: relative;
}

.row-1 .col {
	width: 100%;
}

.row-2 .col {
	width: calc(50% - 30px);
}

.row-2-1 .col:first-child, .row-2-2 .col:last-child {
	width: calc(64% - 30px);
}

.row-2-1 .col:last-child, .row-2-2 .col:first-child {
	width: calc(36% - 30px);
}

.row-3 .col {
	width: calc(33.3% - 30px);
}

.row-4 .col {
	width: calc(25% - 30px);
}

.row > .col > div {
	margin-bottom: 30px;
}

.row > .col > div:last-child {
	margin-bottom: 0px;
}

.row .row {
	margin: 0;
	padding: 0;
}

.section > .fullwidth {
	width: 100% !important;
	max-width: unset !important;
	border: 0 !important;
}

.section > .no-padding {
	padding: 0 !important;
}

.section > .no-padding.row-2 .col{
	width: 50%;
}

.col-3 {
	width: calc(33.3% - 30px);
}

.col-4 {
	width: 33.33%;
}

.col-6 {
	width: 50%;
}

.col-12 {
	width: 100%;
}

.center {
	text-align: center;
}

.middle {
	align-items: center;
}

.between {
	display:flex;
	justify-content: space-between;
}

.remove-padding-bottom {
	padding-bottom: 0 !important;
}

.remove-padding-top {
	padding-top: 0 !important;
}

.wc-slider {
	position: relative;
}

.swiper {
	position: relative;
	overflow: hidden;
}

.swiper-wrapper {
	display: flex;
}

.swiper-slide {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	position: relative;
	
}

.swiper-pagination {
	position: absolute;
	bottom: -40px;
	left: 0;
	right: 0;
	align-items: center;
	display: flex;
	z-index: 99;
	justify-content: center;
}

.swiper-pagination-bullet {
	height: 12px;
	width: 12px;
	margin: 0 3px;
	border: 1px solid #fff;
	display: block;
	border-radius: 100%;
	cursor: pointer;
}

.swiper-pagination-bullet-active {
	background: #fff;
}

.swiper-button-next, .swiper-button-prev {
	height: 60px;
	width: 60px;
	position: absolute;
	z-index: 1;
	top: 50%;
	overflow: hidden;
	cursor: pointer;
	background: #eb9601;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.swiper-button-next:before, .swiper-button-prev:before {
	content:"";
	height: 20px;
	width: 20px;
	position: absolute;
	z-index: 1;
	top: 50%;
	overflow: hidden;
	cursor: pointer;
	background: url("/wp-content/uploads/arrow.png");
	background-size: cover;
	background-position: center;
	transform: translateY(-50%) rotate(-90deg);
	border-radius: 2px;

}

.swiper-button-prev:before {
	transform: translateY(-50%) rotate(90deg);

}

.swiper-button-next {
	right: 0px;
	transform: translateY(-50%);
}

.swiper-button-prev {
	left: 0px;
	transform: translateY(-50%);
}

.swiper-button-disabled {
	opacity: 0;
	visibility: hidden;
}

.embed-container { 
	position: relative; 
	padding-bottom: 56.25%;
	overflow: hidden;
	max-width: 100%;
	height: auto;
} 

.embed-container iframe,
.embed-container object,
.embed-container embed { 
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


a.button {
	padding: 14px 40px;
	background-color: var(--red);
	color: #fff;
	border-radius: 100px;
	font-weight: 600;
	display: inline-block;
	margin-top: 20px;
	transition: background-color .4s ease;
	text-decoration: none !important;
}

a.button:hover {
	background: var(--dark-red);
}

a.button.red {
	background-color: var(--red);
}

/*--------------------------------------------------------------
# DIE KLEINEN RÄUBER - SECTIONS & CO
--------------------------------------------------------------*/

#content {
	padding-top: var(--header-height);
}

.subline {
	margin-bottom: 15px !important;
}

.subline h4 {
	margin-bottom: 0px !important;
}

.light-blue-bg {
	background: #e1e9f1;
}

.border-form img {
	border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
}

.white-text p {
	color: #fff;
}

.h-bg {
	font-size: 44px;
	line-height: 1.2em;
	font-weight: 700;
	margin: 0 0 10px;
	display: block;
	color: #fff;
	font-family: 'Janitor', sans-serif;
	position: relative;
	width: fit-content;
}

.h-bg::after {
	content: "";
	position: absolute;
	width: calc(100% + 20px);
	height: calc(100% + 5px);
	display: block;
	z-index: 0;
	margin-left: -10px;
	margin-top: -2.5px;
	top: 0;
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 954 119.1' style='enable-background:new 0 0 954 119.1;' preserveAspectRatio='none' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%232A4E25;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M475.3,3c0,0.2,0,0.5,0,0.7c-64.6-0.5-129.3-1-193.9-1.6C215.1,1.6,148.8,0.9,82.5,0.3 C68.6,0.2,54.8-0.3,41,0.2C13.4,1.1-5.1,25.1,1.3,50.7c4.6,18.4,20.4,30.4,41.1,30.9c13.3,0.3,26.7,0.2,40,0.2 c2.7,0,4.5,0.2,5.3,3.6c5.2,22.3,20.7,34,43.6,33.6c44.6-0.8,89.3-1.8,133.9-2.1c84-0.6,168-0.6,251.9-1.1 c85.1-0.5,170.3-1.2,255.4-2.2c21-0.2,41.9-1.2,62.6-6c16.8-3.9,33.8-7.1,50.6-11.2c14.4-3.5,29-6.6,42.7-11.9 c17.8-7,27.6-25.6,25.1-43C950.7,22.3,937.2,8,917.1,6.2c-21.5-2-43.2-3-64.9-3C726.6,2.8,601,3,475.3,3z'/%3E%3Cpath class='st0' d='M475.3,3C601,3,726.6,2.8,852.3,3.1c21.6,0,43.3,1,64.9,3c20.1,1.9,33.6,16.1,36.5,35.5 c2.6,17.4-7.3,36-25.1,43c-13.7,5.4-28.3,8.5-42.7,11.9c-16.8,4.1-33.8,7.2-50.6,11.2c-20.6,4.8-41.6,5.8-62.6,6 c-85.1,1-170.3,1.7-255.4,2.2c-84,0.5-168,0.5-251.9,1.1c-44.6,0.3-89.3,1.3-133.9,2.1c-23,0.4-38.4-11.3-43.6-33.6 c-0.8-3.4-2.6-3.6-5.3-3.6c-13.3,0-26.7,0.1-40-0.2C21.7,81.2,5.8,69.1,1.3,50.7C-5.1,25.1,13.4,1.1,41,0.2 c13.8-0.5,27.7,0,41.5,0.1c66.3,0.6,132.6,1.2,198.9,1.8c64.6,0.6,129.3,1,193.9,1.6C475.3,3.5,475.3,3.2,475.3,3z'/%3E%3C/g%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.h-bg-2::after {
	background-image: url("data:image/svg+xml, %3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1211.6 134.5' style='enable-background:new 0 0 1211.6 134.5;' preserveAspectRatio='none' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%232a4e25;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M47.3,88.6c-4.9-0.5-9.2-0.7-13.4-1.4c-21.1-3.9-35.3-21.9-33.8-43C1.6,23.7,18.3,7.4,39.5,6.8 c19-0.5,38-0.4,57,0.3c33.3,1.2,66.6,2.6,99.9,4.5c37.6,2.2,75.1,5.1,112.7,7.5c34.2,2.2,68.5,5.4,102.8,5.9 c27.8,0.4,55.6-2.4,83.3-3.7c27.3-1.3,54.6-2.7,81.9-3.8c70.3-2.8,140.5-5,210.8-8.3c34.3-1.6,68.4-5.6,102.6-7.9 c18.8-1.2,37.6-1.5,56.5-1.3c37.8,0.4,75.6,2.1,113.5,2.2c31.8,0.1,63.6-1.4,95.4-2c6.8-0.1,13.8-0.2,20.4,1 c17,3,29,12.6,33.7,29.5c4.8,17.4-0.6,32.4-14.3,43.4c-19.7,15.9-41.4,27.4-68,25.7c-4.1-0.3-8.5,1.1-12.5,2.6 c-20.1,7.9-40.5,13.5-62.6,13.4c-96.3-0.4-192.6,0.1-289-0.4c-77.8-0.4-155.6-1.6-233.4-3.1c-39-0.8-77.9-4-116.9-4.4 c-37.6-0.4-75.3,1-112.9,2.2c-25.3,0.8-50.6,2-75.8,4.6c-17.8,1.8-35.6,5.2-52.9,9.8c-27.8,7.4-56.1,9.9-84.6,9.9 c-22.6,0-39.8-18.3-39.8-41C47.3,92,47.3,90.6,47.3,88.6z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.h-bg-3::after {
	background-image: url("data:image/svg+xml, %3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 774.1 113.6' style='enable-background:new 0 0 774.1 113.6;' preserveAspectRatio='none' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%232a4e25;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M423,106.5c-66,0-132-0.6-197.9,0.3c-29.1,0.4-58.1,4.1-87.2,5.3c-27.6,1.2-55.3,2-82.9,1.3 c-28.4-0.7-49.4-19.3-54-45.2C-4.6,37.9,16.3,11.5,47.1,10c13.9-0.7,27.6,0.2,41.1,4c3.4,1,7.2,1.2,10.8,1 c26.8-1,53.7-4.1,80.3-2.7c46.9,2.5,93.6,0.9,140.4,0.3c58.1-0.8,116.3-2,174.3-5.2c73.6-4,147.1-5.9,220.8-7.3 c7.8-0.1,15.7-0.1,23.4,0.9C760,3.6,775,21.7,774.1,43.2c-0.9,20.9-17.9,37.5-39.4,38.4c-7.3,0.3-14.7,0.2-22,0.1 c-2.9,0-4.4,0.9-5.5,3.7c-7.6,20-25.7,30.1-46.9,26.9c-6.6-1-13.2-1.4-19.8-1.6c-58.5-1.6-116.9-3.1-175.4-4.5c-14-0.3-28,0-42,0 C423,106.3,423,106.4,423,106.5z'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.h-bg span {
	position: relative;
	z-index: 1;
}

.width-580 {
	max-width: 580px !important;
}

.width-720 {
	max-width: 720px !important;
}

.col-padding-2 .col:nth-child(2) {
	max-width: calc(var(--maxwidth) / 2);
	margin-right: auto;
	width: 45%;
	padding: 60px 40px;
}

.col-padding-1 .col:nth-child(1) {
	padding: 60px 40px;
}


/*--------------------------------------------------------------
# HERO
--------------------------------------------------------------*/

.hero-slider .swiper-slide {
	height: 80vh;
	overflow: hidden;
	min-height: 650px;
	display: flex;
}


.hero-slider .slide-inner {
	width: 90%;
	max-width: 1200px;
	margin: auto;
	padding: 120px 0 100px;
}

.slider-content, .hero-content {
	max-width: 600px;
	width: 90%;
	position: relative;
	z-index: 1;
}
.slider-content:before, .hero-content:before {
	content: "";
	background: url("/wp-content/themes/raeuber/assets/svg/shape-1.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: calc(100% + 300px);
	height: calc(100% + 280px);
	position: absolute;
	left: -100px;
	top: -200px;
	bottom: 0;
	z-index: -1;
	transform: rotate(-25deg);
}

.hero-slider ._titel {
	color: #fff;
	max-width: var(--maxwidth) / 2;
	font-family: 'ShadowsIntoLight', sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2em;
}

.hero-slider ._text {
	color: #fff;
	max-width: 450px;
	margin: 15px 0 30px;
	font-size: 52px;
	line-height: 1.2em;
	font-weight: 600;
	font-family: 'Fredoka', sans-serif;
}

.hero-slider a.button {
	background-color: #fff;
	color: var(--blau);
}

.hero-slider ._image {
	position: absolute;
	width: 100vw;
	height: 100%;
	z-index: -1;
	top: 0;
	left: 0;
}

.hero-slider ._image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
}

.hero-slider ._image:after {
	display: none !important;
	content:"";
	width: 60vw;
	height: 100%;
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgb(234, 234, 234) 50%, rgba(147, 147, 147, 0) 100%);
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
}

.hero-slider ._image:before {
	content:"";
	background: url("/wp-content/themes/raeuber/assets/svg/mask-bottom.svg");
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;
	width: clamp(600px, 102vw, 102vw);
	height: 101%;
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	z-index: 1;
	margin: auto;
	transform: translateX(-50%);
}

.hero-slider ._buttons {
	display: flex;
}

.hero {
	position: relative;
}

.scrolldown {
	width: 60px;
	display: block;
	height: 60px;
	background: #eb9601;
	margin: auto;
	padding: 20px;
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	border-radius: 100%;
	z-index: 2;
}

.hero-image {
	height: 80vh;
	overflow: hidden;
	min-height: 650px;
	position: relative;
	display: flex;
}

.divider-bottom.wc-image {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

.divider-bottom.wc-image img {
	height: 100%;
	object-fit: cover;
}

.divider-bottom.wc-image::before {
	content: "";
	background: url("/wp-content/themes/raeuber/assets/svg/mask-bottom.svg");
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;
	width: clamp(600px, 102vw, 102vw);
	height: 101%;
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	z-index: 1;
	margin: auto;
	transform: translateX(-50%);
}

.wc-imgtext {
	position: relative;
	z-index: 2;
}

.hero-inner {
	width: var(--width);
	max-width: var(--maxwidth);
	justify-content: space-between;
	position: relative;
	margin: auto;
}

.hero-inner ._headline h4 {
	color: #fff;
	font-family: 'ShadowsIntoLight', sans-serif;
	font-size: 28px;
	font-weight: 700;
	margin: 0;
	line-height: 1.2em;
}

.hero-inner ._text {
	color: #fff;
	max-width: 450px;
	margin: 15px 0 30px;
	font-size: 52px;
	line-height: 1.2em;
	font-weight: 600;
	font-family: 'Fredoka', sans-serif;
}

.hero-inner a.button {
	background-color: #fff;
	color: var(--blau);
}



/*--------------------------------------------------------------
# STARTSEITE
--------------------------------------------------------------*/

.divider {
	padding: 100px 0 140px;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.divider:before {
	content:"";
	background: url("/wp-content/themes/raeuber/assets/svg/mask-top.svg");
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
	width: clamp(600px, 102vw, 102vw);
	height: 101%;
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	z-index: -1;
	margin: auto;
	transform: translateX(-50%);
}

.divider:after {
	content:"";
	background: url("/wp-content/themes/raeuber/assets/svg/mask-bottom.svg");
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;
	width: clamp(600px, 102vw, 102vw);
	height: 101%;
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	z-index: -1;
	margin: auto;
	transform: translateX(-50%);
}

.textbox {
	text-align: center;
}

.textbox ._image {
	margin: 15px auto;
}

.textbox h3 {
	font-size: 32px;
}

.textbox ._image img {
	max-height: 100px;
}

.textbox ._button {
	display: none;
}

.vorteile-bullets li {
	color: var(--blau);
	margin-bottom: 8px !important;
}

.vorteile-bullets li:last-child {
	margin-bottom: 0px !important;
}

.swiper-kinderkrippen {
	max-width: calc(100% - 140px);
	margin: 50px auto 0;
}

.swiper-kinderkrippen ._titel {
	font-size: 20px;
	line-height: 1.2em;
	font-weight: 600;
	margin: 0 0 20px;
	color: var(--blau);
	font-family: 'Fredoka', sans-serif;
	text-decoration: unset !important;
}

.swiper-kinderkrippen ._image img {
	max-width: 280px;
	margin: 0 auto 20px;
	border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%;
	max-height: 250px;
	object-fit: cover;
}

.pagination-kinderkrippen .swiper-pagination-bullet {
	border-color: var(--blau);
}

.pagination-kinderkrippen .swiper-pagination-bullet-active {
	background: var(--blau);
}


/*--------------------------------------------------------------
# KRIPPEN
--------------------------------------------------------------*/

.wc-icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.wc-icons ._icon {
	width: calc(25% - 30px);
}

.icon-img {
	position: relative;
	max-width: 140px;
	margin: auto;
}

.icon-img span {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-family: 'Fredoka', sans-serif;
	font-size: 50px;
	font-weight: 500;
}

.icon-text {
	text-align: center;
	color: var(--blau);
	font-size: 18px;
	font-weight: 700;
	font-family: 'Fredoka', sans-serif;
	margin-top: 10px;
}

.sidebar-box h4 {
	color: #fff;
}

.sidebar-box .spacing {
	margin-bottom: 50px;
}

.kontakt-box {
	margin-top: 50px;
	font-weight: 600;
}

.kontakt-box ._image {
	margin-bottom: 15px;
}


.kontakt-box ._image img {
	max-width: 250px;
	margin: auto;
	border-radius: 100%;
}


/*--------------------------------------------------------------
# KONTAKT
--------------------------------------------------------------*/

.sidebar-box {
	padding: 50px;
	background: var(--blau);
	color: #fff;
	margin: 0 0 auto;
	border-radius: 8px;
}

.sidebar-box h3 {
	color: #fff;
}

.sidebar-box a {
	color: #fff;
	text-decoration: underline;
}

/*--------------------------------------------------------------
# INFORMATIONSSEITEN
--------------------------------------------------------------*/

.hero-info {
	background: var(--blau);
	position: relative;
	color: #fff;
}

.hero-info h1, .hero-info h4{
	color: #fff;
}

.hero-info::before {
	content: "";
	background: url("/wp-content/themes/raeuber/assets/svg/mask-bottom.svg");
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;
	width: 100vw;
	height: 101%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
}


/*--------------------------------------------------------------
# CONTACTFORM
--------------------------------------------------------------*/

.contactform a {
	color: var(--grau);
	font-weight: 500;
}

.contactform input:not(.checkbox), .contactform textarea {
	width: 100%;
	border: 0;
	padding: 18px 20px;
	background: #e1e9f1;
	font-family: 'Rubik', sans-serif;
	font-weight: 300;
	color: var(--blau);
	line-height: 1.6em;
	font-size: 18px;
	border-radius: 8px;
}

.pflicht.error {
	border-color: #ec6161 !important;
}

.contactform textarea {
	height: 100%;
	min-height: 180px;
	font-family: 'Rubik', sans-serif;
	font-weight: 300;
	color: var(--blau);
	line-height: 1.6em;
	font-size: 18px;
}

.contactform .cf-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.contactform .cf-row .input-element {
	margin-bottom: 15px;
}

.contactform .full-height {
	height: calc(100% - 15px);
}

.contactform .cf-col-6 {
	width: calc(50% - 20px);
}

.contactform .cf-col-12 {
	width: 100%;
}

.contactform #privacy {
	display: none !important;
}

.contactform .cf-row .submit-element .cf-senden {
	width: auto;
	background: #eb9601;
	color: #fff;
	font-family: 'Rubik', sans-serif;
	font-weight: 600;
	font-size: 18px;
	cursor: pointer;
	padding: 14px 40px;
	border: 1px solid #eb9601;
	margin: 20px auto 0 0;
	display: block;
	border-radius: 100px;
}

.contactforminfo {
	display: none;
}

.contactforminfo > div {
	padding: 10px;
	border-radius: 6px;
	color: #fff;
	margin-bottom: 20px;
}

.contactforminfo.error {
	background: #ec6161;
	padding: 10px;
	border-radius: 6px;
	color: #fff;
	margin-bottom: 20px;
}

.contactforminfo span {
	margin-right: 5px;
}


.contactforminfo .success {
	background: #5bca4b;
}

.contactforminfo .error {
	background: #ec6161;
}



/*--------------------------------------------------------------
# NEUIGKEITEN
--------------------------------------------------------------*/

.news-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.news-wrapper .news {
	box-shadow: 0 5px 15px rgba(0,0,0,.12);
	width: calc(50% - 25px);
	background: #fff;
	padding: 30px;
	border-radius: 8px;
	margin: 25px 0 35px;
	overflow: hidden;
}

.news-image {
	display: block;
	position: relative;
	height: 200px;
	width: calc(100% + 60px);
	margin: -30px -30px 30px;
}

.news-image img {
	height: 100%;
	object-fit: cover;
}

.news-image::before {
	content: "";
	background: url("/wp-content/themes/raeuber/assets/svg/mask-bottom.svg");
	background-size: contain;
	background-position: bottom;
	background-repeat: no-repeat;
	width: calc(100% + 4px);
	height: 101%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
}

.news-titel h3 {
	font-size: 30px;
}

.news-button {
	width: fit-content;
	background: var(--red);
	color: #fff;
	font-family: 'Rubik', sans-serif;
	font-weight: 600;
	font-size: 18px;
	cursor: pointer;
	padding: 14px 40px;
	border: 1px solid var(--red);
	margin: 30px auto 0px 0px;
	display: block;
	border-radius: 100px;
}



/*--------------------------------------------------------------
# SONSTIGES
--------------------------------------------------------------*/

.kontakt-team {
	text-align: center;
}

.kontakt-team .row {
	max-width: 860px;
	margin: auto;
}

.kontakt-team .text-row {
	margin-bottom: 50px;
}

.kontakt-team .img-rund img {
	border-radius: 100%;
	max-width: 320px;
	margin: auto;
}

.kontakt-team .blau h4 {
	color: var(--blau);
}


#error {
	padding: 100px;
	text-align: center;
	max-width: 1200px;
	width: 90%;
	margin: auto;
}

.error-404 {
	margin-bottom: 25px;
}


/*--------------------------------------------------------------
# HEADER
--------------------------------------------------------------*/

#header {
	position: absolute;
	width: 100%;
	background: #fff;
	z-index: 99;
	height: var(--header-height);
	padding: 10px 0;
	transition: all 0.4s ease;
	border-bottom: 1px solid #e6e6e6;
}

#header.scroll-up {
	position: fixed;
	top: 0px;
}

#header.scroll-down {
	top: calc(var(--header-height) * -1);
}

.header-inner {
	max-width: var(--maxwidth);
	width: 90%;
	height: calc(var(--header-height) - 20px);
	display: flex;
	margin: auto;
	justify-content: space-between;
}

.header-logo, .header-logo .custom-logo-link, .header-logo .custom-logo-link .custom-logo {
	height: 100%;
	display: block;
	width: auto;
}



#menu-main {
	display: flex;
	justify-content: flex-end;
}

#header ul {
	padding: 0;
	list-style: none;
	margin: 0;
}

#header ul li {
	margin-right: 20px;
	padding: 15px 0;
}

#header ul li:last-child, #header ul li li {
	margin-right: 0px;
}

#menu-main > li > a {
	font-size: 16px;
	font-weight: 500;
	color: var(--grau);
	position: relative;
	text-decoration: none !important;
}

.header-menu {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mobil-menu-button {
	display: none;
}

#menu-main > .menu-item > a:before {
    content:"";
    display: block;
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--red);
    margin: 0 auto;
    transition: .5s cubic-bezier(.4,-.01,0,.99);
}

#menu-main > .menu-item:hover > a:before, #menu-main > .current-menu-item > a:before{
    width: 100%;
}

#menu-main li > .sub-menu {
    position: absolute;
    z-index: 999;
    background: #fff;
    opacity: 0;
    margin-top: 65px;
    visibility: hidden;
    transition: opacity 0.3s ease, margin-top 0.4s ease, visibility 0s ease 0.2s;
    box-shadow: 0px 0px 20px 10px #0000001c;  
    display: block;
    padding: 20px !important;
    width: 210px;
}

#menu-main .mega-menu > .sub-menu {
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#menu-main .mega-menu > .sub-menu li {
    margin-right: 10px;
    width: calc(14.2% - 8.3px);
}

#menu-main .mega-menu > .sub-menu li:last-child {
    margin-right: 0px;
}

#menu-main .mega-menu > .sub-menu li a {
    display: block;
    text-align: center;
    margin-bottom: 0;
	text-decoration: unset !important;
}

#menu-main .mega-menu > .sub-menu li a img {
    display: block;
    margin-bottom: 6px;
	border-radius: 8px;
}

.menu-title {
	font-size: 16px;
	font-weight: 500;
	color: var(--grau);
	text-decoration: unset !important;
}

#menu-main > .mega-menu::after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 15px 15px 15px;
    border-color: transparent transparent transparent transparent;
    position: absolute;
    margin-top: 50px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: border-color 0.3s ease, margin-top 0.4s ease, visibility 0s ease 0.2s;
    display: block;
}

#menu-main li .sub-menu a {
    padding-left: 0;
    display: block;
    margin-bottom: 10px;
}

#menu-main li .sub-menu > li:last-child a{
    margin-bottom: 0px;
}

#menu-main li .sub-menu a:hover {
    text-decoration: underline;
}

#menu-main li > .sub-menu .sub-menu {
    position: relative;
    z-index: 999;
    background: #fff;
    opacity: 1;
    margin-top: 55px;
    visibility: unset;
    transition: unset;
    box-shadow: unset;  
    display: block;
    padding: 0px !important;
    left: 0;
    width: unset;
}

#menu-main .mega-menu {
    position: unset;
}

#menu-main .mega-menu .sub-menu {
    padding: 20px 30px !important;
    display: flex;
	width: 90%;
	left: 0;
	right: 0;
	max-width: var(--maxwidth);
	margin-left: auto;
	border-radius: 10px;
	margin-right: auto;
}

#menu-main > .mega-menu > .sub-menu::before {
    left: 45%;
}

#menu-main .mega-menu .sub-menu > .menu-img {
    margin-right: 50px;
    width: 270px;
}

#menu-main .mega-menu .sub-menu > .menu-img:last-child {
    margin-right: 0px;
}

#menu-main .main-link a {
    font-weight: 600;
    font-size: 20px !important;
    margin-bottom: 15px !important;
    display: block;
}

#menu-main > .current-menu-ancestor > a, .direct-link.current-menu-item > a {
    position: relative;
}

#menu-main > .current-menu-ancestor > a:before, .direct-link.current-menu-item > a:before {
    width: 100%;
}

@media (min-width: 980px) {
	#menu-main li:hover .sub-menu {
		opacity: 1;
		visibility: visible;
		margin-top: 45px;
		transition: opacity 0.3s ease, margin-top 0.6s ease, visibility 0s ease 0s;
	}
	
	#menu-main > .mega-menu:hover::before {
		content: "";
		height: 35px;
		position: absolute;
		margin-top: 40px;
		opacity: 0;
		display: block;
		width: 100%;
		max-width: 180px;
	}

	#menu-main > .mega-menu:hover::after {
		opacity: 1;
		border-color: transparent transparent #ffffff transparent;
		visibility: visible;
		margin-top: 30px;
		transition: border-color 0.6s ease 0.1s, margin-top 0.6s ease 0.1s, visibility 0s ease 0s;
	}

	.menu-button a {
		padding: 14px 40px;
		background-color: var(--blau);
		color: #fff !important;
		border-radius: 100px;
		margin-left: 10px;
	}
	
	.menu-button a:before {
		display: none !important;
	}
}


/*--------------------------------------------------------------
# FOOTER
--------------------------------------------------------------*/

#footer {
	color: #fff;
	width: 100vw;
	padding: 200px 0 50px;
	background: var(--blau);
	position: relative;
	z-index: 1;
}

#footer:before {
	content:"";
	background: url("/wp-content/themes/raeuber/assets/svg/footer-mask.svg");
	background-size: contain;
	background-position: top;
	background-repeat: no-repeat;
	width: 100vw;
	height: 100%;
	position: absolute;
	left: 0;
	top: -1px;
	bottom: 0;
	z-index: -1;
}

.waschbaer {
	position: absolute;
	width: 20vw;
	right: 5vw;
	top: 1.85vw;
	transform: rotate(-2.5deg);
}

#footer h6 {
	font-size: 20px;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 30px;
}

#footer a {
	color: #fff;
	display: block;
}

#footer > .row {
	display: flex;
	flex-wrap: wrap;
	margin: 60px auto;
	width: var(--width);
	max-width: var(--maxwidth);
	justify-content: space-between;
	position: relative;
}

#footer > .row-3 .col:first-child {
	margin-right: 60px;
}

.footer-logo {
	max-width: 200px;
	width: 70%;
	display: block;
	filter: brightness(100);
}


.footer-socials {
	display: flex;
	margin-top: 30px;
}

.footer-social {
	height: 36px;
	width: 36px;
	margin-right: 12px;
}


/*--------------------------------------------------------------
# RESPONSIVE
--------------------------------------------------------------*/

.mobile-back {
	display: none;
}

/*
@media all and (min-width: 980px) and (max-width: 1428px) {

}
*/



@media all and (max-width: 1400px) {


}


@media (max-width: 1100px) and (min-width: 980px) {
	.header-logo {
		width: 120px;
	}

	#menu-main > li > a {
		font-size: 15px;
	}
}

@media all and (max-width: 980px) {

	body {
		font-size: 16px;
	}

	:root {
		--header-height: 80px;
	}

	body.no-scroll {
		overflow: hidden;
	}

	.section > .row {
		padding: 60px 0;
	}

	.col {
		width: 100% !important;
		margin-bottom: 40px;
	}

	.wc-button a.button {
		margin-top: 0px;
	}

	.row .col:last-child {
		margin-bottom: 0px;
	}

	h1, h2, h3 {
		font-size: 32px;
	}

	h4, .fake-h4 h1 {
		font-size: 20px;
	}
	



	/*--------------------------------------------------------------
	# HEADER
	--------------------------------------------------------------*/

	.no-scroll #header{
		position: fixed;
		top: 0px;
	}

	.header-menu {
		display: none;
	}

	.header-inner {
		justify-content: flex-start;
	}

	.mobil-menu-button {
		position: absolute;
		right: 5%;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		bottom: 0;
		margin: auto;
		height: 40px;
		justify-content: space-around;
		padding: 12px 0;
		cursor: pointer;
		z-index: 9;
	}

	.line--burger {
		width: 42px;
		height: 2px;
		display: block;
		background: var(--grau);
		transition: all 0.2s ease !important;
	}

	.line--burger:last-child {
		width: 30px;
	}

	.mobil-menu-button.active .line--burger:first-child {
		transform: rotate(-45deg);
		width: 32px !important;
	}

	.mobil-menu-button.active .line--burger:last-child {
		transform: rotate(45deg);
		margin-top: -14px;
		width: 32px !important;
	}

	.header-menu{
		background: #fff;
		color: var(--text);
		position: fixed;
		left: 0;
		right: 0;
		top: 80px;
		bottom: 0;
		padding: 30px 7% 30px;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: flex-start;
		transform: translateX(110%);
		transition: all 0.45s ease;
	}

	.header-menu.active {
		transform: translateX(0);
	}

	.mobile-back {
		position: relative;
		display: flex !important;
		align-items: center;
		padding-left: 15px;
		cursor: pointer;
		margin-bottom: 25px;
		width: 100%;
		color: var(--grau);
		font-weight: 500;
	}

	.mobile-back::after {
		content: "";
		position: absolute;
		left: 0;
		height: 10px;
		width: 10px;
		border-left: 1px solid;
		border-bottom: 1px solid;
		transform: rotate(45deg);
	}

	.header-menu ul {
		padding: 0;
		list-style: none;
	}

	#menu-main {
		display: block;
	}

	#header .header-menu ul li {
		margin: 0 !important;
		padding-bottom: 20px;
	}

	#header .header-menu .sub-menu li {
		width: 46.5% !important;
		padding: 0 0 25px;
	}

	.header-menu ul li a {
		text-transform: uppercase;
		font-size: 22px;
		line-height: 1.1em;
		color: var(--text);
		display: block;
	}

	.header-menu-main {
		width: 100%;
	}


	#menu-main .mega-menu .sub-menu {
		padding: 7% !important;
		flex-wrap: wrap;
		display: flex;
		width: 100vw;
		left: unset;
		right: -100vw;
		margin-left: auto;
		margin-right: auto;
		opacity: 1;
		visibility: visible;
		top: 0;
		margin: 0;
		transition: right .45s ease;
		box-shadow: unset;
		border-radius: 0;
		height: calc(var(--app-height) - (80px + 0%));
	}

	#menu-main .mega-menu.active .sub-menu {
		right: 0vw;
	}

	.sub-menu {
		overflow: scroll;
		height: calc(100vh - 80px);
	}

	.menu--links {
		flex-direction: column;
	}

	.mega-menu-inner .menu-links {
		width: 100%;
		height: 100%;
		padding: 0px 30px 50px;
	}

	.menu--links .menu-item {
		width: 100%;
	}

	#menu-main > .menu-item a::before, #menu-main > .menu-item:hover > a::before, #menu-main > .current-menu-item > a::before {
		display: none !important;
	}

	.mega-menu > a {
		position: relative;
		display: flex;
		align-items: center;
	}

	.mega-menu > a:after {
		content:"";
		position: absolute;
		right: 0;
		height: 10px;
		width: 10px;
		border-right: 1px solid;
		border-top: 1px solid;
		transform: rotate(45deg);
	}

	#menu-main li .sub-menu .mega-menu-inner a.button {
		font-size: 16px !important;
		color: #fff !important;
		margin-bottom: 30px !important;
	}
	



	/*--------------------------------------------------------------
	# FOOTER
	--------------------------------------------------------------*/

	#footer {
		padding: 130px 0 30px;
		text-align: center;
	}

	#footer > .row {
		margin: 30px auto;
		max-width: 600px;
	}

	#footer > .row-3 .col:first-child {
		margin-right: 0;
	}

	#footer .footer-logo {
		margin: auto;
		max-width: 150px;
	}

	.footer-socials {
		justify-content: center;
	}
	
	

	/*--------------------------------------------------------------
	# PAGE
	--------------------------------------------------------------*/

	.hero-slider .slide-inner, .hero-image {
		padding: 60px 0 120px;
	}

	.slider-content, .hero-content {
		max-width: 260px;
	}

	.scrolldown {
		bottom: 1vw;
	}

	.slider-content::before, .hero-content::before {
		width: 440px;
		height: 440px;
		left: -120px;
		top: -70px;
	}

	.hero-slider ._titel, .hero-inner ._headline h4 {
		font-size: 20px;
	}

	.hero-slider ._text, .hero-inner ._text {
		font-size: 32px;
	}

	.textbox h3 {
		font-size: 24px;
	}


	.news-wrapper .news {
		width: 100%;
	}

	.news-image::before {
		width: calc(100% + 6px);
		left: -6px;
	}


}


@media all and (max-width: 768px) {
	.scrolldown {
		bottom: 0;
	}

	.hero-slider ._text, .hero-inner ._text {
		margin: 15px 0 15px;
	}

	.slider-content::before, .hero-content::before {
		top: -80px;
	}

	.wc-icons {
		justify-content: space-around;
	}

	.wc-icons ._icon {
		width: calc(50% - 30px);
		padding: 12px 0;
	}

	.swiper-kinderkrippen {
		max-width: calc(100% - 100px);
		margin: 50px auto 0;
	}

	.swiper-button-next, .swiper-button-prev {
		height: 40px;
		width: 40px;
	}

	.swiper-button-next::before, .swiper-button-prev::before {
		height: 14px;
		width: 14px;
	}

	.divider {
		padding: 40px 0 90px;
	}


	#footer {
		margin-top: 7vw;
	}

	.waschbaer {
		width: 35vw;
		top: -10.6vw;
		transform: rotate(-1deg);
	}

	.sidebar-box {
		padding: 30px;
	}

	.sidebar-box h3 {
		font-size: 28px;
	}

}