/*
Theme Name: Fliesen, Natursteine und mehr...
Theme URI: https://www.fliesen-natursteine-und-mehr.de/
Author: CREESH Mediendesign
Author URI: https://www.creesh.de/
Description: Modernes Theme, entwickelt 2021. 
Version: 2021.1
*/

/* -- CSS-VARIABLEN ------------------- */

:root {
--grey: #333333;
--lightgrey: #f5f5f5;
--red: #d30017;
--blue: #0b61ac;
--green: #67bd9a;
--yellow: #feca08;

--font-small: 18px;
--font-standard: 25px;
--font-big: 50px;

--line-height:140%;
}

/* -- SCHRIFTART ------------------- */

/* source-sans-pro-300 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap; 
  src: url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-300.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-regular - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap; 
  src: url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}
/* source-sans-pro-600 - latin */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap; 
  src: url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-600.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/source-sans-pro-v14-latin-600.svg#SourceSansPro') format('svg'); /* Legacy iOS */
}

/* caveat-600 - latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/wp-content/themes/fliesen-natursteine-mehr/fonts/caveat-v10-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/caveat-v10-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/caveat-v10-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/caveat-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/caveat-v10-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/wp-content/themes/fliesen-natursteine-mehr/fonts/caveat-v10-latin-regular.svg#Caveat') format('svg'); /* Legacy iOS */
}



/* -- RESET CSS -------------------------------------- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline
}

body {
	line-height:1;
	overflow-x:hidden!important;
}

button {
	outline:0
}

ol,ul {
	list-style:none
}

blockquote,q{
	quotes:none
}

blockquote:before,blockquote:after,q:before,q:after{
	content:'';content:none
}

img {
	max-width:100%;
	height: auto;
}

q{
	display:inline;font-style:italic
}

q:before{
	content:'"';font-style:normal
}

q:after{
	content:'"';font-style:normal
}

textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"], input[type=checkbox]{
	-webkit-appearance:none;
	appearance:none;
	border-radius:0
}

table{
	border-collapse:collapse;
	border-spacing:0
}

th,td{
	padding:2px
}

big{
	font-size:120%
	}
	
small,sup,sub{
	font-size:80%
}

sup{
	vertical-align:super
}

sub{
	vertical-align:sub
}

dd{
	margin-left:20px
}

kbd,tt{
	font-family:courier;
	font-size:12px
}

ins{
	text-decoration:underline
}

del,strike,s{
	text-decoration:line-through
}

dt{
	font-weight:bold
}

address,cite,var{
	font-style:italic
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
	display:block
}

*{
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	-webkit-tap-highlight-color:transparent
}

.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{
	clip:rect(1px, 1px, 1px, 1px);
	position:absolute !important
}

.hide-desktop, .tab-accordion .text {
	display:none;
}


/* -- ALLGEMEINE STYLING-ANGABEN ------------------- */

#wrapper, form *, .sgpb-main-html-content-wrapper, dialog * {
	font-family: 'Source Sans Pro', sans-serif!important;
	font-size: var(--font-standard);
	line-height:var(--line-height)!important;
	color:var(--grey);
	font-weight:300;
}

#overlay {
	display:block;
	position:fixed;
	background:white url(/data/icons/icon_loading.svg) center center no-repeat;
	background-size:100px auto;
	width:100vw;
	height:100vh;
	z-index:9;
}

.entry-content > .wp-block-group,
.entry-content > .categorie,
.entry-content > .first-paint .wp-block-group,
.entry-content > .insert-page > .wp-block-group {
	width:calc(100% - 100px);
	padding:50px 50px;
	max-width:1380px;
	margin:0 auto;
}

.entry-content > .wp-block-group,
.entry-content > .insert-page > .wp-block-group {
	padding-top:100px;
	padding-bottom:100px;
}

.entry-content > .first-paint .wp-block-group {
	padding-left:0;
	padding-right:0;
}

.button a, input.button, a.button {
	background-color: var(--red)!important;
	font-size: var(--font-standard);
	padding: 15px 30px 19px;
	color:white;
	font-weight:400;
	border-radius:3px;
	  -webkit-border-radius:3px; 
	  -moz-border-radius:3px;
	  -o-border-radius:3px;
}

