/*======================================
Theme Name: Twentytwentythree Chield Theme
Theme URI: 
Description: Ein Child Theme für Twenty Twenty-Tree
Version: 1.0
Author: Thomas K
Author URI: https://www.blueflexx.com
Template: twentytwentythree
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
======================================*/

/* You can start adding your own styles here. Use !important to overwrite styles if needed. */

/* Formatierung der Überschriften */
.homelead {
    text-align: center;
    font-size: 3em;
    line-height: 4em;
   /* color: #cccccc; */
    text-transform: uppercase;
   /* font-family: Arvo; */
}

h2 {
 font-style:normal;
 font-weight:300;
 text-transform:uppercase;
 margin-left: auto;
 margin-right: auto;
 padding-top: 3rem;
 /* border-bottom: 1px solid #b7996e; */
 text-decoration: underline solid #b7996e 1px;
 text-underline-offset: 0.3em;
} 

/* Header und Top-Navigation */
.top-nav , .top-nav button, .top-nav a.wp-block-navigation-item__content, .top-nav span.wp-block-navigation-item__label {
 color: var(--wp--preset--color--white);
 white-space: nowrap;
}

header.wp-block-template-part { 
 position: sticky;
 top: 10px;
 z-index: 100;
}

@media (min-width: 782px) {
 .top-nav-balkone a, .top-nav-gelaender a, .top-nav-mehr a, .top-nav-anregungen a {
  font-size:80%;
 } 
 .top-nav-balkone ul, .top-nav-gelaender ul, .top-nav-mehr ul, .top-nav-anregungen ul {
  border: 1px solid #b7996e !important; /*rgba(0,0,0,0);*/
  background-color: #303134 !important; /* Used if the image is unavailable */
  background-position: right bottom; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  /*background-size: cover;*/  /* Resize the background image to cover the entire container */
  padding-right: 100px;
 } 
 .top-nav-balkone ul {
  background-image: url("http://wp.balkoneschneider.de/wp-content/uploads/2023/02/menu_logo.png");
 }
 .top-nav-gelaender ul {
  background-image: url("http://wp.balkoneschneider.de/wp-content/uploads/2023/02/menu_logo.png");
 }
 .top-nav-mehr ul {
  background-image: url("http://wp.balkoneschneider.de/wp-content/uploads/2023/02/menu_logo.png");
 }
 .top-nav-anregungen ul {
  background-image: url("http://wp.balkoneschneider.de/wp-content/uploads/2023/02/menu_logo.png"); 
 }
}
@media (max-width: 781px) {
 .top-nav-balkone > a , .top-nav-gelaender > a , .top-nav-mehr > a , .top-nav-anregungen > a {
  text-decoration: underline;
 }
 .top-nav-balkone span, .top-nav-gelaender span, .top-nav-mehr span, .top-nav-anregungen span {
  font-size:90%;
  font-weight: 400;
 }
 ul.wp-block-navigation__submenu-container {
   padding-top: 0.3em !important;
   padding-bottom: 1.2em;
 }
}

/* Div. Textformatierungen */
.shadow {
 text-shadow: 4px 4px 1px rgb(0 0 0 / 90%);
}
.shadow2 {
 text-shadow: 1px 1px 4px #866e41, -1px -1px 4px #000;
}
.underline {
 border-bottom: 1px solid #b7996e;
}

/* Start-Cover */
.start-logo {
 opacity: 0;
 animation: logo 2s linear 2s 1 normal forwards;
} 
@keyframes logo {
	0% {
		opacity: 0;
		transform: rotate(-540deg) scale(0);
	}

	100% {
		opacity: 1;
		transform: rotate(0) scale(1);
	}
}
.start-h1 {
 opacity: 0;
 animation: ueberschrift 2s linear 3s 1 normal forwards;
} 
@keyframes ueberschrift {
	0% {
  opacity: 0;
		transform: scale(0);
	}

	100% {
  opacity: 1;
		transform: scale(1);
	}
}

/* Produke-Grid */
.pgrid {
 position: relative;
}
.pgrid figure {
 overflow: hidden;
} 
.pgrid figure img {
 -webkit-transform: scale(1);
 transform: scale(1);
 -webkit-transition: .3s ease-in-out;
 transition: .3s ease-in-out;
} 
.pgrid figure:hover img {
 -webkit-transform: scale(1.1, 1.1);
 transform: scale(1.1, 1.1);
}
.pgrid-text {
    position: absolute;
    bottom: 0px;
    opacity: .8;
    width: 100%;
}

/* Footer */
footer {
 font-size: 80%;
 font-weight: 300;
} 
    
