/*
Projekt       : Dr Strefan Beulke
Komponente    : Wordpress
Datei         : style.css
Beschreibung  : Spezielle Anpassungen des Themes "twentytwentytwo" für die Website "beulke-koehler.de"
Author:         Datenwege Informatik
Author URI:     http://Datenwege-Informatik.de
Template:       twentytwentytwo
Version:        1.0
Historie
   06.09.22  Gernot Daum  Beginn der Implementierung
   15.09.22  Gernot Daum  Eigene Website Fonts hinzugefügt
*/

/* Fonts */
@font-face {
  font-family: 'Roboto Regular';
  font-style: normal;
  src: url('assets/fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/roboto-v18-latin-regular.woff') format('woff'),   /* Modern Browsers */
       url('assets/fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/roboto-v18-latin-regular.eot') format('embedded-opentype'); /* IE6-IE8 */
}
@font-face {
  font-family: 'Roboto Bold';
  font-style: normal;
  src: url('assets/fonts/roboto-v18-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/roboto-v18-latin-700.woff') format('woff'),   /* Modern Browsers */
       url('assets/fonts/roboto-v18-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/roboto-v18-latin-700.eot') format('embedded-opentype'); /* IE6-IE8 */
}
@font-face {
  font-family: 'Roboto Italic';
  font-style: normal;
  src: url('assets/fonts/roboto-v18-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/roboto-v18-latin-italic.woff') format('woff'),   /* Modern Browsers */
       url('assets/fonts/roboto-v18-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/roboto-v18-latin-italic.eot') format('embedded-opentype'); /* IE6-IE8 */
}
@font-face {
  font-family: 'Sabon';
  font-style: normal;
  src: url('assets/fonts/Sabon_Roman.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/Sabon_Roman.woff') format('woff'),   /* Modern Browsers */
       url('assets/fonts/Sabon_Roman.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/Sabon_Roman.eot') format('embedded-opentype'); /* IE6-IE8 */
}
@font-face {
  font-family: 'Sabon Bold';
  font-style: normal;
  src: url('assets/fonts/Sabon_Bold.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/Sabon_Bold.woff') format('woff'),   /* Modern Browsers */
       url('assets/fonts/Sabon_Bold.ttf') format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/Sabon_Bold.eot') format('embedded-opentype'); /* IE6-IE8 */
}
@font-face {
  font-family: "FontAwesome Solid";
  font-style: normal;
  src: url('assets/fonts/fa-solid-900.woff2') format('woff2'),
       url('assets/fonts/fa-solid-900.woff') format('woff'),
       url('assets/fonts/fa-solid-900.ttf') format('truetype'),
       url('assets/fonts/fa-solid-900.eot') format('embedded-opentype');
}
body, p {font-family:'Times New Roman',sans; font-weight: normal}
h1, h2, h3, h4, h5, h6, .site-title {font-family:'Times New Roman', sans; ; font-weight: normal}
/* strong {font-family:'Roboto Bold', sans; font-weight: normal} 
em {font-family:'Roboto Italic', sans; font-weight: normal} */
a:where(:not(.wp-element-button)) {
	font-family:'Roboto Regular',sans;
}


/* Eigene Konstanten body */
body {
  /*   Fonts */ 
  --wp--preset--font-family--source-serif-pro: 'Times New Roman';
  
  --blk--font-size--small:    clamp(8pt, 0.8vw, 10.5pt);
	--blk--font-size--medium:   clamp(10pt, 0.9vw, 12pt);
	--blk--font-size--x-medium: clamp(11.5pt, 1.125vw, 14pt);
  --blk--font-size--large:    clamp(13pt, 1.25vw, 18pt);
  --blk--font-size--x-large:  clamp(16pt, 1.7vw, 24pt);
  --blk--font-size--huge:     clamp(26pt, 2.5vw, 36pt);
  --wp--preset--font-size--small: var(--blk--font-size--small);
  --wp--preset--font-size--medium: var(--blk--font-size--medium);
  --wp--preset--font-size--large: var(--blk--font-size--large);
  --wp--preset--font-size--x-large: var(--blk--font-size--x-large);
  
  
  /*   Farben */
	--blk--color--blue: #33487f;
	--blk--color--red: #b00a0a;
	--blk--color--grey: #8f8f9b;
	--blk--color--grey-light: #aeaeae;
  
  /*   Breiten und Abstände */
  --street-width: 1440px;
  --constriction-width: 1120px;
  --single-track-width: 880px;
  --global--spacing-seam:    calc(var(--global--spacing) / 3);
  --global--spacing-x-small: calc(var(--global--spacing) / 2);
  --global--spacing-small:   calc(2 * var(--global--spacing) / 3);
  --global--spacing:         clamp(0.7rem, 1vw, 1rem);
  --global--spacing-medium:  calc(2 * var(--global--spacing));
  --global--spacing-large:   calc(3 * var(--global--spacing)); 
  --global--spacing-x-large: calc(4 * var(--global--spacing)); 
}
 

