/*
Theme Name: Stadt Elsfleth
Theme URI: 
Author: SYNECTIVE Systemhaus GmbH & Co. KG
Author URI: https://www.synective.de
Description: Relaunch der Webseite Stadt Elsfleth - Template 12/2021
Version: 0.1

*/


/* FONT INCLUDES */
@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Poppins:wght@100;200;400&display=swap');
/* ROOT VARS */
:root {
    --clr-primary:      #23377e;
    --clr-primary-rgb:  rgba(35,55,126, 0.7);
    --clr-secondary:    #e41f15;
    --clr-text:         #181818;
    --clr-lightgray:    #efefef;
    --clr-gray:         #aaa;
    --ff-primary:       'Poppins', sans-serif;
    --ff-heading:       'Julius Sans One', sans-serif;
    --brd-secondary:    0.1em solid var(--clr-secondary);
	--pages-accent: 	 #23377e !important;
}

::selection { background-color: var(--clr-secondary); color: #fff; }
* { box-sizing: border-box; }
body, html, h1, h2, h3, h4, h5, p { margin: 0; }

h1, h2, h3 { font-family: var(--ff-heading); border-bottom: var(--brd-secondary); padding-bottom: 0.3em; margin-bottom: 0.3em; }
p { margin-bottom: 1rem; }
body { font-family: var(--ff-primary); font-weight: 300; font-size: 16px;  }
body.bigger { font-size:20px; }
a { color: var(--clr-secondary); text-decoration: none;; }
a[target=_blank]::after { content: '\f35d'; font-family: "Line Awesome Free"; font-weight: 900; position: relative;  top: -0.25rem; }
input[type="text"] { font-size: 1.3rem; padding: 0.5rem; }
input[type="submit"] { padding: 0.5rem; font-size: 1.3rem; background: #fff; border: 1px solid #fff; color: var(--clr-primary);  }

footer a { color: #fff; }
.filelist { display: flex; flex-flow: row wrap; gap: 1rem; align-items: center;  }
.filelist .las { font-size: 2rem; color: var(--clr-secondary); }



header { position: relative; width: 100%; overflow: hidden; background: var(--clr-primary-rgb); height: 800px; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;  }
.bgImage { position: absolute; width: 100%; height: 800px; background-size: cover; background-repeat: no-repeat; background-attachment: scroll; background-position: 50% 50%; }


.top-header { background: var(--clr-primary); padding: 0.25rem 0; display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 900; z-index:7000;  }
.trigger { display: flex; justify-content: flex-end; font-size: 2rem; color: var(--clr-lightgray); letter-spacing: 1rem; }
.mainnav { display: none; }
.custom-logo-link { position: absolute; top: 0.5rem; left: 1rem; z-index: 9000;}
img.custom-logo  { display: block; width: 150px; height: auto;   }
.search,.fontsize,.contrast  { cursor: pointer; }

.open::before { content: '\f00d'; position: fixed; z-index: 9900; color: var(--clr-primary);font-weight: 900; font-family: 'Line Awesome Free'; top: 2rem; right: 1rem; }



nav { display: block; z-index: 9500; position: fixed; top:0; left:0; width: 100%; height: 100%; background: #fff; transition: all ease-in-out 0.5s; padding: 2em;overflow-y: scroll;}

nav.hidden { margin-left: 100%; }
nav.show { margin-left: 0; }
nav ul { list-style: none; margin-left: 0; padding-left: 0;  }
nav ul li { font-size: 1.2rem; font-weight: 600; padding: 1rem 0;   }
nav ul ul { padding-left: 1em;}
nav ul ul li { padding: 0.3em 0; font-weight: 400; }
nav h4 { border-bottom: var(--brd-secondary) }


.search_box { display: none; position: absolute; top: 3rem; right: 0; z-index: 9999; background: var(--clr-primary); padding: 3rem 1rem; width: 100%; transition: right ease-in-out 0.5s; text-align: center; }
.search_box input[type="text"] { width: 70%; }

#menu-footermenu { list-style: none; padding: 0; margin: 0; }


.waves { position: absolute; height: 60px; width: 100%; bottom: 0; }
.wave-1 { position: absolute;background-image: url("img/welle.png"); background-repeat: repeat-x ; background-size: contain; background-position: 0rem bottom; width: 100%; height: 100%; opacity: 0.3; animation: wave-1 20s infinite; }
.wave-2 { position: absolute;background-image: url("img/welle.png"); background-repeat: repeat-x ; background-size: contain; background-position: 50rem bottom; width: 100%; height: 100%; opacity: 0.6; animation: wave-2 30s infinite; }
.wave-3 { position: absolute;background-image: url("img/welle.png"); background-repeat: repeat-x ; background-size: contain; background-position: 100rem bottom; width: 100%; height: 100%; opacity: 1; animation: wave-3 50s infinite; }

@keyframes wave-1 {
    0% { background-position-x: 0rem;}
    50% { background-position-x: 75rem; }
    100% { background-position-x: 00rem; }
}

@keyframes wave-2 {
    0% { background-position-x: 50rem;}
    50% { background-position-x: -50rem; }
    100% { background-position-x: 50rem; }
}
@keyframes wave-3 {
    0% { background-position-x: 100rem; }
    50% { background-position-x: 150rem;  }
    100% { background-position-x: 100rem; }
}






.slide-left,.slide-right { position: absolute; top: 50%; color: #fff; font-size: 3rem; opacity: 0.5; transition: opacity ease-in-out 0.5s; }
.slide-left:hover, .slide-right:hover { cursor: pointer; opacity: 1;}
.slide-left { left: 1rem; }
.slide-right { right: 1rem; }

.slide-text { position: absolute; bottom: 8rem; left: unset; right:0; width: 10rem; max-width:50%;  color: #fff; background: var(--clr-primary); padding: 0.5rem; font-size: 1.2rem; width: 100%; text-align: right; opacity: 0.7; backdrop-filter: blur(2px); }
.slide-text .credit { font-size: 0.5rem; display: block; width: 100%; text-align: right; }


main { margin: 3em 0; text-align: left; padding: 0 1rem; }
main h2 { margin-top: 2rem; }

aside { margin: 1rem; }
aside img { width: 100%; height: auto; }
aside h1, aside h2 { font-size: 1.2rem;} 


.content { display: block; }
main img { height: auto; }

section img { width: 100%; height: auto; margin:0 auto; display: block; }

.widget { background: #efefef; padding: 1rem; width: 100%; margin: 2rem 0;  }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget .post-date { font-size: 0.7rem; display: block;  }
.widget.alert { background: var(--clr-secondary); color: #fff; }
.widget.alert h2 { border-color: #fff; }
.widget.alert a { color: #fff; font-weight: 900;}



.pre-footer { margin-top: 3rem; content: ''; background-image: url("img/welle-blau.png"); background-blend-mode: multiply ;  background-repeat: no-repeat; width: 100%; height: 60px; display: block; background-position-x: 50%; }
footer { position: relative; background: var(--clr-primary); color: #fff; min-height: 30vh; padding: 1rem 1rem; font-weight: 300; }
footer div { margin-bottom: 1rem;}


body.highcontrast, body.highcontrast *, 
html.highcontrast, html.highcontrast * { background-color: #fff !important; color: #000 !important; height: auto !important; border-color: #000 !important; }
body.highcontrast .logo { background: #fff; padding: 1rem; }
body.highcontrast .custom-logo-link { position: absolute; top: 0.5rem; left: 1rem; z-index: 9999;}
body.highcontrast header { height: 250px !important;z-index: 9999; }

.to-top { display: none; position: fixed; bottom: 2rem; right: 2rem; color: #fff; font-size: 2rem; border: 1px solid #fff; aspect-ratio: 1/1; line-height: 3rem; width: 3rem; text-align: center; background: var(--clr-primary)  }



.wp-block-columns { padding: 0rem; margin:0; margin-bottom: 1rem;  }
.wp-block-column { padding: 0rem; }

.wp-block-media-text { gap: 2rem; }
.wp-block-media-text__content { padding: 0 0 !important; }
.gray-box { background: var(--clr-lightgray); padding: 1rem; position: relative; margin-bottom: 1rem; }
.gray-box h2 { margin: 0; margin-bottom: 1rem;  }
.wp-block-pb-accordion-item { background: var(--clr-lightgray); padding: 0.3rem 1rem;   }
.c-accordion__title:after { font-size: 2rem; font-weight: 900; }
.red-box { background: var(--clr-secondary); color: #fff; padding: 1rem;margin-bottom: 1rem; }
.red-box h2 { border-color: #fff; }
.red-box a { color: #fff; font-weight: 900;}

.wp-block-button__link { border-radius: 0px !important; background: var(--clr-primary); color: #fff; padding: 0.5rem; margin-bottom: 0.5rem; }
.wp-block-button__link[target=_blank]::after {content: ''; display:none; }
.wp-block-column { word-break: normal !important; overflow-wrap: normal !important; }
.wp-block-column P { display: inline-block;  }


main p img { float: right; margin-left: 1rem; margin-bottom: 1rem; }

/*
	Unterkünfte - Booking & More Script.wp-block-column {
    flex-grow: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
*/

.mdc-button { background: var(--clr-secondary) !important; color: #fff !important; }
/* 
	POI - ET4 Script
*/

.et4_pages_body { padding: 0 !important; }
.et4_pages_body a { color: var(--clr-primary) !important; }


#page-search-form { margin-top: 1rem !important; }
#page-search-form label { margin-right: 3rem; font-weight: bold;  }
.page-search-input { font-size: 1rem !important; border: 1px solid; border-radius: 0.25rem; width: 30%; min-width: 200px; max-width: 480px; height: 3rem; }
.search-list-entry { list-style: none; }
.seach-result-excerpt { margin: 0 1rem; margin-bottom: 1rem; }
.search-additional-button { background: var(--clr-primary); color: #fff; border: 0; height: 3rem;font-size: 1.5rem; border-radius: 0.25rem; width: 4rem; text-align: center; position: relative; top: 3px;  }


@media (min-width: 1300px) {
    
    .flex-wrapper { padding: 0 15%; display: flex; gap: 4rem; min-width: 900px;  }

    .slide-text { width: 25%; }
    main { flex: 2 900px; margin-left: 0;padding: 0 0rem;  }
    main section { padding-left: 0; }
    
	aside { flex: 1 340px;  margin: 1rem 1rem; }

    .mainnav { display: block; }
    .mainnav ul { list-style: none; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; padding:0; margin: 0; }
    .mainnav ul li { margin: 0 2rem; position: relative; cursor: pointer; font-weight: 400; }
    .mainnav ul li a { color: #fff; }
    .mainnav ul ul { position: absolute; display: block; padding:0; margin: 0; background: var(--clr-primary); width: 25vw; opacity: 0; transform: rotateY(90deg); padding: 1rem 0; z-index:9999; }
	
	.mainnav ul li:hover { font-weight: 700 }
	
    .mainnav ul li:hover ul { opacity: 1;transition: all ease-in-out 0.3s; transform: rotateY(0deg); margin-left: -1rem; }
    .mainnav ul ul li {padding:0; margin: 0; line-height: 2rem; padding: 0.5rem 1rem; display: block; font-weight: 400; }
	.mainnav ul ul ul li {margin-left: 1rem; line-height: 0.5rem; display: block; font-weight: 300; }
    .mainnav ul ul li:hover { background: #172b72;}
		
	.search_box { width: 33%; border-bottom-left-radius: 1rem;  }
    	
	
    .nav__trigger { display: none; }

    footer { padding: 2rem 20%; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-start;}


}