/*
Projekt       : DI Musterwebsite Maler
Komponente    : Wordpress
Datei         : style.css
Beschreibung  : Spezielle Anpassungen des Themes "twentytwentyfour" für die Website "maler.muster-webdesign.de"
Author:         Datenwege Informatik
Author URI:     http://Datenwege-Informatik.de
Template:       twentytwentyfour
Version:        1.0
Historie
   30.06.24  Gernot Daum  Beginn der Implementierung
   16.07.24  Gernot Daum  Fonteinbindung
*/

/* Fonts */
@font-face {
  font-family: 'Raleway Light';
  font-style: normal;
  src: url('assets/fonts/Raleway-Light.woff2') format('woff2'), 
       url('assets/fonts/Raleway-Light.woff') format('woff'), 
       url('assets/fonts/Raleway-Light.ttf') format('truetype'), 
       url('assets/fonts/Raleway-Light.eot') format('embedded-opentype');
}
@font-face {
  font-family: 'Raleway Regular';
  font-style: normal;
  src: url('assets/fonts/Raleway-Regular.woff2') format('woff2'), 
       url('assets/fonts/Raleway-Regular.woff') format('woff'), 
       url('assets/fonts/Raleway-Regular.ttf') format('truetype'), 
       url('assets/fonts/Raleway-Regular.eot') format('embedded-opentype');
}
@font-face {
  font-family: 'Raleway Semibold';
  font-style: normal;
  src: url('assets/fonts/Raleway-Semibold.woff2') format('woff2'), 
       url('assets/fonts/Raleway-Semibold.woff') format('woff'), 
       url('assets/fonts/Raleway-Semibold.ttf') format('truetype'), 
       url('assets/fonts/Raleway-Semibold.eot') format('embedded-opentype');
}
@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');
}
strong {font-family: 'Raleway Semibold', sans; font-weight: normal}

/* Eigene Konstanten body */
body {
	/*   Farben */
	--wp--custom--color--background: #c0c7ce;
	--wp--custom--color--transparency01: rgba(255, 255, 255, 0.55);

	
	/*   Schriften */
	--wp--preset--font-family--body: "Raleway Light", -apple-system, BlinkMacSystemFont, sans-serif;
	--wp--preset--font-family--heading: "Raleway Regular", -apple-system, BlinkMacSystemFont, sans-serif;
  --wp--preset--font-size--x-small: clamp(9pt, 0.7vw, 24pt);
	--wp--preset--font-size--small: clamp(10pt, 0.9vw, 32pt);
  --wp--preset--font-size--medium: clamp(13pt, 1.3vw, 36pt);
  --wp--preset--font-size--large: clamp(16pt, 2vw, 48pt);
  --wp--preset--font-size--x-large: clamp(24pt, 3.2vw, 90pt);
  --wp--preset--font-size--big: clamp(30pt, 4vw, 115pt);
  --wp--preset--font-size--huge: clamp(36pt, 4.8vw, 120pt);

  /*   Breiten und Abstände */ 
  --mal--spacing-seam: 6px;
  --global--spacing-unit: clamp(7.5px, 0.7813vw, 30px);
  --mal--spacing-regular: var(--global--spacing-unit);
  --mal--spacing-large: calc(2 * var(--global--spacing-unit));
  --mal--spacing-x-large: calc(3 * var(--global--spacing-unit));
  --mal--spacing-big: calc(4 * var(--global--spacing-unit));
  --mal--spacing-huge: calc(6 * var(--mal--spacing-regular));
  --global--spacing-horizontal: var(--mal--spacing-regular);
  --global--spacing-vertical: var(--mal--spacing-large);
  --global--spacing-section: var(--mal--spacing-big);  
  --default-outer-margin-mult: 4;
	--default-outer-margin: calc(var(--default-outer-margin-mult) * var(--global--spacing-horizontal));
	--default-outer-spacing: calc(2 * var(--default-outer-margin));
  
  --street-width: 1440px;
  --responsive--street-width: min(calc(100vw - var(--default-outer-spacing)), var(--street-width));
  --responsive--content-width: var(--responsive--street-width);
  --constriction-width: 1120px;
  --responsive--constriction-width: min(calc(100vw - var(--default-outer-spacing)), var(--constriction-width));
  --single-track-width: 800px;
  --responsive--single-track-width: min(calc(100vw - var(--default-outer-spacing)), var(--single-track-width));
  --path-width: 480px;
  --responsive--path-width: min(calc(100vw - var(--default-outer-spacing)), var(--path-width));
  --margin-street: max(var(--default-outer-margin), calc((100vw - var(--street-width)) / 2));
  --margin-constriction: max(var(--default-outer-margin), calc((100vw - var(--constriction-width)) / 2));
  
  /*   Sonstiges */
  --mal-animation-time: 0.4s;
  --mal-border-radius: var(--mal--spacing-regular);
	--mal-border-radius-large: var(--mal--spacing-large);
	--mal-border-radius-btn: var(--mal--spacing-seam);
}

/* Allgemein */

