/*
 Theme Name:   Twenty Twenty-Five Child
 Theme URI:    https://netperfection.de
 Description:  Child Theme für Twenty Twenty-Five
 Author:       .netperfection
 Author URI:   https://netperfection.de
 Template:     twentytwentyfive
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentyfive-child
*/

:root {
    /* Sizes */
    --logo-width-desktop: 330px;
    --logo-width-mobile: 220px;
    --header-height: 100px;
    --header-height-mobile: 160px;

    --page-padding-sides: 25px;
    --page-padding-sides-form: 50px;
    --page-padding-top: 100px;
    --page-padding-bottom: 140px;

    --content-width-thin: 800px;
    --content-width: 1200px;
    --content-width-wide: 1480px;

    /* Colors */
    --background-color: #fff;
    --text-color: #1D1D1B;
    --border-color: #56717f;
    --text-color-light: #8095a1;
    --gradient-grey-dark: #dce1e5;
    --gradient-grey-light: #f0f4f6;
    --error-color: #d70b0b;
	--gradient-orange-dark: #123DDD;
    --gradient-orange-light: #5A77E5;

    /* Button */
    --button-height: 48px;
    --button-height-small: 32px;
    --button-color: var(--primary-color);
    --button-text-color: #fff;
    --button-text-size: 15px;

    /* Inputs */
    --input-height: 44px;

    /* Accordion */
    --accordion-height: 50px;
}

label input, label select, label textarea {
  margin-top: 8px;
}

input, textarea, select {
  border: none;
  background-color: #fff;
  height: var(--input-height);
  padding: 10px 15px;
  box-sizing: border-box;
  outline: none;
  width: 100%;
  font-size: 15px;
  font-family: 'Inter';
}

label {
  display: block;
  font-size: 14px;
  line-height: 16px;
  font-weight: bold;
  color: #444b51;
  margin: 2px 0 6px;
}

input:read-only {
  background-color: #eff3f7;
  outline: none;
}

input[type="checkbox"], input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  outline: none;
}

/*### BUTTON ######*/

input[type="submit"] {
    color: #fff;
    padding: 12px 20px;
    background: var(--gradient-orange-dark);
    background: linear-gradient(90deg, var(--gradient-orange-dark) 0%, var(--gradient-orange-light) 100%);
    border: none;
    font-weight: bold;
    font-size: 17px;
    cursor: pointer;
}
input[type="submit"]:hover {
    background: var(--gradient-orange-dark);
}

:where(.wp-site-blocks :focus) {
  outline-width: 0px !important;
  outline-style:hidden !important;
}

.logo, .logo img,.logo a{
		width:150px;
	}

.perfect-link a {
  color: #f2167d !important;
  text-decoration: none;
}

.page,.single{
	padding-top:70px;
}

@media (min-width: 1200px){
	.right-padding{
		padding-right:100px;
	}
	.img-padding{
		padding-right:50px;
	}
	.img-padding-left{
		padding-left:150px;
	}
	.pe-3{
		padding-right:7rem;
	}
	/*### FORMS ###############*/

	.two-cols {
		display: flex; /* Aktiviert Flexbox */
		gap: 20px;
		padding-top:10px;
	}

	.two-cols div {
		flex: 1; /* Lässt beide <div> Elemente den verfügbaren Platz gleichmäßig aufteilen */
	}

	.two-cols p {
		margin:0;
	}
	.perfect-container{
		max-width:60% !important;
	}
	.logo, .logo img,.logo a{
		width:200px;
	}
}

/*###############################*/
/*### HEADER NAV #####*/
/*###############################*/

/* Fixiert den Header beim Scrollen */
header.wp-block-template-part {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999;
  background-color: white; /* Setze die Hintergrundfarbe, um Überlappungen zu vermeiden */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: fügt einen Schatten hinzu */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 999;
}

.header-scrolled {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional: fügt einen stärkeren Schatten beim Scrollen hinzu */
}

/* Füge einen Platzhalter hinzu, um Layout-Verschiebungen zu vermeiden */
	.header-placeholder {
	  height: 60px; /* Höhe des Headers anpassen */
	}
.home .header-placeholder {
	  height: 0px; /* Höhe des Headers anpassen */
	margin-top:0;
	}



/* Initialer Zustand des Logos */
.logo img {
    width: 300px; /* Ursprüngliche Breite, falls anders, anpassen */
    transition: width 0.3s ease; /* Smooth Transition */
}

/* Zustand des Logos nach Scroll */
.logo.shrink img {
    width: 150px; /* Zielbreite */
}





/* Ab 1025px: Spalten nebeneinander */
@media (min-width: 991px) {

/* Ungerade .change-colum-width-Gruppen: erstes Column */
.change-column-width .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column:first-child {
    flex-basis: 315px !important;
  }

	
}