/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Laden der Fonts */
@font-face {
 font-family: 'Inter';
 src: url('/wp-content/uploads/Inter-VariableFont_slntwght.ttf') format('truetype');
}

/* Vermeiden von vertikalem Scrollen bei überbreiten Elementen (entstehen durch PNGs, die wegen Schatten mit neg. Margin auf Content-Breite gezogen werden müssen) */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* feature image verstecken */
.featured-image {
	margin-top: -53px !important;
}

.site-content { /* nicht mehr ganz klar ob benötigt */
	max-width: 100vw;
}

/* weiteres Basis-Styling Seite */
.grid-container {
	max-width: 1280px;
}

.container.grid-container {
	width: 100%;
	margin-top: 60px;
}

.inside-article {
	box-sizing: content-box;
}

/* Footer immer ganz unten, auch wenn nicht genug Content in Seite ist */
body {
	min-height: 100vh;
	display: flex;
  flex-direction: column;
}

.site-footer {
	margin-top: auto !important;
}

/* keine Unterstriche bei Links */
a {
	text-decoration: none;
}

/* Überschreiben von zusätzlicher gepunkteter Linie in Kontaktformular beim Schreiben darin */
:focus-visible {
	outline: none;
}

/* Handling Header in Zusammenspiel mit JavaScript */
.site-header {
  position: fixed;
	width: 100vw;
  top: -1px;
  left: 0;
  z-index: 999;
	transition: all 0.3s ease-in-out, background 0.05s ease, border-radius 0s ease;
  transform: translateY(0); /* Header ausblenden */
}

.site-header.is-hidden {
  transform: translateY(-100%); /* Header einblenden */
}

.site-header .header-widget {
    transform: translate(0, 7px);
}

.menu-toggle {
  padding: 0px;
}

.inside-header {
  padding-top: 31px;
  padding-left: 34px;
  padding-right: 41px;
}

/* Navigation Header mobil */
.main-navigation.toggled .main-nav li {
  width: 100%;
  text-align: center;
}


/* Menü Ein-Aus-Klappen-Elemente Header */
.gp-icon svg {
  height: 1.5em;
  width: 1.5em;
	top: 0px;
  transform: translate(0, 7px);
}

/* Handling des "Hallo sagen"-Buttons im Header */
.button-container {}

.button-hover,
.button-container:hover .button-no-hover,
.button-container:active .button-no-hover {
	display: none;
}

.button-no-hover,
.button-container:hover .button-hover,
.button-container:active .button-hover {
	display: block;
}

/* Sichbarkeit Elemente Desktop und mobil. Verwendung Slider / Liste Projekte auf Landingpage und Sub-Footer (bei Projekten) */
.mobile-hide-container {
	visibility: visible;
}

.mobile-show-container {
	display: none;
}

/* Pfeil "Verbinden" im Kontakt-Element */
.line-svg {
  width: 100%; 
  height: 100%;
}

.line-svg line {
  stroke: black;
  stroke-width: 2;
}

/* Nach-Oben-Scrollen-Element */
.gp-icon.icon-arrow-up {
	display: unset;
	visibility: hidden;
}

.generate-back-to-top {
	bottom: 20px;
  right: 20px;
}

a.generate-back-to-top,
a.generate-back-to-top:focus {
	background-color: #fff;
	border-radius: 100px;
	width: 42px;
	height: 42px;
	box-shadow: 3px 3px 9px rgba(0,0,0,0.1);
	/*border: 5px solid var(--base);*/
	transition: 0.1s ease;
}

a.generate-back-to-top:hover {
  background-color: #fff;
	scale: 1.1;
	box-shadow: 3px 3px 12px rgba(0,0,0,0.15);
}
	
a.generate-back-to-top::before {
  content: url('/wp-content/uploads/arrow-back-up.svg');
	display: unset;
  width: fit-content;
  height: fit-content;
  vertical-align: sub;
}

/* Carousel-Slider Elemente überschreiben. (Aber teilweise auch direkt im CSS des PlugIns überschrieben) */
.carousel-slider .owl-stage {
  display: flex;
  align-items: center;
  justify-content: center;
}