/* 	 Theme Reset */
.has-global-padding {padding-right: 0; padding-left: 0}
.has-global-padding > .alignfull {margin-right: 0; margin-left: 0}
.wp-block-table td, .wp-block-table th {border: none; padding: 0}
:where(.wp-site-blocks :focus) {outline-width: 0}
.wp-block-post-featured-image img, 
.wp-block-post-featured-image .block-editor-media-placeholder, 
.wp-block-post-featured-image .wp-block-post-featured-image__overlay {border-radius: 0}
#content .entry-content > *:not(.alignfull), #footer > * {
	max-width: var(--responsive--content-width);
	margin-left: auto;
	margin-right: auto
}

h1, h2, h3 {text-align: center}
#content h2 {font-size: var(--wp--preset--font-size--large)}
#content h3 {font-size: var(--wp--preset--font-size--medium)}
.background.colours {
	background: var(--wp--preset--gradient--cool-to-warm-spectrum)
}
 
/*   Diverse Standards */
body {hyphens: auto}
.listcaption {margin-bottom: 4px}
.listcaption + * {margin-top: 4px; margin-block-start: 4px}

/* Kopf */
#masthead .overlay {
	width: 100%;
	background: var(--wp--custom--color--transparency01)
}
#masthead .overlay > * {
	padding: var(--mal--spacing-large) var(--mal--spacing-regular);
	width: 100%
}
.wp-block-site-logo {
  background: var(--wp--custom--color--transparency01)
}

/* Fuß */
#footer {
	color: white;
	background: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
  hyphens: none
}
#footer a {color: var(--wp--preset--color--contrast-3);	text-decoration: none}
#footer a:hover {color: var(--wp--preset--color--accent-3)}
#footer td {display: block; float: left}
#footer td:nth-child(1) {width: 80px}

/* Navigation */
.menu {
	display: flex;
	list-style-type: none; 
	padding: 0 var(--default-padding) 0 var(--default-padding)
}
.menu li {margin-right: var(--mal--spacing-large)}
.menu a {
	font-family: var(--wp--preset--font-family--heading); 
	text-decoration: none;
	letter-spacing: 2px
}
 
/* Inhalt */

/*   Abschnitte */
#content section {
	margin-top: calc(3 * var(--global--spacing-vertical));
	margin-bottom: calc(3 * var(--global--spacing-vertical))
}
#content .background {
	margin-top: 0;
	margin-bottom: 0;
	padding: var(--global--spacing-section) var(--mal--spacing-large);
}
#content section > * {
	max-width: var(--responsive--street-width);
	margin-left: auto;
	margin-right: auto
}
#content article {
	margin-top: calc(2 * var(--global--spacing-vertical));
	margin-bottom: calc(2 * var(--global--spacing-vertical))
}

/*   Überlagerungen */
.overlay-anchor {position: relative}
.overlay {
	position: absolute;
	width: 100%;
	max-width: none;
	top: 0;
	left: 0;
	margin: 0
}
.overlay:not(.alignfull) > * {
	 width: var(--responsive--content-width);
	 margin-left: auto;
	 margin-right: auto
}
.overlay.alignleft > * {margin-left: 0 !important}
.overlay.alignright > * {margin-right: 0 !important}

/*   Kacheln */
.tile-navigation > * {margin: 0}
.tile-navigation .overlay {
	display: flex;
	height: 100%;
	align-items: center
}
.tile-navigation .overlay a {
	display: block;
	max-width: 220px;
	margin-left: auto;
	margin-right: auto;
	padding: var(--mal--spacing-regular);
	color: var(--wp--preset--color--accent);
	background: var(--wp--custom--color--transparency01);
	text-decoration: none; 
	text-align: center;
	border: 2px solid var(--wp--preset--color--accent);
	border-radius: var(--mal-border-radius-btn);
	transition: all var(--mal-animation-time);
}
.tile-navigation .overlay a:hover {
	color: white;
	background: var(--wp--preset--color--accent)
}

/*   Überschriftblock "Double Caption" */
#content .double-caption {
	text-align: center;
	max-width: var(--responsive--single-track-width)
}
.double-caption > *:nth-child(1) {
	padding-bottom: var(--global--spacing-vertical);
  border-bottom: 3px groove var(--wp--preset--color--accent)
} 
.double-caption > *:nth-child(2) {
	padding-top: var(--global--spacing-vertical);
  margin-top: 0
} 

/*   Designelement Story */
.stories {--js-min-height: 100px}
.story {--js-height: 200px; gap: 0}
.story .wp-block-group:nth-child(1), .story figure:nth-child(1) img {
	border-radius: var(--global--spacing-unit) 0 0 var(--global--spacing-unit)
}
.story .wp-block-group:nth-child(2), .story figure:nth-child(2) img {
	border-radius: 0 var(--global--spacing-unit) var(--global--spacing-unit) 0
}
.stories .content, .stories .picture  {width: 50%;}
.stories .content  {min-height: var(--js-min-height)}
.story .picture img {height: var(--js-min-height); object-fit: cover}
.stories.pic-width1 .picture  {width: 40%}
.stories.pic-width1 .content {width: 60%}
.story .content {
	padding: var(--global--spacing-vertical);
	border-radius: var(--mal-border-radius-large);
	background: var(--wp--preset--color--contrast-2);
	font-size: var(--wp--preset--font-size--s-medium)
} 