/* Allgemein */
/*   Theme Reset */
.wp-site-blocks {
	max-width: var(--street-width);
	margin-left: auto;
	margin-right: auto
}
main .entry-content > *:where(:not(.alignleft):not(.alignright):not(.single-track)) {
  max-width: var(--constriction-width)
}
.wp-block-navigation .wp-block-navigation-item a:hover {text-decoration: none}

/*   Sonstiges */
h2 {font-size: var(--wp--preset--font-size--large)}
h3 {font-size: var(--blk--font-size--x-medium)}
#content h2.section-title {
	margin-top: var(--global--spacing-large);
	margin-left: calc(-1 * var(--global--spacing-large)) !important
}
h2.section-title strong {font-size: var(--blk--font-size--huge)}
a {color: var(--blk--color--grey); text-decoration: none}
a:hover {text-shadow: 1px 0 var(--blk--color--grey)}
.current-menu-item > a {text-shadow: 1px 0 var(--blk--color--grey)}
ul {list-style-image: url('assets/icons/bullet-blue.jpg')}
.wp-block-quote cite, .wp-block-quote footer {
  font-size: var(--blk--font-size--small)
}
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  width: 80%;
  max-width: 700px;
  border-bottom: 1px solid
}


/* Kopf */
#masthead {
	padding-top: var(--global--spacing-large) !important;  
	padding-bottom: var(--global--spacing-medium)  !important;  
}
#page-header {
	margin-block-end: 60px
}
#page-header .overlay {
	margin: 0;
	padding-left: 2.4%;
	width: 60%;
	height: 100%;
	/* background: rgba(255, 255, 255, 0.6) */
}
#page-header .overlay h1 {
	display: inline-block;
	padding-top: 41%;
	line-height: 1;
	text-transform: uppercase
}
#page-header .overlay h1:before {
	position: absolute;
	left: 0;
	top: 0;
	padding-top: 39.8%;
	content: url('assets/icons/bullet-blue-header.jpg');
}
#page-header .overlay p {
	display: inline-block;
	margin: 0 12% 0 0;
	float: right;
	font-style: italic 
}
#page-header .overlay p .source {
	padding-left: 45px;
	font-style: normal
}

/* Fuß */
#footer a {
	color: var(--blk--color--grey);
	font-size: var(--blk--font-size--small);
}

 
/* Navigation */
.wp-block-navigation__container > li > a {
	color: var(--blk--color--blue);
	text-transform: uppercase
}


/*   Hauptmenü als Kopfmenü */
#masthead li.current-menu-item > a {color: var(--blk--color--blue)}
#masthead li:not(:first-child) {padding-left: var(--global--spacing-medium)}
#masthead .has-child li {min-width: 240px; padding-left: 0}

/*   Hauptmenü als Seitenmenü */
#content .wp-block-navigation {width: 240px}
#content .wp-block-navigation__container {flex-direction: column; align-items: flex-end}
#content .main .wp-block-navigation__container > li:not(:first-child),
#content .legal {margin-top: var(--global--spacing)}
#content .wp-block-navigation__submenu-container {
	position: relative; 
	width: auto;
	height: auto;
	visibility: visible;
  opacity: 1;
  border: none
}
#content .wp-block-navigation-item__content {
	text-align: right;
  padding: 0
}
#content .wp-block-navigation-submenu li > a {
	font-size: var(--blk--font-size--small);
	color: var(--blk--color--grey)
}
#content .wp-block-navigation__container > li > a {color: var(--blk--color--blue)}
#content .wp-block-navigation__submenu-icon {display: none}
#content .wp-block-navigation-item {
  flex-direction: column;
  align-items: flex-end
}


/* Inhalt */

.wp-site-blocks > * + main {margin-block-start: 0}
#content {align-items: stretch}	
#content > * {
	padding-left: var(--global--spacing-large); 
	padding-right: 30px; 
	border-right: 2px solid var(--blk--color--grey-light)
}
#content .wp-block-post-content {flex-grow: 1}
#content .wp-block-post-content > * {
	max-width: var(--single-track-width);
	margin-left: 0 !important;
	margin-right: auto
}

/*   Überlagerungen */
.overlay-anchor {position: relative}
.overlay-anchor figure {margin-bottom: 0}
.overlay, .overlay-item {
	position: absolute;
	width: 100%;
	max-width: none;
	top: 0;
	left: 0;
	margin: 0
}

/* Startseite */
.home .wp-block-site-logo {opacity: 0}
.home .side-menu {display: none}
.home #content .wp-block-post-content > * {
  margin-left: auto !important;
  margin-right: auto !important;
}

/*   Getwid Blöcke */
.wp-block-getwid-accordion__header a {color: var(--blk--color--blue)}


/* Responsive */

/*   Kleiner Bildschirm */
@media only screen and (max-width: 1120px) {
}

/*   Tablett Landscape */
@media only screen and (max-width: 960px) {
}

/*   Tablett Portrait / großer Umbruch */
@media only screen and (max-width: 781px) {
	#content {flex-direction: column}
}

/*   Smartphone groß */
@media only screen and (max-width: 599px) {
}

/*   Smartphone */
@media only screen and (max-width: 480px) {
}

/*   Smartphone klein */
@media only screen and (max-width: 400px) {
}