.button.icon a, input.button, input.button:focus, a.button.icon {
	background: url(/data/icons/icon_contact_weiss.svg) 25px 23px no-repeat;
	background-size:auto 24px;
	padding-left:70px!important;
	outline:none;
}

.button.light a {
	background-color: transparent!important;
	color: var(--red);
	border:2px solid var(--red);
}

.button a:hover, input.button:hover, a.button:hover {
	background-color: var(--green)!important;
	color:white;
}

.button.light a:hover {
	color: white;
	border:2px solid var(--green);
	background-color: var(--green)!important;
}

p:not(:last-child) {
	margin-bottom:15px;
}

h1 {
	font-size:48px;
	font-weight:500;
	line-height:100%;
	margin-bottom:70px;
}

.first-paint h1 {
	font-family: 'Caveat', cursive;
	font-size:100px;
	font-weight:500;
	letter-spacing: -1px;
	margin-bottom:0;
	text-align:center;
	text-shadow: 0px 0px 7px rgba(0,0,0,0.5);
	float:left;
	margin-top:-70px;
	color:white;
}

.first-paint h1 br, .fancybox-infobar {
	display:none!important;
}

h2 {
	font-size: var(--font-big);
	font-weight:400;
}

.first-paint h1 em {
	display:block;
	margin-bottom: -15px;
    font-size: 70px;
}

h2 {
	text-transform:uppercase;
}

h3 {
	font-size: var(--font-big);
	font-weight:600;
	line-height:100%;
}

h4 {
	font-weight:600;
	margin-top:50px;
}

.red {
	color: var(--red);
}

#content ul {
	padding-left: 23px;
}

#content ul li {
	list-style: lower-alpha;
	padding: 5px 0;
}

#content ul li li {
	list-style: disc;
}

#content ul li::marker {
	font-weight:600;
}

#content ol li {
	list-style-type: decimal;
}

#content ol {
	padding-left:22px;
}

a {
	color: var(--red);
}

a:hover {
	color: var(--green);
}

strong {
	font-weight:600;
}

.categorie:hover *, .categorie *, .categorie:after, .categorie:before, .button a:hover, .button a, .button, .button:hover,
img.sgpb-popup-close-button-1, img.sgpb-popup-close-button-1:hover, #branding:before, #branding:hover:before, .fancybox-content:before, .fancybox-content:hover::before {
	transition:all ease-in-out 0.4s;
	  -webkit-transition:all ease-in-out 0.4s;
	  -moz-transition:all ease-in-out 0.4s; 
	  -o-transition:all ease-in-out 0.4s;
}

.first-paint {
	padding-top: 400px;
    padding-bottom: 50px;
}


.first-paint .wp-block-buttons {
	float:right;
	margin-top:50px;
}

a, #header, #header.down, #branding, #menu, .toggle-nav hr {
	transition: all ease-in-out 0.3s;
	  -webkit-transition: all ease-in-out 0.3s;
	  -moz-transition: all ease-in-out 0.3s; 
	  -o-transition: all ease-in-out 0.3s; 
}

a.open-contactform,
a.open-dataprivacy {
	cursor:pointer;
}

.clear {
	clear:both;
	float:none;
}

.logo-last {
    margin-top: 100px;
}

#container {
	padding-top:170px;
	padding-bottom:100px;
	min-height: calc(100vh - 313px);
	background: var(--lightgrey);
}

#container:has(.contactform) {
    padding-top: 110px;
}

.banner > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.banner {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    width: 100% !important;
    max-width: 100% !important;
}

.banner p {
    margin-bottom: 0;
    color: white;
    font-weight: 500;
}

.background-blue {
		background:var(--blue);
}

body.page-template-page-grid #container,
body.home #container {
	padding-top:0px;
	padding-bottom:0px;
	background: white;
}

body.page-template-page-grid #content,
body.home #content {
	max-width:100%;
}

/* -- COOKIE BOX ------------------- */

dialog * {
    font-size: 14px !important;
    line-height: 22px !important;
    text-align: left;
	font-weight: 400;
}

dialog a[role=button] {
    background: var(--red) !important;
	border-radius:3px!important;
	color:white!important;
	text-decoration:none!important;
	padding: 12px 20px!Important;
}

dialog a[role=button]:hover {
	background: var(--green) !important;
}

dialog > div > div > div > div > div:nth-child(2) {
    padding-top: 25px !important;
    padding-bottom: 15px !important;
}