body .carousel-slider__post {
	box-shadow: none;
}

.carousel-slider-outer-post-carousel .owl-item {
	align-self: baseline;
}

body .carousel-slider__post-header {
  overflow: hidden;
  border-radius: 17px;
  margin-bottom: 16px;
}

body .carousel-slider__post-image {
  border-top-left-radius: 17px;
  border-top-right-radius: 17px;
  transition: transform 0.3s ease;
}

body .carousel-slider__post-image:hover {
  transform: scale(1.1);
}

body .carousel-slider__post-title {
  margin: unset;
  min-height: unset;
}

body .carousel-slider__post-title h1 {
  font-size: inherit;
  margin: unset;
}

body .carousel-slider__post-excerpt {
  font-size: inherit;
  line-height: inherit;
  margin: unset;
  text-align: inherit;
}

/* Styling der Projekte-Seite (WP category) */
.wp-block-post-featured-image {
  margin-bottom: 16px;
}

:where(.wp-block-post-template.is-layout-grid) {
  gap: 35px;
}

.categories-selector ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 40px 0px 55px 0px;
}

.cat-item {
  display: block;
  padding: 1px 0.4lh;
  border-radius: 1lh;
	border: 2px solid;
  text-decoration: none;
  transition: 0.3s; 
}

.cat-item:hover {
  background-color: #000; 
}

.cat-item:hover a {
  color: #fff;
}

.current-cat,
.current-cat:hover {
	background-color: #000;
}

.current-cat a {
	color: #fff;
}

/* individueller Cursor bei Hover über Links zu Projekten */
.wp-block-post,
.carousel-slider__post {
	cursor: url('/wp-content/uploads/cursor_hover_project_0.png') 81 28, auto;
}

.wp-block-post a,
.carousel-slider__post a {
	cursor: url('/wp-content/uploads/cursor_hover_project.png') 81 28, pointer;
}

/* Zoom bei Hover über Bild mit Link zu Projekten */
.wp-post-image {
	transition: transform 0.3s ease;
}

.wp-block-post-featured-image {
	overflow: hidden;
	border-radius: 17px;
}

.wp-post-image:hover {
	transform: scale(1.1);
}

/* Styling weißer Stichpunkt-Zettel der Projekte auf Projekt-Seiten */
.tags-cloud-item {
  margin-right: 12px;
	margin-bottom: 16px;
  display: inline;
  padding: 0px 0.45lh 3px 0.45lh;
  border-radius: 1lh;
	border: 2px solid;
  text-decoration: none;
  transition: 0.3s; 
}

.tags-container {
  padding: 2px 0.75rem 1px 0.75em;
  border-radius: 1em;
  border: 1px solid;
}

/* Kontaktformular mit CF7 */
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
  color: var(--contrast);
  background-color: #fff;
  /*border-color: var(--base);*/
	border-radius: 17px;
	width: 97%;
	height: 3em;
	transition: border 0.4s ease;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
	color: var(--contrast);
  background-color: #fff;
  border-color: var(--contrast);
}

input[type="submit"],
input[type="submit"]:hover,
input[type="submit"]:focus {
  position: relative;
	color: unset;
  background-color: unset;
  border: unset;
  padding: unset;
}

.wpcf7-spinner {
	width: 0;
	margin: 0;
}

.wpcf7-spinner::before {
	width: 0;
}

.wpcf7-form label {
	margin-left: 5px;
	margin-bottom: 3px;
  display: flex;
}

.input-field {
	margin-bottom: 1.6em;
  display: flex;
  flex-direction: column;
}

.wpcf7-form-control-wrap {
	display: flex;
	flex-direction: column;
}

.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output, .wpcf7 form .wpcf7-response-output, .wpcf7 form.sent .wpcf7-response-output {
	border: unset;
	border-radius: unset;
	padding: unset;
	display: flex;
	width: fit-content;
	padding-bottom: 2px;
	margin-left: 0;
	border-bottom: 2px solid;
	border-bottom-color: #666666;
}

