/*   
Theme Name: WS-EDV
Theme URI: 
Description: Theme im CI von WS EDV, angelehnt an das Briefpapier.
Author: Christian Reiff
Author URI: https://christianreiff.de
*/

:root { /* Festlegung von Farben, die an mehreren Stellen genutzt werden als Variablen, können an dieser Stelle dann einfacher geändert werden. */
	--orange: #FF991D;
	--text-farbe: #2b456a;
	--grauer-hintergrund: #ebf0f8; /*Orginal-Farbton von alter Website: #BEC3CB */
}

html {
	scroll-behavior: smooth; /* Ansicht springt nicht einfach zum jeweiligen Punkt auf der Seite, bei Klick auf den Menüpunkt. */
}

body {	
	display: flex;
	min-height: 100vh; /* vh=viewportheight, body über gesamten Viewport */
	max-width: 70em; /* damit Inhalte auf sehr breiten Bildschirmen, nicht zu breit werden */
	margin: 0 auto; /* entfernt Innenabstand, damit kein Scrollbalken erscheint und zentriert den Inhalt */
	flex-direction: column;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

header {
	display: flex;
	flex-flow: row;
	justify-content: flex-end;
}	
/* Formatierung für das Hauptmenü im Header */
nav {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.menu-ws-edv-services-solutions-container,
.menu-ws-edv-training-consulting-container {
	display: flex;
	justify-content: flex-start;
}
nav ul {
	display: flex;
	flex-flow: row wrap;
  	justify-content: flex-start;
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	margin-bottom: 0;
}
nav li {
	padding: 0.5em;
}
nav a {
	font-size: 1.2em;
	text-decoration: none;
    	font-weight: bold;
    	color: var(--text-farbe);
}
/* Fährt der Besucher mit dem Mauszeiger über einen Menüpunkt, wird der Link unterstrichen und ein grauer Hinterrund eingeblendet */
nav li:focus,
nav li:hover,
nav li:active {
	background-color: var(--grauer-hintergrund);
}
nav a:focus,
nav a:hover,
nav a:active {    
    	text-decoration:underline;
}
/* Formatierung Hauptmenü Ende */

/* Der Bereich unterhalb des Headers (content-area) erstreckt sich über den kompletten restlichen Bereich des Bodys. Wird unterteilt in den main auf der linken Seite, wo sich im main-content der eigentliche Inhalt und darunter der Footer befinden und auf der rechten Seite dem Sidebanner, wo ggf. der Titel eingeblendet wird. */
#content-area {	
	flex: 1;
	display: flex;
	flex-direction: row;
}
/* eigentlicher Seiten-Inhalt */
main {
	flex: 15;
	border-top: 4px dotted #2b456a;
	padding-left: 0.5em;
	padding-right: 0.5em;
	display: flex;
	flex-direction: column;
}
#main-content {
	min-height: 5em;
	flex: 1;
}
h1 {
	font-size: 2em;
	font-weight: bold;
	color: var(--text-farbe); 
}
h2 {
	font-size: 1.8em;
	font-weight: bold;
	margin-top: 0.2em;
	margin-bottom: 0.5em;
	color: var(--text-farbe);
}
h2 a { 
	text-decoration: none;
	color: var(--text-farbe);
}
h3 {	
	font-size: 1.5em;
	font-weight: normal;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}
h4 {	
	font-size: 1.2em;
	font-weight: normal;
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}

/* spezielle Formatierung für die Landingpage */
.wp-block-columns {
	display: flex;
	flex-direction: columns;
}

/* Schriftgröße des Willkommenstextes auf der Landingpage */
#landingpageText { /* kleiner für kleine Bildschirme, Mobil first! */
	font-size: 1.2em;
}
@media (min-width: 45em) { /* größer für normale Bildschirme */
	#landingpageText {
		font-size: 1.7em;
	}
}	

.spalteLandingpage { 
	display: flex;
	flex-direction: column;
	text-align: center;
	margin-left: 5%;
	margin-right: 5%;
	margin-bottom: 5%;
	padding-top: 1em;
	border: solid 2px var(--orange);
}
.wp-block-buttons {
	justify-content: center;
}
.wp-block-button__link {
	width: 12em;
}
/* Formatierung Landingpage ENDE */


#slider_385 { /* Zitate-Slider auf Training & Consulting-Seite */
	width: 100%;
	font-size: 1.2em;
}

/* Referenzen-Slider */
#slider_395 .owl-item {
	display: flex;
	justify-content: center;
	align-items: center;
}
#slider_395 .owl-item p{
	display: flex;
	justify-content: center;
	align-items: center;
}

.owl-carousel.owl-loaded { /* notwendig, damit die Slider korrekt dargestellt werden! */
display: grid !important;
}

/* Formatierung für Fließtext */
.wp-block-group { /* gruppierte Absätze werden mit einem farbigen Hintergrund hinterlegt */
	background-color: var(--grauer-hintergrund);
	padding: 0.1em;
	padding-left: 0.5em;
	margin-bottom: 1em;
}

/* Die E-Mailadresse wird im Quelltext rückwärts geschrieben, um Harvest-Bots das Auslesen zu erschweren, durch diese Formatierung wird sie richtig dargestellt. */
.ltrText {
	unicode-bidi: bidi-override;
	direction: rtl;
}

/* Footer */
footer {
	display: flex;
	border-top: solid 1px var(--orange);
	justify-content: center;
}
.menu-footer-container {
	flex: 1;
	display: flex;
	justify-content: center; 
}
footer ul {
	flex: 1;
	display: flex;
	flex-flow: column;
	align-items: center;
	padding-left: 0;
}
 @media (min-width: 35em) {
	footer ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
	}
}
footer li {
	list-style: none;
	padding: 0.3em;
	margin-left: 1em;
	margin-right: 1em;
}
footer a {
	color: black;
	text-decoration: none;
}
footer li:focus,
footer li:hover,
footer li:active {
	background-color: var(--grauer-hintergrund);
}
footer a:focus,
footer a:hover,
footer a:active {    
    	text-decoration:underline;
}
/* main-content ENDE */
@font-face { /* Einbindung der Schriftart für den Text im Sidebanner */
    font-family: 'highlandgothicflfbold';
    src: url('fonts/highlandgothic_flf_bold-webfont.woff2') format('woff2'),
         url('fonts/highlandgothic_flf_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

#sidebanner { /* auf Geräten mit schmalem Bildschirm, wird der Sidebanner nicht angezeigt. */
	display: none;
}
@media (min-width: 35em) { 
	#sidebanner {
		width: 100px;
		border-left: 4px dotted #2b456a;
		border-bottom: 4px dotted #2b456a;
		writing-mode: vertical-lr; /* Text von oben nach unten */
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		position: relative; /* notwendig, damit die Pfeilspitze fest positioniert werden kann */
		margin-bottom: 2em;
	}
	#bannertext {
		transform: rotate(0.5turn); /* richtige Ausrichtung des Textes */
		font-family: 'highlandgothicflfbold', sans-serif;
		font-size: 35px;
		position: absolute;
		left: 22px;
		margin-top: 10px;
	}	
	#sidebanner .arrow {
		height: 20px;
		position: absolute;
		right: -9px;
		bottom: -12px;
	}
}

/* Das Sidebanner und die Slider werden in der Druckansicht ausgeblendet. */
@media print {
	#sidebanner, .white {
		display: none;
	}
}