dialog fieldset a[role=button], dialog fieldset a[role=button]:hover {
    background: none !important;
    color: var(--grey) !important;
    padding: 0 !important;
    text-decoration: underline !important;
}

dialog fieldset a[role=button]:hover {
	color:var(--green)!important;
}

dialog a[role=button] span {
	font-weight:600!important;
	font-size: 16px !important;
	font-family: 'Source Sans Pro', sans-serif!important;
	color:white!important;
}

div[role=heading] {
    font-size: 18px !important;
    font-weight: 600 !important;
    padding-top: 15px !important;
}

dialog > div > div > div {
    padding: 15px 40px !important;
}

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

#menu {
    position: fixed;
    right: -360px;
    top: 78px;
    text-align: Center;
    height: calc(100vh - 50px);
	overflow: hidden;
    padding-left: 10px;
	z-index:5;
}

#menu.active {
	right:0;
}

#menu > div {
	padding: 0 50px 40px;
	height: calc(100vh - 70px);
    background: var(--lightgrey);
	overflow:auto;
}

#menu:before {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 99%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 99%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	content: ' ';
	display: Block;
    height: 4px;
    width: 100%;
    position: relative;
    margin-bottom: -4px;
}

#menu a {
    text-decoration: none;
    display: block;
    padding: 20px 0;
	color: var(--grey);
}

#menu ul {
	padding-top:30px;
}

#menu li:not(:last-child) {
	border-bottom: 1px solid white;
}

#menu li.current-menu-item a,
#footer li.current-menu-item a {
	color: var(--red);
}

.info a {
    display: inline-block;
	text-decoration:none;
	color: black;
}

.info img {
    display: inline-block;
    width: auto;
    position: relative;
    height: 25px;
    margin-right: 10px;
    top: 5px;
}

.toggle-nav {
	cursor:pointer;
	height:38px;
	margin-right:60px;
}

.toggle-nav.active hr:nth-child(1) {
    transform: rotate(45deg);
    margin-top: 18px;
}

.toggle-nav.active hr:nth-child(2) {
    width: 0;
}

.toggle-nav.active hr:nth-child(3) {
    transform: rotate(-45deg);
    margin-top: -20px;
}

.toggle-nav hr {
    height: 2px;
    width: 35px;
    background: var(--red);
    border: none;
    margin: 8px 0;
}

.toggle-nav,
.info a {
	margin-left:100px;
}

.toggle-nav, .info {
	float:right;
}

#header:after {
	content: ' ';
	display:block;
	clear:both;
}

#header, #menu > div, #branding {
	-webkit-box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 5px 0px rgb(0 0 0 / 30%);
}

#header {
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 20px 10px;
}

#branding {
    display: inline-block;
    position: absolute;
    background: white;
    padding: 60px 50px 40px;
    left: 0;
	top: 0;
    border-bottom-right-radius: 10px;
	width:500px;
}

#branding:before {
    content: ' ';
    display: block;
    background: white;
    width: 20px;
    height: 78px;
    position: absolute;
    right: -5px;
    top: 0;
}

#header.down #branding:before {
	right:-25px;
	top:-10px;
}

#header.down #branding {
    left: 10px;
    width: 160px;
    padding: 0;
    top: 7px;
	box-shadow:none;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
}

#footer .inner-container {
	max-width:1380px;
	width:100%;
	margin-left:auto;
	margin-right: auto;
}

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

#footer {
	background: var(--grey);
	padding: 50px 100px;
}

#footer a, #footer p {
	color:white;
	text-decoration:none;
}

#footer .footer-area {
	float:left;
}

#footer .footer-area.left {
	clear:both;
}

#footer .footer-area.right {
	float:right;
}

#footer .footer-area.big {
	font-weight:400;
	margin-right: calc(34% - 225px);
}

#footer .footer-area.big img {
    height: 30px;
    width: auto;
    margin-right: 10px;
    top: 7px;
    position: relative;
}

#footer .footer-area.big a {
	display:block;
	margin-bottom:20px;
}

#footer .footer-area.widget-3 {
	float:right;
	width:600px;
	margin-right: -60px;
}

#footer .menu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#footer .menu li, #footer p {
	font-size: var(--font-small);
	line-height:140%;
}

#footer .widget-3 .menu li {
	width:50%;
	padding-right:5px;
}

#footer .widget-3 .menu li:nth-child(1) {
	order:1;
}