/* Tagline */
.tagline > p > a:after {
 display: inline-block;
 content: "→";
 margin-left: 10px;
 transition: all 0.5s ease-out;
}
.tagline:hover > p > a:after {
 margin-left: 20px;
}
.tagline > p > a {
 text-decoration: none;
 margin-left: 20px;
 transition: all 0.5s ease-out;
} 
.tagline:hover > p > a {
 text-decoration: none;
 margin-left: 0px;
 text-shadow: 1px 1px 5px #000;
}
.tagline {
 background-color: #866e41;
 transition: all 0.5s linear;
} 
.tagline:hover {
 color: grey;
 background-color: #b7996e;
} 

/* Anpassung für den Trenner */
.wp-block-separator {
    background-color: var(--wp--preset--color--secondary);
    border-color: var(--wp--preset--color--secondary);
} 
 
/* Anpassung für das kontaktformular */
/* https://contactform7.com/styling-contact-form/ */
/* https://webdesign.tutsplus.com/tutorials/floating-labels-for-contact-form-7--cms-36327 */
input[type="text"],
input[type="email"],
textarea {
 background-color: #fff;
 color: #000;
 width: 100%;
 /* margin: 5px; */
 padding: 10px;
 font-size: 1em;
}
input[type="file"] {
 width: 50%;
 /* margin: 5px; */
 padding: 10px;
 font-size: 1em; 
 cursor: pointer;
 border: solid 1x orange;
} 

