/*
 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
*/
.site-branding, .main-navigation {z-index: 100;}

/*Header / Footer Abstände schick*/
@media (min-width: 769px){
.main-title {margin-top: 20px !important;}
.menu-toggle {margin-left: -65px;}
	body {
    --gp-slideout-width:50vw;
	}
}

/*Burger-Menu größer bei kleineren Bildschirmen*/.main-navigation .menu-toggle {font-size: 1.6rem;}

/*Angeheftete Navigation*/
.main-navigation.navigation-stick.has-sticky-branding {color: white!important; background: #2b2a33; opacity: 0.8; padding-top: 3px; padding-right: 0px; padding-left: 10px; padding-bottom: 3px;}
.main-navigation.sticky-navigation-transition .main-nav > ul > li > a:hover {color: white !important;}
.main-navigation.sticky-navigation-transition .main-nav > ul > li > a {color: white !important; background: none;}
.main-navigation.has-sticky-branding.navigation-stick .menu-toggle {padding-top: 8px; color: white; font-size: 1.6rem;}
@media (min-width: 1200px){
	p.main-title a {min-width: 150px; display: flex;}}
/*Ende angeheftete Navigation*/

/*Handy Navigation mehr Luft*/	
	#generate-slideout-menu .slideout-menu li {margin-top: 50px; margin-left: 50px; padding-left: 5px;}

/*Headline zu Mengentext ausrichten*/
@media (min-width: 1200px){
h1 {margin-left: -5px;}
	h2 {margin-left: -3x;}}
.buttons {margin-left: -0px; font-family: ITC Avant Garde Gothic Pro;}

/*Text bunt*/
.site-description, .fade-in-color {
  background-clip: text;
  background-image: linear-gradient(to right, rgba(103,0,161,1) 0%, rgba(250,0,193,1) 51%, rgba(39,0,255,1) 100%);
  }
.copyright-bar {
  background-clip: text;
  background-image: linear-gradient(to right, rgba(103,0,161,1) 0%, rgba(250,0,193,1) 51%, rgba(39,0,255,1) 100%);
	color:#bbb;
  }
/*End Text bunt*/

/*Fade in Text-Effekt*/
.fade-in-text {
  animation: fadeIn 3s;
	-webkit-animation: fadeIn 3s;
  -moz-animation: fadeIn 3s;
  -o-animation: fadeIn 3s;
  -ms-animation: fadeIn 3s;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
	
@-moz-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-o-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@-ms-keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}/*End Fade in Text*/

/*Barrierefreiheit*/
/*Tastatureingabe*/
*:focus:not(:focus-visible) {
    outline: none;}
*:focus-visible {
outline: 3px !important; outline-style: solid !important; outline-color: grey; !important; color: black !important; background-color: #f0f0f0; border-radius: 0px !important;}

.main-navigation .main-nav ul li a, .site-info a {position: relative; z-index: 10;}

/*Drehung Icons bei hover*/
@keyframes rotating {
	0% {rotate: 0;}
	100% {rotate: 1turn;}
}
.gb-icon:hover {
	animation: rotating 0.8s ease-in-out;} 

.generate-back-to-top:hover {
	animation: rotating 1s ease-in-out;}
.navigation-branding img:hover {
	animation: rotating 1.2s ease-in-out;}
/*End Drehung bei hover*/

/*Dinge schräg stellen*/
.rotate {
	transform: rotate(15deg);}

/*Regenbogen in Button*/
.btn {
	position: relative;
	&::before{
		transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		content: '';
		height: 100%;
		background: grey;
		position: absolute;
		top: 0;
		left: 0;
	}
		 		
	&::before{
		border-radius: 50px;
		width: 5px;
		background: linear-gradient(to right, grey 5px, rgba(103,0,161,1) 0%, rgba(250,0,193,1) 51%, rgba(39,0,255,1) 100%);}
	
	&:hover{
		&::before{
		background: linear-gradient(to right, rgba(103,0,161,1) 0%, rgba(250,0,193,1) 51%, rgba(39,0,255,1) 100%);
		width: 100%;
		opacity: 0.5;
		z-index 0 !important;}
		}
}
/*Regenbogen Navigation*/
.btn2 {
	position: relative;
	&::before{
		transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		content: '';
		height: 100%;
		background: grey;
		position: absolute;
		top: 0;
		left: 0;
	}
		 		
	&::before{
		border-radius: 50px;
		width: 3px;
		background: linear-gradient(to right, grey 5px, rgba(103,0,161,1) 0%, rgba(250,0,193,1) 51%, rgba(39,0,255,1) 100%);}
	
	&:hover{
		&::before{
		background: linear-gradient(to right, rgba(103,0,161,1) 0%, rgba(250,0,193,1) 51%, rgba(39,0,255,1) 100%);
		width: 100%;
		opacity: 0.5;
		z-index 0 !important;}
		}
}

/*Unterstrichene Links im Mengentext*/
.btn3 {
	position: relative;
	&::before{
		transition: all 0.85s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		content: '';
		height: 30%;
		background: grey;
		position: absolute;
		margin-top: 1em;
		top: 0;
		left: 0;
	}
		 		
	&::before{
		border-radius: 50px;
		width: 0px;
		background: linear-gradient(to right, grey 5px, rgba(103,0,161,1) 0%, rgba(250,0,193,1) 51%, rgba(39,0,255,1) 100%);}
	
	&:hover{
		&::before{
		background: linear-gradient(to right, rgba(103,0,161,1) 0%, rgba(250,0,193,1) 51%, rgba(39,0,255,1) 100%);
		width: 100%;
		opacity: 0.5;
		z-index 0 !important;}
		}
}

/*Social Media grau bei hover*/
	.gb-icon a:hover {border-radius: 30px; color: white !important; background-color: #f0f0f0 !important;}

/*keine Verschiebungen rechts links über den sichtbaren Bereich hinaus*/
body {
    overflow-x: hidden;}

/*neue Lightbox von WordPress (im Bildwidget) Background dunkel*/
.wp-lightbox-overlay .scrim {background-color: #2b2a33 !important; opacity: 0.8;}

/*Automatische Silbentrennung*/
p {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;}

/* LISTENPUNKTE in CD Farbe, Listen linksbündig ausrichten*/
ul li::marker, 
ol li::marker  {
  color: #2b2a33; text-align: right;}

ul li {text-align: left;}
.site-content li {margin-left: -30px;}
/*End LISTENPUNKTE*/

/*SCROLLBALKEN anpassen*/
/* width */
::-webkit-scrollbar {
  width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 0px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 0px;
}
/*Scrollbar Firefox CD-Farbe*/
* {scrollbar-color: #fff #2b2a33;}

.generate-back-to-top {
    border-radius: 100%;
	line-height: 45px;
	width: 45px;
	z-index: 99;
	!important;
}

/*Back-to-top mobil*/
@media(max-width:768px) {
	.generate-back-to-top {margin-bottom: -15px; margin-right: -15px;}
	.inside-site-info {padding-left: 20px; padding-right: 19px; padding-bottom: 30px}
}	
/*Back-to-top Desktop*/
@media(min-width:769px) {
	.generate-back-to-top {margin-bottom: -18px; margin-right: -18px;}}
	
/*Schriftgrößen*/
.main-navigation a {font-size: clamp(1.125rem, 1.061rem + 0.2927vw, 1.5rem);}
p {font-size: clamp(1.125rem, 1.0962rem + 0.1026vw, 1.25rem);}
.buttons {font-size: clamp(1.375rem, 1.2885rem + 0.3077vw, 1.75rem);}
h1 {font-size: clamp(3rem, 0.6616rem + 4.9756vw, 8.125rem); z-index: 10;}
h2 {font-size: clamp(1.5rem, 0.6923rem + 2.8718vw, 5rem);}
h3 {font-size: clamp(1.4375rem, 1.1707rem + 1.2195vw, 3rem);}
h4 {font-size: clamp(1.4375rem, 1.2561rem + 0.8293vw, 2.5rem);}
h5 {font-size: clamp(1.4375rem, 1.2561rem + 0.8293vw, 2.5rem);}
@media (max-width: 768px){
	.main-navigation a {font-size: 1.8rem}}

/*Fontgröße von clamp auf vh für die mobile Ansicht (200 Prozent Vergrößerung, kein overflow)*/
@media (max-width: 768px){
	.allyh2 {font-size: 5.5vh !important;}
	body {--gp-slideout-width:85vw;}
	.main-navigation .main-nav > ul {margin-top: 2vh;}
}

/*Burger-Menu (mobiles Menu) WEISS auf der Sartseite zwischen 769px - 1200px*/
@media (min-width: 769px) and (max-width: 1200px){.page-id-7035 .main-navigation .menu-toggle {color: white;}}

/*Portfolio-Sektion Startseite Texte einblenden bei hover*/

@media (max-width:1024px) {.texthover {opacity:1; color: black; background-color: #2b2a33 !important; opacity: 0.8; padding-left: 8px; padding-right: 8px; padding-top: 5px;}}

@media (min-width:1025px) {
.page-id-7536 .texthover {font-size: 3rem; padding: 20px;}
.texthover {opacity:0;}
	.imghover:hover .texthover {opacity:1; transition-timing-function: ease-in-out; transition: 0.5s;}
	.imghover:focus .texthover {opacity:1; transition-timing-function: ease-in-out; transition: 0.5s; background-color: black; padding-top: 25px;}
	.imghover:hover {z-index: 20;}

.portfocus a:focus {opacity:1; transition-timing-function: ease-in-out; transition: 0.2s;}
}

/*Styling Kontaktformular*/
.wpforms-field-label, .wpforms-field-description {font-weight: 400; color: white; margin-left: 3px}
.wpforms-field-description {font-size: 1rem; line-height: 1.3rem; margin-top: 5px;}
.wpforms-field-description a:hover {color: var(--base);}
.wpforms-field-required {border-radius: 30px !important; margin-top: 3px !important;}
input[type="text"]:focus {border: 3px solid;}
input[type="email"]:focus {border: 3px solid;}
textarea:focus {border: 3px solid;}
/*Styling Absenden-Button*/
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {color: white !important; background-color: #2b2a33 !important; border-radius: 20px !important; margin-top: 25px;}
/*Pfeil zum Button*/
.wpforms-submit {display: flex;
  align-items: center;
  justify-content: center; padding-bottom: 0; padding-top: 0; margin-left: 3px;}
.wpforms-form button[type=submit]::after {
content: url(https://inga-renner.de/wp-content/uploads/2024/11/arrow-right-white.svg); padding-left: 20px; 
 margin-bottom: -4px;}
/*END Styling Button*/

.formdse a {color: #7eaed7;}
.formdse a:focus {color: #2b2a33;}
.dmhell:focus {background-color: #f0f0f0;}
.altEmail_container {color: white;}

/*NEU Layout selbst gestylt*/
.wpforms-hidden {display: none;}
.wpforms-field-large {width: 100%; }
.wpforms-field {padding-bottom: 10px !important; padding-top: 5px;}
.wpforms-error {color: orangered;}
/*END Styling Kontaktformular*/