#footer .widget-3 .menu li:nth-child(2) {
	order:4;
}

#footer .widget-3 .menu li:nth-child(3) {
	order:7;
}

#footer .widget-3 .menu li:nth-child(4) {
	order:2;
}

#footer .widget-3 .menu li:nth-child(5) {
	order:5;
}

#footer .widget-3 .menu li:nth-child(6) {
	order:8;
}

#footer .widget-3 .menu li:nth-child(7) {
	order:3;
}

#footer .widget-3 .menu li:nth-child(8) {
	order:6;
}

#footer .widget-3 .menu li:nth-child(9) {
	order:9;
}

#footer .small .menu li {
	margin-left: 25px;
}

#footer .small {
	margin-top:70px;
}

#footer .small strong {
	display:inline-block;
	margin: 0 10px;
}

#footer a:hover,
#header a:hover {
	color: var(--green);
}


/* -- KATEGORIEN ------------------- */

.entry-content > .categorie  {
	padding-top:400px;
	margin-top:100px;
}

.categorie.last h2 {
	text-transform:none;
}

.categorie h2,
.categorie p {
	text-align:right;
}

.categorie p, 
.categorie .button {
	margin-bottom:0;
	opacity:0;
	font-weight:400;
}

.categorie:hover p, 
.categorie:hover .button {
	opacity:1;
}

.categorie:hover p,
.categorie:hover h2 {
	color: var(--grey);
}

.categorie .button a,
.categorie .button {
	width:100%;
	text-align:center;
}

.categorie .wp-block-group {
	position:absolute;
	right:50px;
	width:750px;
	bottom:-70px;
}

.categorie:hover .wp-block-group {
	bottom:50px;
}

.categorie p {
    float: left;
    width: calc(100% - 230px);
    margin-right: 30px;
}

.categorie h2 {
	margin-bottom:45px;
}

.categorie .wp-block-buttons {
	float:right;
	width:200px;
}

.categorie * {
	color:white;
}

.categorie,
.first-paint {
	position:relative;
	overflow:hidden;
}

.categorie:before,
.categorie:after,
.first-paint:before {
	content: ' ';
	display:block;
	position: absolute;
	height: 250px;
    width: 100%;
	bottom:0;
	left:0;
	z-index:-1;
}

.categorie:before,
.first-paint:before {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.7+100 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b3000000',GradientType=0 ); /* IE6-9 */
}

.categorie:after {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0.7+100 */
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,098) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.9) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#b3ffffff',GradientType=0 ); /* IE6-9 */
}

.categorie:hover:after,
.categorie:before {
	opacity:1;
}

.categorie:hover:before,
.categorie:after {
	opacity:0;
}

.categorie:hover:after {
	height:150%;
}

.categorie .wp-block-group__inner-container:after,
.first-paint .wp-block-group__inner-container:after,
footer:after,
.grid:after {
	display:block;
	content:' ';
	clear:both;
}


/* -- FORMULAR ------------------- */

form {
	max-width: 900px;
	margin: 50px auto;
	width:100%;
}
form label,
form br {
	display:none!important;
}

form label.dsgvo {
	display:block!important;
}

form label.dsgvo, form label.dsgvo a {
	font-size: var(--font-small)
}

form .right {
	width:calc(60% - 5px);
}

form .left {
	width:calc(40% - 5px);
}

form .left, .plz {
	float:left;
}

form .right, .city {
	float:right;
}

.plz {
	width:40%;
}

.city {
	width:calc(60% - 10px);
}

input[type=text], input[type=email], input[type=tel], textarea, select, input[type=checkbox] {
	outline:none;
	border:none;
	background: var(--lightgrey);
	padding: 20px 25px;
	border-radius:3px;
	  -webkit-border-radius:3px; 
	  -moz-border-radius:3px;
	  -o-border-radius:3px;
}

.first-paint input[type=text], .first-paint input[type=email], .first-paint input[type=tel], .first-paint textarea, .first-paint select, .first-paint input[type=checkbox] {
	background:white;
}

input.button {
    border: none;
    margin: 50px auto 0;
    clear: both;
    display: block;
}

input.button:disabled {
	opacity:0.3;
}

input[type=text], input[type=email], input[type=tel], textarea, select {
	width: 100%;
	margin-bottom:10px;
}