.button.nz-button-brown {background-color: #b7996e; box-shadow: 0 4px #9a7f59;}
.button.nz-button-brown:hover {box-shadow: 0 2px #9a7f59!important;}
 
/* Card-Formatierung */
.card1 {
 /* box-shadow: 2px 2px 5px #888; */
 border: 1px solid #b7996e;
 padding: 1em 0.5em;
}
.card1:hover {
 background-image: url("http://wp.balkoneschneider.de/wp-content/uploads/2023/02/flamme.gif");
 background-repeat: no-repeat;
 background-origin: padding-box;
 background-position: bottom; 
 background-position-x: center;
 background-size: contain;
 background-color: #000000!important;
}

/* Feuer-Effekt */
.fire {
  font-size: 34px;
  filter: blur(0.05em);
  -webkit-filter: blur(0.05em);
  margin: 3em auto 0 auto;
  position: absolute;
  width: 100%;
  /*height: 12em; */
  z-index: -1000; 
  opacity: 0.5;  
}

.particle {
  animation: rise 1s ease-in infinite;
  background-image: radial-gradient(#ff5000 20%, rgba(255, 80, 0, 0) 70%);
  border-radius: 50%;
  mix-blend-mode: screen;
  opacity: 0;
  position: absolute;
  bottom: -1em;
  width: 5em;
  height: 5em;
}

.particle:nth-of-type(1) {
  animation-delay: 0.4222541187s;
  left: calc((100% - 5em) * 0);
}
.particle:nth-of-type(2) {
  animation-delay: 0.8629145524s;
  left: calc((100% - 5em) * 0.02);
}
.particle:nth-of-type(3) {
  animation-delay: 0.7734943051s;
  left: calc((100% - 5em) * 0.04);
}
.particle:nth-of-type(4) {
  animation-delay: 0.2748842437s;
  left: calc((100% - 5em) * 0.06);
}
.particle:nth-of-type(5) {
  animation-delay: 0.7337484913s;
  left: calc((100% - 5em) * 0.08);
}
.particle:nth-of-type(6) {
  animation-delay: 0.8888959579s;
  left: calc((100% - 5em) * 0.1);
}
.particle:nth-of-type(7) {
  animation-delay: 0.3466525253s;
  left: calc((100% - 5em) * 0.12);
}
.particle:nth-of-type(8) {
  animation-delay: 0.9728163169s;
  left: calc((100% - 5em) * 0.14);
}
.particle:nth-of-type(9) {
  animation-delay: 0.7327720016s;
  left: calc((100% - 5em) * 0.16);
}
.particle:nth-of-type(10) {
  animation-delay: 0.6196369371s;
  left: calc((100% - 5em) * 0.18);
}
.particle:nth-of-type(11) {
  animation-delay: 0.120906389s;
  left: calc((100% - 5em) * 0.2);
}
.particle:nth-of-type(12) {
  animation-delay: 0.6824098329s;
  left: calc((100% - 5em) * 0.22);
}
.particle:nth-of-type(13) {
  animation-delay: 0.25473194s;
  left: calc((100% - 5em) * 0.24);
}
.particle:nth-of-type(14) {
  animation-delay: 0.6539874689s;
  left: calc((100% - 5em) * 0.26);
}
.particle:nth-of-type(15) {
  animation-delay: 0.8303360858s;
  left: calc((100% - 5em) * 0.28);
}
.particle:nth-of-type(16) {
  animation-delay: 0.4453280994s;
  left: calc((100% - 5em) * 0.3);
}
.particle:nth-of-type(17) {
  animation-delay: 0.2880323649s;
  left: calc((100% - 5em) * 0.32);
}
.particle:nth-of-type(18) {
  animation-delay: 0.0820877426s;
  left: calc((100% - 5em) * 0.34);
}
.particle:nth-of-type(19) {
  animation-delay: 0.2944346048s;
  left: calc((100% - 5em) * 0.36);
}
.particle:nth-of-type(20) {
  animation-delay: 0.9128437202s;
  left: calc((100% - 5em) * 0.38);
}
.particle:nth-of-type(21) {
  animation-delay: 0.0892667561s;
  left: calc((100% - 5em) * 0.4);
}
.particle:nth-of-type(22) {
  animation-delay: 0.0050565138s;
  left: calc((100% - 5em) * 0.42);
}
.particle:nth-of-type(23) {
  animation-delay: 0.4862653028s;
  left: calc((100% - 5em) * 0.44);
}
.particle:nth-of-type(24) {
  animation-delay: 0.5030796386s;
  left: calc((100% - 5em) * 0.46);
}
.particle:nth-of-type(25) {
  animation-delay: 0.2856452467s;
  left: calc((100% - 5em) * 0.48);
}
.particle:nth-of-type(26) {
  animation-delay: 0.6891778903s;
  left: calc((100% - 5em) * 0.5);
}
.particle:nth-of-type(27) {
  animation-delay: 0.4169222174s;
  left: calc((100% - 5em) * 0.52);
}
.particle:nth-of-type(28) {
  animation-delay: 0.0854013568s;
  left: calc((100% - 5em) * 0.54);
}
.particle:nth-of-type(29) {
  animation-delay: 0.3722088016s;
  left: calc((100% - 5em) * 0.56);
}
.particle:nth-of-type(30) {
  animation-delay: 0.8002393361s;
  left: calc((100% - 5em) * 0.58);
}
.particle:nth-of-type(31) {
  animation-delay: 0.7529720496s;
  left: calc((100% - 5em) * 0.6);
}
.particle:nth-of-type(32) {
  animation-delay: 0.263078368s;
  left: calc((100% - 5em) * 0.62);
}
.particle:nth-of-type(33) {
  animation-delay: 0.9310235512s;
  left: calc((100% - 5em) * 0.64);
}
.particle:nth-of-type(34) {
  animation-delay: 0.9049121728s;
  left: calc((100% - 5em) * 0.66);
}
.particle:nth-of-type(35) {
  animation-delay: 0.1929327633s;
  left: calc((100% - 5em) * 0.68);
}
.particle:nth-of-type(36) {
  animation-delay: 0.4827738179s;
  left: calc((100% - 5em) * 0.7);
}
.particle:nth-of-type(37) {
  animation-delay: 0.539482513s;
  left: calc((100% - 5em) * 0.72);
}
.particle:nth-of-type(38) {
  animation-delay: 0.7106539516s;
  left: calc((100% - 5em) * 0.74);
}
.particle:nth-of-type(39) {
  animation-delay: 0.2630764252s;
  left: calc((100% - 5em) * 0.76);
}
.particle:nth-of-type(40) {
  animation-delay: 0.6789307357s;
  left: calc((100% - 5em) * 0.78);
}
.particle:nth-of-type(41) {
  animation-delay: 0.514157787s;
  left: calc((100% - 5em) * 0.8);
}
.particle:nth-of-type(42) {
  animation-delay: 0.5886655646s;
  left: calc((100% - 5em) * 0.82);
}
.particle:nth-of-type(43) {
  animation-delay: 0.1310638172s;
  left: calc((100% - 5em) * 0.84);
}
.particle:nth-of-type(44) {
  animation-delay: 0.7079734627s;
  left: calc((100% - 5em) * 0.86);
}
.particle:nth-of-type(45) {
  animation-delay: 0.1765500449s;
  left: calc((100% - 5em) * 0.88);
}
.particle:nth-of-type(46) {
  animation-delay: 0.0931167564s;
  left: calc((100% - 5em) * 0.9);
}
.particle:nth-of-type(47) {
  animation-delay: 0.2774676504s;
  left: calc((100% - 5em) * 0.92);
}
.particle:nth-of-type(48) {
  animation-delay: 0.0735886875s;
  left: calc((100% - 5em) * 0.94);
}
.particle:nth-of-type(49) {
  animation-delay: 0.4170790571s;
  left: calc((100% - 5em) * 0.96);
}
.particle:nth-of-type(50) {
  animation-delay: 0.8322842039s;
  left: calc((100% - 5em) * 0.98);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  25% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-10em) scale(0);
  }
}