.wpcf7-not-valid-tip {
	color: #666666;
  margin-top: 5px;
}

input.wpcf7-not-valid,
textarea.wpcf7-not-valid {
	border-color: #666666;
}

/* Buttons mit Hover-Effekt */
.link-button input,
.link-button {
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.link-button {
	position: relative;
  color: #000;
  background-color: #fff;
  border-radius: 17px;
  border: 2px solid #000;
  padding: 2px 0.6em;
  display: flex;
  width: fit-content;
}

.link-button::before {
	content: '';
  position: absolute;
  color: #fff;
	font-family: Inter;
  background-color: #fff;
  border-radius: 17px;
  border: 2px solid #000;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 2px;
  left: 2px;
}

.footer-colors,
.footer-colors::before {
	color: var(--base);
	background-color: var(--contrast);
	border-color: var(--base);
}

.link-button.footer-colors:hover,
.link-button.footer-colors:active,
.link-button.footer-colors:hover a,
.link-button.footer-colors:active a {
	color: var(--contrast);
	background-color: var(--base);
}

.link-button:hover,
.link-button:active {
	color: #fff;
	background-color: #000;
	translate: 4px 4px;
}

.link-button a {
	transition: 0s;
}

.link-button:hover a,
.link-button:active a {
	color: #fff;
}

.link-button:hover::before,
.link-button:active::before {
	visibility: hidden;
}

.link-button-out::after,
.link-button-download::after {
	content: "";
	height: 0.8em;
	width: 0.8em;
	background-size: 0.8em;
  background-image: url('/wp-content/uploads/arrow-link-out.svg');
	background-repeat: no-repeat;
	margin-left: 0.4em;
	display: flex;
	align-self: center;
}

.link-button-out:hover::after,
.link-button-download:hover::after {
  background-image: url('/wp-content/uploads/arrow-link-out-white.svg');
}

.link-button-download::after,
.link-button-download:hover::after{
	rotate: 90deg;
}

/* Sprechblase-Element auf Studio-Seite */
.studio-sprechblase::before {
	content: '';
  height: 82px;
  width: 82px;
  top: -50px;
  margin: auto;
  display: flex;
  position: relative;
  background-color: var(--base-3);
  rotate: 45deg;
	z-index: -1;
}

/* Verwendung z.B. bei Einführungstext bei Studio */
.margin-bottom-30px {
	margin-bottom: 30px !important;
}

/* CSS-Slider in Projekt-Seiten */
.carousel {
	display: inline-flex;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
}

.carousel-inner {
	display: inline-flex;
	min-width: 100%;
	max-width: 200vw;
	justify-content: space-around;
	flex-shrink: 0;
}
	
.carousel-animate-left {
	animation: carousel-animation-left 80s linear infinite;
}
	
.carousel-animate-right {
	animation: carousel-animation-right 80s linear infinite;
}

.carousel-bergamont figure {
	margin-left: 1.5%;
	margin-right:1.5%;
}

.carousel-capelight figure,
.carousel-thermondo figure,
.carousel-pts figure {
	margin-left: 11px;
	margin-right: 11px;
}

.carousel-pts .carousel-inner {
	max-width: 300vw;
}

.carousel-capelight .carousel-animate-left {
	max-width: 267vw;
}

.large-hide-container { 
/* Sichbarkeit Elemente für extra-breite Bildschirme. Verwendet bei CSS-Slidern in Projekten */
	visibility: visible;
}

/* Schriften */
:is(h1, h2, h3, h4, h5, h6, p, a):where(.page-title, .headline-primary, .headline-secondary, .text-large) {
	margin: 0;
	padding: 0;
	border: 0;
	
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
}

/* ehemals h1 */
:is(h1, h2, h3, h4, h5, h6, p, a).page-title {
	font-size: 42px;
	margin-bottom: 20px;
	line-height: 1.2em;
	font-weight: 400;
	text-transform: none;

	font-weight: 800;
	font-size: 60px;
	margin-bottom: 30px;
}

/* ehemals h3 */
:is(h1, h2, h3, h4, h5, h6, p, a).headline-primary {
	font-size: 29px;
	margin-bottom: 20px;
	line-height: 1.2em;
	font-weight: 400;
	text-transform: none;

	font-weight: 700;
	font-style: normal;
	font-size: 28px;
	line-height: 42px;
}

/* ehemals h4 */
:is(h1, h2, h3, h4, h5, h6, p, a).headline-secondary {
	font-size: 24px;
	
	margin-bottom: 20px;
	
	font-weight: 700;
	font-style: normal;
	font-size: 20px;
	line-height: 1.4em;
	margin-bottom: 5px;
}

/* ehemals h2 */
:is(h1, h2, h3, h4, h5, h6, p, a).text-large {
	font-size: 35px;
	margin-bottom: 20px;
	line-height: 1.2em;
	font-weight: 400;
	text-transform: none;

	font-weight: 300;
	font-style: normal;
	font-size: 24px;
	line-height: 38px;
	margin-bottom: 50px;
}

@media (max-width: 768px) {
	:is(h1, h2, h3, h4, h5, h6, p, a).page-title {
		font-size: 40px;
		margin-bottom: 30px;
	}
	
	:is(h1, h2, h3, h4, h5, h6, p, a).headline-primary {
		font-size: 24px;
		line-height: 36px;
	}
	
	:is(h1, h2, h3, h4, h5, h6, p, a).headline-secondary {
		font-size: 18px;
		line-height: auto;
	}
	
	:is(h1, h2, h3, h4, h5, h6, p, a).text-large {
		font-size: 18px;
		line-height: 28px;
	}
}

@keyframes carousel-animation-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes carousel-animation-right {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@media (max-width: 1199px) {
  .large-hide-container { 
/* Sichbarkeit Elemente für extra-breite Bildschirme. Verwendet bei CSS-Slidern in Projekten */
    visibility: hidden;
    width: 0;
  }
}

@media (max-width: 768px) {
	/* Header */
	.mobile-hide-container {
		display: none;
		visibility: hidden;
		width: 0;
	}
	
	.mobile-show-container {
		display: flex;
	}
	
	.site-header .header-widget {
		order: -1;
    transform: translate(0, 14px);
    height: 0px;
    margin-top: 0px;
    margin-right: 60px;
		text-align: right;
	}
	
	.has-inline-mobile-toggle #site-navigation.toggled {
    margin-top: 1.5em;
  }
	
	.site-logo {
	  max-width: 44px;
		z-index: 1;
	}
	
	.inside-header {
		padding-top: 17px;
		padding-left: 23px;
		padding-right: 23px;
	}
	
	.wp-block-navigation__container {
		flex-direction: column;
		align-items: unset;
	}
	
	.mobile-menu-open .site-header {
		background-color: white;
		border-radius: 0 0 17px 17px;
	}
	
	/* Kontakt-Formular CF7 */
	input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
		color: var(--contrast);
		background-color: #fff;
		/*border-color: var(--base);*/
		border-radius: 17px;
		width: 91%;
		height: 3em;
		transition: 0.4s ease;
	}
	
	/* Button-Elemente mit kleinerem Text mobil */
	.link-button,
	.link-button input {
		font-size: 17px;
	}
}

/* Außschließlich wenn NICHT mobil: animierte Unterstriche in Menüs beim Hovern */
@media (min-width: 769px) {
	.main-navigation .main-nav ul li a::after {
		content: '';
		position: absolute;
		left: 50%;
		width: 0;
		bottom: 13px; /* Distance of the line from the link */
		height: 2px; /* Thickness of the line */
		background-color: #000; /* Color of the line */
		transition: 0.2s ease;
	}

	.main-navigation .main-nav ul li a:hover::after {
		width: 67%;
		left: 16.5%;
	}
	
	.wp-block-navigation ul li a::after {
		content: '';
		position: absolute;
		left: 50%;
		width: 0;
		bottom: -2px; 
		height: 2px; 
		background-color: var(--base); 
		transition: 0.2s ease;
	}
	
	.wp-block-navigation ul li a:hover::after {
		width: 100%;
		left: 0;
	}
}