input[type=checkbox] {
	width:40px;
	height:40px;
	padding:0;
	margin:0;
}

input[type=checkbox]:checked {
	background:var(--green);
}

input[type=checkbox]:before {
	display: none;
    content: ' ';
    width: 9px;
    height: 20px;
    margin-left: 13px;
    margin-top: 4px;
    border: 5px solid white;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

input[type=checkbox]:checked:before {
	display:Block;
}

form .wpcf7-acceptance {
    float: left;
    margin: 13px 15px 0 0;
}

form .wpcf7-acceptance > * {
	margin: 0;
}

textarea {
	height: 416px;
}

input:focus {
	background: #fbf8eb;
}

.wpcf7 .ajax-loader,
form  .wpcf7-not-valid-tip {
	display:none!important;
}

form input.wpcf7-not-valid, form textarea.wpcf7-not-valid {
    background: #f9e8ea;
}

.wpcf7 form .wpcf7-response-output {
    padding: 15px 20px;
    margin: 30px auto 0;
    text-align: center;
    display: table;
    font-size: var(--font-small);
    font-weight: 600;
}

/* -- LIGHTBOX ------------------- */ 

#sgpb-popup-dialog-main-div {
	border-radius:3px!important;
	-webkit-border-radius:3px!important;
	-o-border-radius:3px!important; 
	-moz-border-radius:3px!important;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75)!important;
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75)!important;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75)!important;
	padding:0px!important;
	max-height:calc(100vh - 80px)!important;
}

#sgpb-popup-dialog-main-div > div {
	overflow-x:hidden!important;
}

#sgpb-popup-dialog-main-div form {
	margin-bottom:0;
}

.sgpb-main-html-content-wrapper > .wp-block-group,
.sgpb-main-html-content-wrapper > .insert-page {
	padding:50px;
}

.sgpb-main-html-content-wrapper .insert-page {
	width:900px;
	height:80vh;
}

img.sgpb-popup-close-button-1 {
	top: 10px;
}

img.sgpb-popup-close-button-1:hover {
    background: var(--green);
}

.sgpb-theme-1-content {
    border-radius: 6px;
    padding-bottom: 0;
    box-shadow: none!important;
    border-bottom-width: 0px !important;
    border-bottom-color: transparent !important;
}

#sgpb-popup-dialog-main-div-wrapper > div:after {
    content: ' ';
    display: none;
    width: 100%;
    height: 30px;
    background: var(--red) url(/data/icons/icon_pfeil-nach-unten_weiss.svg) no-repeat center center;
    background-size: 15px auto;
    position: relative;
    margin: -2px auto 0;
    z-index: 5;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
}

.sgpb-theme-1-overlay {
	background-image:none!important;
	opacity:1!important;
	background:rgba(0,0,0,0.8)!important;
}

.fancybox-is-closing {
	display:none!important;
}

/*.fancybox-content:before {
	background:var(--red) url(/data/icons/icon_close.png) no-repeat center center;
	background-size:10px 10px;
	width: 30px;
	height:30px;
	content:' ';
	cursor:pointer!important;
	display:Block;
	position: absolute;
    right: 10px;
    top: 10px;
}*/

.fancybox-slide {
	padding: 0 50px!important;
}

.fancybox-content:hover::before {
	background-color: var(--green);
}

.fancybox-content {
	border-radius:3px!important;
	  -webkit-border-radius:3px!important; 
	  -moz-border-radius:3px!important;
	  -o-border-radius:3px!important;
	  overflow: hidden!important;
}

.fancybox-can-swipe .fancybox-content, .fancybox-can-pan .fancybox-content {
	cursor:default!important;
}


/* -- MASONRY ------------------- */ 

.inner-padding {
	padding:22px 5px 5px; 
}

.grid-sizer {
	width: 5%;
}
.grid-item { 
	width: 20%; 
	margin:0;
}

.grid-item {
	padding:5px;
	overflow:hidden;
}

.grid-item.text {
	width:50%;
}

.grid-item.width-big { 
	width: 60%; 
}
.grid-item.width-medium { 
	width: 40%;
}

.grid-item.width-small,
.grid-item.text.width-small {
	width:20%;
}

.grid-item.text.width-small.wp-block-group {
	text-align:center;
	padding:5px!important;
}

.grid-item.text.width-small.wp-block-group .wp-block-group__inner-container {
	background: var(--grey);
	color: white;
	padding-top:105px;
	padding-bottom:100px;
}

