/*
Theme Name: HPV Theme
Theme URI: https://www.pferdmenges.de
Author: Jan Pferdmenges
Author URI: https:/www.pferdmenges.de
Description: Custom Theme for Wrocklage Architekten
Version: 1.0
License: Commercial
Text Domain: hpv-verwaltung

*/

/* 
Rot:  		#D10014
Grau: 		#696868
Dunkelgrau: #3c3c3c
Hellgrau:	#d0d0d0
*/





:root {
	--text_color: #444;
	--hpv_blau: #00205C;
	--hpv_beige: #BC955C;
	--hpv_bg2: #F2EDE7;
	--hpv_bg: #E8EBEF;
	
}


@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;600;700&family=Merriweather:wght@300;400;700&display=swap');

body,html {margin: 0; padding: 0; min-height: 100vh; font-family: 'Merriweather Sans', sans-serif; font-weight:400; font-size:16px; line-height: 1.6rem; color: var(--text_color); overflow-x: hidden;}
body {background-image: linear-gradient(to bottom, var(--hpv_bg), white 80vh); background-attachment: fixed;}
header {background-color: white; border-bottom: 1px solid var(--hpv_blau); height: 80px; position: relative; z-index: 2;}
header > div {background-color: white;height: 100%;}
h2, h1 {font-family: 'Merriweather', serif; font-weight: 300; color: var(--hpv_blau); font-size: 1.7rem; line-height: 1.2em; margin-top: 2rem; margin-bottom: 1rem; position: relative; text-transform: uppercase; }
h2 {font-size: 1.5rem; text-transform: none;}
h3 {color: #D10014; font-size: 1.3rem; font-weight: 600; margin-top: 1.8rem; margin-bottom: 0.8rem;}
h4 {color: #404040; font-size: 1rem; font-weight: 700;}
input[type=text], input[type=password], textarea, select {border-radius: 5px; border: 1px solid #888; padding: 2px 5px; background-color: white;}
main {min-height: calc(100vh - 140px); padding-top:1px; padding-bottom: 50px;}

/*
/* Allgemeine Klasse
*/

.smallIcon {width:14px; height: auto;}
.imgButton {border: 1px solid #ccc; background-color: white; padding:5px; transition-duration: 300ms; border-radius: 5px;}
.imgButton:hover {background-color: lightgoldenrodyellow; }
.button {background-color: var(--hpv_beige); padding: 5px 30px; border: 1px solid #666; border-radius: 5px; transition-duration: 300ms;}
.button:hover {opacity: 0.85; }
.logo {padding: 20px 0;}
.logo img {width: 200px; height: auto;}
.smallText {font-size: 0.85rem; line-height: 1.1em;}

.errorBox {padding: 15px 30px; border-left: 10px solid darkred; color: darkred; margin: 15px 0;}
.errorHeadline {font-weight: 700; font-size: 1.2rem;}


/*
/* Links
*/

a {font-weight: 500; color: #404040; text-decoration: underline; text-decoration-line: underline; text-decoration-style: dotted; transition-duration: 300ms;}
a:hover {color: #D10014; }

a.button {color: black; padding: 10px 30px; text-decoration: none;}
a.button:hover {color: var(--hpv_blau);}


/*
/* Kopfzeile & Kopfnavigation
*/

.menu {display: flex; justify-content: flex-end; align-items: center;}
#Burger img {width:30px; height: auto;}
#MenuCheckbox:checked ~ #Menu {transform: translateY(0);}
#Menu {position: absolute; top:0; left:0; width: 100%; height: 100vh; padding-top: 100px; background-color: var(--hpv_blau);z-index: -1; transform: translateY(-100%); transition-duration: 500ms;}

#Menu a {color: white; text-decoration: none;}
#Menu ul {padding: 0; margin: 0; list-style: none;}
#Menu > div:first-child {height: 100%; height: calc(100% - 30px);}
#Menu > div:first-child > ul {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%;}
#Menu > div:first-child > ul > li {margin: 8px 0;}

#ToplineMenu {color: white; font-size: 0.75rem; display: flex; justify-content: center;}
#ToplineMenu ul > li {padding: 0 10px; position: relative;}
#ToplineMenu ul > li:not(:first-child)::before {content: '|'; position: absolute; left:-1px;}
#ToplineMenu a {color: var(--hpv_blau); color: white;}

/*
** FOOTER
*/


footer {background-color: var(--hpv_bg2); font-size: 0.75rem; padding: 15px 0; border-top: 1px solid var(--hpv_blau);}
footer nav > ul {list-style: none; padding:0; margin:0; display: flex; justify-content: center; align-items: center; flex-direction: column;}
footer nav > ul > li {margin: 0px 15px;}
footer nav > ul > li a {text-decoration: none;color: var(--hpv_blau);}


/*
** Cookie Banner
*/

#JhpCookieBanner {position: fixed; bottom:0; background-color: var(--secondary_color); width:100%; color: white; display: none;}
#JhpCookieBanner.active{display: block;}



/*
** Formulare
*/

.eingabefeld {margin-bottom: 30px;}
.eingabefeld label {display: block; font-size: 0.85rem;}
.eingabefeld input {width: 100%;}


/*
** 	Dokumente
*/

.documentBox {
	display: grid;
	grid-template-columns: auto 50px;
	grid-template-rows: auto auto auto auto;
	grid-template-areas:
		"filename filename"
		"description description"
		"category category"
		"status download"
		;
	align-items: center;
	border: 1px solid #666; border-radius: 5px; margin-bottom: 15px; background-color: #FFFFFF;
}

.documentBox > div {padding: 3px 6px;}

.documentFilename {grid-area: filename; background-color: var(--hpv_bg2);color: var(--hpv_blau); border-bottom: 1px solid #666;border-radius: 5px 5px 0 0; overflow: hidden;}
.documentFilename img { transform: translateY(-2px); display: inline-block}
.documentDescription {grid-area: description; }
.documentCategory { grid-area: category; overflow: hidden;}
.documentStatus { grid-area: status; font-size: 0.7rem; color: #888;}
.documentStatus span { margin-left: 30px;}
.documentDownload { grid-area: download; text-align: right;}
.documentDownload img {width:40px; height: auto; display: inline-block;}

.statusBar {display: flex; background-color: var(--hpv_blau); color: white; flex-direction: column; margin-bottom: 30px; border-radius: 5px; padding: 3px 6px;}
.statusBar > div {padding: 3px;}
.statusBar > div > span {display: block; font-size: 0.85rem; font-weight: 400;}
.statusBar select, .statusBar input {width: 100%;}

.seitenNavigation {display: flex; justify-content: center; align-items: center; margin-top:15px; margin-bottom: 15px; font-size: 0.85rem; color: #aaa; }
.seitenNavigation > div > span {padding: 0 1px; }
.seitenNavigation > div > span:nth-child(2) {margin-right: 5px; }
.seitenNavigation > div > span:nth-last-child(2) {margin-left: 5px; }
.seitenNavigation > div > span > a {padding: 2px 2px; font-weight: 700; color: var(--hpv_blau); text-decoration: none;}
.seitenNavigation > div > span > span {padding: 2px 2px; }
.seitenNavigation > div > span > span.aktuell {padding: 2px 7px; color: var(--hpv_beige); font-weight: 700; }


/*
** 	Buchungssystem
*/



.wpbs-form-field.wpbs-form-field-hidden { padding: 0!important;}



/*
** 	Mitteilungen
*/


.mitteilungBox {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: auto auto auto auto;
	grid-template-areas:
		"mitteilungTitle"
		"mitteilungNachricht"
		"mitteilungStatus"
		"mitteilungLesen"
		;
	align-items: center;
	border: 1px solid #666; border-radius: 5px; margin-bottom: 15px; background-color: #FFFFFF;
}
.mitteilungBox > div {padding: 3px 6px;}

.mitteilungBild {display: none;}
.mitteilungTitle {grid-area: mitteilungTitle; background-color: var(--hpv_bg2);color: var(--hpv_blau); border-bottom: 1px solid #666;border-radius: 5px 5px 0 0; overflow: hidden;}
.mitteilungNachricht {grid-area: mitteilungNachricht; }
.mitteilungNachricht > p:last-child {margin-bottom:0; }
.mitteilungStatus { grid-area: mitteilungStatus; font-size: 0.7rem; color: #888;}
.mitteilungStatus span { margin-left: 30px;}
.mitteilungLesen { grid-area: mitteilungLesen; text-align: right;}

.mitteilungenImage img {width: 100%; height: auto; margin-bottom: 15px;}




/*
** 	Login
*/

body.login { height: 100vh;}
body.login > section { height: 100%; height: calc(100% - 80px); background-image: url("img/Heinrich-Pferdmenges.jpg"); background-size: cover; display: flex; justify-content: center; align-items: flex-end;}
.loginForm {margin: 30px; background-color: rgba(255,255,255,0.85); border: 1px solid var(--hpv_blau); padding: 15px; border-radius: 15px; width: 100%; max-width: 280px;}
.loginForm label {font-size: 0.85rem;}
.loginForm input.button {margin-top: 10px;}
.loginForm input {width: 100%;}
.loginForm .errorMessage {margin-bottom: 10px; color: darkred; position: relative; padding-left:24px;}
.loginForm .errorMessage::before {content: ' '; display: block; width: 18px; height: 18px; position: absolute; top:5px; left:0; background-image: url("icons/fehler.svg"); background-size: contain;}
.loginForm .errorMessage > span {font-weight: 700;}
.loginForm a {font-size: 0.85rem;margin-top: 5px;}
.loginHeadline {display: flex; justify-content: flex-end; align-items: center; color: var(--hpv_blau); text-transform: uppercase;font-family: 'Merriweather', serif; font-weight: 300;}


/*
** 	Passwort änadern
*/


.passwortBox  {padding: 30px; border: 1px solid var(--hpv_blau); background-color: white; border-radius: 15px; margin: 30px 0;}
.passwortBox label {font-size: 0.85rem; display: block; }
.passwortBox input {width: 100%;}
.passwortBox p {margin-top: 15px;}



/*
** 	404-Seite
*/

#Site404 {background-image: url("img/hpv_404_400.jpg"); background-size: contain;background-repeat: no-repeat; height: 100%; padding-top: 80vw; text-align: center;}



/* Kleine Geräte (Tablets, 576px und breiter) */
@media (min-width: 576px) { 
	
	.statusBar { flex-direction: row; }
	.statusBar select, .statusBar input {width: unset;}

    #Site404 {background-image: url("img/hpv_404_768.jpg");}
}

/* Kleine Geräte (Tablets, 768px und breiter) */
@media (min-width: 768px) { 
    html, body {font-size: 18px;}
	

	.documentBox {
		grid-template-columns: auto 150px;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"filename category"
			"description description"
			"status download"
			;
	}
	.documentCategory {text-align: right; background-color: var(--hpv_bg2); border-bottom: 1px solid #666;border-top-right-radius: 5px;}
	.documentCategory span {display:none; }
	
	.mitteilungBox {
		grid-template-columns: auto auto;
		grid-template-rows: auto auto auto;
		grid-template-areas:
			"mitteilungTitle mitteilungTitle"
			"mitteilungNachricht mitteilungNachricht"
			"mitteilungStatus mitteilungLesen"
			;
	}
	.mitteilungNachricht {display: flex;}
	.mitteilungBild {display: block; width:200px; margin-right: 15px;}
	.mitteilungBild > img {width:100%; height: auto;}
	.statusBar { justify-content: space-between; }
	
	.loginHeadline {font-size: 1.3rem; letter-spacing: 0.2em;}
	.loginForm {width: 360px; max-width: unset;}
	
	.eingabefeld label {display: inline-block; font-size: 1rem; width: 200px; padding-right: 10px;}
	.eingabefeld input {max-width: 400px;}
	
	#Site404 {background-image: url("img/hpv_404_1024.jpg");}
}

/* Mittlere Geräte (Desktop-PCs, 992px und breiter) */
@media (min-width: 992px) { 

.menu {display: flex; justify-content: flex-end; align-items: center;}
#Burger {display: none;}
#MenuCheckbox:checked ~ #Menu {transform: translateY(0);}
#Menu {position: static; width: unset; height: unset; padding-top: 0; background-color: transparent;z-index: 1; transform: translateY(0); display: flex; flex-direction: column-reverse;}

#Menu a {color: var(--hpv_beige); transition-duration: 300ms;}
#Menu > div:first-child {height: unset;}
#Menu > div:first-child > ul {flex-direction: row; height: unset;}
#Menu > div:first-child > ul > li {margin-left: 15px;}
#Menu > div:first-child > ul > li:hover > a{color: var(--hpv_blau);}
#Menu > div:first-child > ul > li.current-menu-item > a {color: var(--hpv_blau);}
	
#ToplineMenu {color: var(--hpv_blau); justify-content: flex-end;}
#ToplineMenu ul > li:last-child {padding-right: 0;}
#ToplineMenu a {color: var(--hpv_blau); }


	.statusBar { align-items: center; }
 	.statusBar > div > span {display: inline-block;}
	
	body.login > section { justify-content: flex-end; align-items: center;}
	.loginForm {margin-right: 10vw;}
footer nav > ul {flex-direction: row;}
#Site404 {background-image: url("img/hpv_404_1920.jpg"); background-size: cover;background-repeat: no-repeat; padding-top: 55vh; height: calc(100vh - 140px); margin-bottom: -50px; color: white; font-weight: 700; background-position: center center;}
}

/* Große Geräte (Desktop-PCs, 1200px und breiter) */
@media (min-width: 1200px) { 

	h1 {font-size: 66px; margin: 3rem 0 2rem 0;}
	h2 {font-size: 36px; margin: 1rem 0 2rem 0;}
	h3 {font-size: 2rem; margin: 2rem 0 1rem 0; font-weight: 500;}

	.loginForm {margin-right: 20vw;}
	#Site404 {padding-top: 60vh; }
}

/* Große Geräte (Desktop-PCs, 1400px und breiter) */
@media (min-width: 1400px) { 
	.loginForm {margin-right: 28vw;}
	#Site404 {padding-top: 65vh; }
}