/*     Kartenvariante - immer von oben nach unten */
.cards {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mal--spacing-regular);
	--js-cont-height: 100px
}
.cards .story .content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--js-cont-height);
}
#content .cards > .wp-block-group {margin-top: 0}
#content .col-2 > .wp-block-group {max-width: calc(50% - var(--mal--spacing-regular))}
#content .col-3 > .wp-block-group {max-width: calc(33.33% - 2 * var(--mal--spacing-regular) / 3)}
#content .col-4 > .wp-block-group {max-width: calc(25% - 3 * var(--mal--spacing-regular) / 4)}
#content .col-5 > .wp-block-group {max-width: calc(20% - 4 * var(--mal--spacing-regular) / 5)}
#content .col-6 > .wp-block-group {max-width: calc(16.66% - 5 * var(--mal--spacing-regular) / 6)}
.cards .story {max-width: 420px; margin-left: auto; margin-right: auto}
.cards .story *:nth-child(1) {
	border-radius: var(--mal-border-radius-large) var(--mal-border-radius-large) 0 0
}
.cards .story *:nth-child(2) {
	border-radius: 0 0 var(--mal-border-radius-large) var(--mal-border-radius-large)
}

/*     Regenbognfarben */
#content .rainbow1 .story:nth-child(4n+1) .picture {background: var(--wp--preset--color--accent-5)}
#content .rainbow1 .story:nth-child(4n+2) .picture {background: var(--wp--preset--color--accent-2)}
#content .rainbow1 .story:nth-child(4n+3) .picture {background: var(--wp--preset--color--accent-3)}
#content .rainbow1 .story:nth-child(4n+4) .picture {background: var(--wp--preset--color--accent-4)}
#content .rainbow2 .story:nth-child(4n+1) .content {background: var(--wp--preset--color--accent-2)}
#content .rainbow2 .story:nth-child(4n+2) .content {background: var(--wp--preset--color--accent-3)}
#content .rainbow2 .story:nth-child(4n+3) .content {background: var(--wp--preset--color--accent-4)}
#content .rainbow2 .story:nth-child(4n+4) .content {background: var(--wp--preset--color--accent-5)}

/*   Tabellen */
.valuepairs {display: flow-root}
.valuepairs div {float: left; padding: 2px 12px 2px 0}
.valuepairs .name {clear: left; width: calc(30% - 12px); max-width: 120px}
.valuepairs .value {width: calc(70% - 12px)}
.valuepairs .line {width: calc(100% - 12px)}

/*   Standard Breiten */
#content .path {max-width: var(--responsive--path-width)}

/*   Rechtliche Seiten */
.legal .entry-content {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto
}
.legal .entry-content > * {
	max-width: var(--single-track-width);
	margin-left: 0 !important;
}
.legal .wp-block-post-title {
	margin-bottom: calc(var(--global--spacing-vertical));
	font-size: var(--wp--preset--font-size--x-large)
}
.legal h1 {font-size: var(--wp--preset--font-size--large)}
.legal h2, .legal h3 {font-size: var(--wp--preset--font-size--medium)}
.legal div, .legal p {font-size: var(--wp--preset--font-size--small)}
.legal h1, .legal h2, .legal h3 {text-align: left}
.legal #content section {
	margin-top: var(--global--spacing-vertical);
	margin-bottom: var(--global--spacing-vertical)
}
.legal .valuepairs .name {width: calc(40% - 12px); max-width: 100px}
.legal .valuepairs .value {width: calc(60% - 12px)}

/*     Akkordeon Datenschutzseite */
.legal {--js-height-content: 100px}
.accordion-item > * {padding-left: calc(2 * var(--global--spacing-unit))}
.accordion-item > *:nth-child(1) {position: relative; cursor: pointer}
.accordion-item > *:nth-child(1):before {
  position: absolute; 
  top: 0;
  left: 0; 
  content: "▼"
}
.accordion-item > *:nth-child(2) {
  overflow: hidden;
  height: 0;
  transition: height 0.5s
}
.accordion-item.open > *:nth-child(1):before {content: "▲"}
.accordion-item.open > *:nth-child(2) {height: var(--js-height-content)}


/* Responsive */

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

/*   Tablett Landscape */
@media only screen and (max-width: 960px) {
	#content .wide1 {display: none}
	#content .small1 {display: initial}
	#content div.small1 {display: block}
  #content .col-3 > .wp-block-group {max-width: calc(50% - var(--mal--spacing-regular))}
}

/*   Tablett Portrait / großer Umbruch */
@media only screen and (max-width: 782px) {
}

/*   Smartphone groß */
@media only screen and (max-width: 600px) {
  #content .col-3 > .wp-block-group {max-width: 100%}
}

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

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