.grid-item.width-small {
	width:30%;
}

.grid-item.text .button {
	margin-top:30px;
	display:table;
	text-decoration:none;
}

.grid-item img {
	object-fit: cover;
	width:100%;
	height:100%;
	vertical-align: unset!important;
}

.grid h1 {
	margin-bottom:20px;
	line-height:110%;
}

.grid-item.text.wp-block-group {
	padding:60px 70px 70px!important;
}

.grid-item a.fancyboxforwp {
	width:100%;
	height: 100%;
	overflow:hidden;
	display:flex;
}

@media screen and (max-height: 850px) {
	#sgpb-popup-dialog-main-div-wrapper > div:after {
		display:block;
	}
}

@media screen and (min-width: 1281px) and (max-width:1460px) {
	.toggle-nav, .info a {
    	margin-left: 40px;
	}
}


/* -- WIDTH-1500 ------------------- */

@media screen and (max-width: 1280px) {
	
	:root {
		--font-small: 16px;
	}
	
	.first-paint {
		padding-top: 300px;
		padding-bottom: 25px;
	}
	
	#branding {
		width:400px;
	}
	
	#container {
		padding-top:140px; 
	}
	
	.entry-content > .categorie {
		margin-top: 70px;
		padding-top:350px;
	}
	
	.first-paint h1 {
		font-size:80px;
		margin-top:-30px;
	}
	
	.first-paint h1 em {
		font-size: 55px;
	}
	
	#footer .footer-area.big {
		margin-right: calc(34% - 245px);
		margin-top:-14px;
	}
	
	#footer .widget-3 .menu li:nth-child(7),
	#footer .widget-3 .menu li:nth-child(8)	{
		white-space: nowrap;
	}
	
	#footer .footer-area.widget-3 {
		width:450px;
		margin-right:-20px;
	}
	
	.entry-content > .wp-block-group, .entry-content > .insert-page > .wp-block-group {
		padding-left:0;
		padding-right:0;
	}
	
	.grid-item.text.width-small.wp-block-group .wp-block-group__inner-container {
		padding: 65px 0;
	}
	
	.grid-item.text.width-small.wp-block-group .wp-block-group__inner-container h2 {
		font-size:40px;
	}
	
	.grid-item, .grid-item.width-small, .grid-item.text.width-small {
		width:25%;
	}
	
	.grid-item.text, .grid-item.width-medium {
		width:50%;
	}
	
	.grid-item.width-big {
		width:50%;
	}
}

@media screen and (min-width: 1131px) and (max-width:1280px) {
	.toggle-nav, .info a {
    	margin-left: 25px;
	}
}

@media screen and (max-width:1130px) {
	.info a span {
    	display:none;
	}
	
	.toggle-nav, .info a {
		margin-left: 45px;
	}
}

@media screen and (max-width: 1024px) {
	:root {
		--font-big: 45px;
		--font-standard: 22px;
	}
	.entry-content > .categorie {
		padding-top:300px;
	}
	
	.button a, input.button, a.button {
		padding: 10px 30px 14px;
	}
	
	.categorie .wp-block-group { 
		bottom: -50px;
	}
	
	#container {
		padding-top: 100px;
	}

	.logo-last {
		margin-left:auto;
		margin-right:auto;
		width:80%;
		max-width: 450px;
		margin-bottom:0;
	}
	
	.button.icon a, input.button, input.button:focus, a.button.icon {
		background-position: 20px 17px;
	}
	
	.toggle-nav, .info a {
		margin-left: 15px;
	}
	
	.first-paint h1 {
		float: none;
		display: block;
		text-align: center;
	}
	
	.first-paint:before {
		height:100%;
	}
	
	.first-paint .wp-block-buttons {
		float: none;
		display: block;
		text-align: center;
		margin-top: 40px;
	}
	
	#branding {
		padding: 35px 30px 30px;
		width: 350px;
	}
	
	#content ol {
		padding-left:20px;
	}
	
	.entry-content > .first-paint .wp-block-group {
		padding-bottom: 30px;
	}
	
	.toggle-nav {
		margin-right:30px;
		margin-left:35px;
	}
	
	.first-paint {
		padding-top: 250px;
	}
	
	h1 {
		font-size: 40px;
		margin-bottom:50px;
	}
	
	.grid-item.text.wp-block-group {
		padding: 50px 50px 50px!important;
	}
	
	.grid h1 br {
		display: none;
	}
	
	form .left, form .right {
		width:100%;
	}
	
	form {
		max-width:520px;
	}
	
	#footer .footer-area.big a {
		display: inline-block;
		margin: 0 20px;
	}
	
	#footer .footer-area.big {
		width: 100%;
		text-align: center;
		margin: 0;
	}
	
	#footer .footer-area {
		float: none;
		text-align: center;
		margin: 40px 0 40px;
	}
	
	#footer .footer-area.widget-3 {
		display: none;
	}
	
	#footer .footer-area.right {
		float: none;
		width: 100%;
		text-align: center;
		margin-bottom:0;
	}
	
	#footer .menu {
		width: 100%;
		border-top: 1px solid #555;
		padding-top: 30px;
		justify-content:center;
	}
	
	#footer {
		padding:50px;
	}
	
	#footer .small .menu li {
		margin: 0 15px;
	}
	
	#sgpb-popup-dialog-main-div-wrapper > div:after {
		display:block;
	}
}

@media screen and (max-width: 800px) {
	:root {
		--font-big: 35px;
		--font-standard: 20px;
	}
	
	.entry-content > .categorie {
		margin-top:50px;
	}
	
	.categorie .wp-block-group {
		width: 100%;
		right: 0;
	}
	
	.categorie h2, .categorie p {
		width: 100%;
		text-align: center;
		float:none;
		padding: 0 30px;
	}
	
	.categorie h2 {
		margin-bottom:20px;
	}
	
	.categorie .wp-block-buttons {
		float: none;
		margin: 20px auto 0;
	}
	
	.categorie .wp-block-group {
		bottom: -100px;
	}
	
	.grid-item.width-medium, .grid-item, .grid-item.width-small, .grid-item.text.width-small {
		width:50%;
	}
	
	.grid-item.width-big, .grid-item.text, .grid-item.full {
		width:100%!important;
	}
	
	h1 {
		font-size: 30px;
	}
	
	.info a {
		overflow: hidden;
		width: 23px;
		height: 30px;
		margin-top: 3px;
		margin-bottom: -5px;
		margin-left:35px;
	}
	
	.info a.open-contactform {
		width:30px;
	}
	
	#content ol {
		padding-left:17px;
	}
	
	.banner > div {
		gap: 20px;
	}
	
	.banner {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
	}
}

@media screen and (max-width: 600px) { 
	.entry-content > .first-paint .wp-block-group {
		width:100%;
	}
	
	.banner > div {
		flex-direction: column;
		gap: 10px;
		padding-bottom: 10px;
	}
	
	.first-paint h1 em {
		font-size: 45px;
	}
	
	.first-paint h1 {
		font-size: 70px;
	}
	
	#branding {
		padding: 10px 20px 20px;
		width: 300px;
	}
	
	#branding:before {
		height:58px;
	}
	
	.toggle-nav {
		margin-left:20px;
	}
	
	.grid-item.text, .grid-item.width-big {
		width:100%;
	}
	
	.grid-item.width-medium, .grid-item.width-small, .grid-item.text.width-small, .grid-item {
		width: 50%;
	}
		
	#header.down #branding {
		width: 110px;
	}
	
	#header {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-right:30px;
	}
		
	form .wpcf7-acceptance {
		margin: 8px 15px -5px 0;
	}
	
	#menu {
		top:58px;
	}
	
	#menu > div {
		height: calc(100vh - 58px);
		padding: 0 30px 40px;
	}
	
	#menu a {
		padding:15px 0;
	}
	
	#footer .footer-area.big a {
		font-size:22px;
	}
	
	.grid-item img {
		margin-bottom:-5px;
	}
	
	.grid-item.text.wp-block-group {
		padding: 30px!important;
	}
	
	.toggle-nav {
		margin-right:0;
	}
	
	.info a {
		margin-left:15px;
	}
	
	.entry-content > .wp-block-group, .entry-content > .insert-page > .wp-block-group {
		width: calc(100% - 60px);
	}
	
	#container:has(.contactform) {
			padding-top:90px;
	}
}

@media screen and (max-width: 500px) { 

	:root {
		--font-big: 32px;
		--font-standard: 18px;
	}
	
	.first-paint h1 {
		line-height: 90%;
		font-size: 80px;
	}
	
	.first-paint h1 em {
		margin-bottom: 10px;
		line-height: 90%;
	}
	
	.entry-content > .wp-block-group, .entry-content > .categorie, .entry-content > .insert-page > .wp-block-group {
		width: calc(100% - 20px);
	}
	
	.entry-content > .wp-block-group, .entry-content > .insert-page > .wp-block-group {
		padding-left:0;
		padding-right:0;
	}
	
	.entry-content > .categorie {
		margin-top: 10px;
		padding-top:250px;
	}
	
	h2 {
		line-height: 100%;
	}
	
	.categorie .wp-block-buttons {
		width: calc(100% - 60px);
	}
	
	.categorie:hover .wp-block-group {
		bottom: 30px;
	}
	
	.categorie h2 {
		margin-bottom: 10px;
	}
	
	.categorie .wp-block-group {
		bottom: -115px;
	}
	
	form {
		max-width: 520px;
		padding: 0;
		margin-top:30px;
	}
	
	div.sgpb-main-html-content-wrapper form {
		padding: 0 30px;
	}
	
	form .wpcf7-acceptance {
		margin: 5px 15px -5px 0;
	}
	
	input.button {
		margin-top:30px;
	}
	
	.button a, input.button, a.button {
		padding: 12px 30px 16px;
		width: 100%;
		max-width: 280px;
	}
	
	.wp-block-buttons>.wp-block-button:last-child {
		width:100%;
	}
	
	.button.icon a, input.button, input.button:focus, a.button.icon {
		background-position: 20px 15px;
	}
	
	.entry-content > .wp-block-group, .entry-content > .insert-page > .wp-block-group {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	
	.logo-last {
		margin-top: 50px;
	}
	
	.toggle-nav, .info {
		z-index:2;
		position:relative;
	}
	
	.info a {
		margin-left: 10px;
		margin-right: 5px;
	}
	
	#branding {
		padding: 0px 20px 10px;
		top: 50px;
	}
	
	#branding:before {
		height: 14px;
		width: calc(100% + 10px);
		left: 0px;
		top: -6px;
		z-index: 1;
	}
	
	#branding a {
		position:relative;
		z-index:2;
	}
	
	#header.down #branding:before {
		height:0;
	}
	
	#footer .small strong {
		display:block;
	}
	
	#footer .small .menu li {
		display: block;
		width: 100%;
		padding: 5px 0;
	}
	
	.grid-item.text .button {
		margin-top: 30px;
		display: table;
		text-align: center;
	}
	
	.grid-item.width-medium {
		width:100%!important;
	}
	
	.sgpb-main-html-content-wrapper > .wp-block-group, .sgpb-main-html-content-wrapper > .insert-page {
		padding: 40px 0 40px;
	}

	#footer {
		padding: 30px;
	}
	
	#footer .footer-area.big a {
		margin: 0 15px;
	}
	
	#container {
		padding-top: 180px;
	}
	
	h1 {
		margin-bottom: 40px;
	}
	
	div:not(.first-paint) h1, p {
		word-wrap: break-word;
	}
	
	.entry-content > .wp-block-group, .entry-content > .insert-page > .wp-block-group {
		width: calc(100% - 60px);
	}
	
	#sgpb-popup-dialog-main-div, #sgpb-popup-dialog-main-div-wrapper > div:after {
		max-width: calc(100% - 20px)!important;
	}
	
	div.fancybox-slide {
		padding:0px 10px!important;
	}
	
	img.sgpb-popup-close-button-1 {
		right:25px!Important;
	}
	
	#sgpb-popup-dialog-main-div-wrapper > div:after {
		margin: -2px 0 0;
	}
	
	#container:has(.contactform) {
		padding-top: 150px;
	}
	
	#menu {
		width: 100%;
		padding-left: 0;
		right:-100%;
	}
	
	
}

@media screen and (max-width: 400px) { 
	#footer .footer-area.big a {
		display: block;
		margin: 10px 0px;
	}
	
	#footer {
		padding-top:20px;
	}
	
	#branding {
		width:250px;
	}
}
	
	
@media screen and (max-width: 350px) { 
	#header {
		padding-right: 10px;
	}
	
	.info a {
		margin-left: 5px;
		margin-right: 5px;
	}
	
	.toggle-nav {
		margin-left: 15px;
	}
	
}