/* kunden.css */

:root {
	--templatefarbe_hex: #565656 !important;
	--templatefarbe_rgb: 86,86,86 !important;
	--akzentfarbe_hex: #99c6dd !important;
	--akzentfarbe_rgb: 153,198,221 !important;
	--textfarbe_hex: #030303 !important;
    --untermenutextfarbe_hex: var(--textfarbe_hex) !important;
	--buttonfarbe_hex: var(--akzentfarbe_hex) !important;
	--buttontextfarbe_hex: #fff !important;
	--buttonfarbe_hell_hex: var(--akzentfarbe_hex) !important;
	--buttonhintergrundfarbe_hell_hex: #f2f2f2 !important;	
	--buttontextfarbe_hell_hex: var(--textfarbe_hex) !important;
	--hinweisboxfarbe_rgb: var(--templatefarbe_rgb) !important;
	--hinweisboxtextfarbe_hex: #fff !important;
	--welcomeboxhintergrundfarbe_rgb: var(--templatefarbe_rgb)  !important;
	--welcomeboxtextfarbe_hex: #fff !important;
	--welcomeboxbuttonfarbe_hex: #333 !important;
	--welcomeboxbuttonhoverfarbe_hex: #444 !important;
	--welcomeboxbuttontextfarbe_hex: var(--buttontextfarbe_hex) !important;
	--infobarhintergrundfarbe_hex: #444443 !important;
	--infobarhintergrundfarbe_rgb: 68,68,67 !important;
	--infobartextfarbe_hex: #fcfcfc !important;
	--contactbartextfarbe_hex: var(--welcomeboxtextfarbe_hex) !important;
	--shortbartextfarbe_hex: var(--buttontextfarbe_hex) !important;
	--footerhintergrundfarbe_hex: var(--infobarhintergrundfarbe_hex) !important;
	--footertextfarbe_hex: var(--infobartextfarbe_hex) !important;
	--hintergrundfarbe_hex: #ffffff !important;
	--hintergrundfarbe_rgb: 255,255,255 !important;
	--rahmenhintergrundfarbe_hex: #ffffff !important;
	--rahmenhintergrundfarbe_grau_hex: #ededed !important;
	--rahmenhintergrundfarbe_dunkel_hex: #444445 !important;
	--menuhintergrundfarbe_hex: var(--hintergrundfarbe_hex);
	--menuhintergrundfarbe_rgb: var(--hintergrundfarbe_rgb);
	--menubuttonfarbe_hex: var(--akzentfarbe_hex) !important;
	--menutextfarbe_hex: var(--textfarbe_hex) !important;
	--mobilmenuhintergrundfarbe_hex: #fff !important;
	--mobilmenuhintergrundfarbe_sub_hex: var(--mobilmenuhintergrundfarbe_hex) !important;
	--mobilmenuhintergrundfarbe_sub_rgb: var(--mobilmenuhintergrundfarbe_rgb) !important;	
	--mobilmenuhintergrundfarbe_sub1_rgba: 150,150,150,0.1 !important;
	--mobilmenuhintergrundfarbe_sub2_rgba: 150,150,150,0.15 !important;
	--mobilmenuhintergrundfarbe_sub3_rgba: 150,150,150,0.2 !important;
	--mobilmenuhintergrundfarbe_sub4_rgba: 150,150,150,0.25 !important;
	--mobilmenutextfarbe_hex: var(--textfarbe_hex) !important;
	--mobilmenubuttonfarbe_hex: var(--templatefarbe_hex) !important;
	--mobilmenubuttontextfarbe_hex: var(--buttontextfarbe_hex) !important;	
	--welcomecards_textfarbe_hex: var(--textfarbe_hex) !important;
	--welcomecards_hintergrundfarbe_hex: var(--hintergrundfarbe_hex) !important;	
	--highlightboxhintergrundfarbe_rgb: 250,250,250 !important;	
	--productpreviewhintergrundfarbe_links_hex: var(--rahmenhintergrundfarbe_hex) !important;	
	--productpreviewhintergrundfarbe_rechts_hex: var(--rahmenhintergrundfarbe_grau_hex);
	--bgfarbe_hex: var(--akzentfarbe_hex);
	--bgfarbe_text_hex: var(--buttontextfarbe_hex);
	--bg-section-hellgrau_hex: var(--productpreviewhintergrundfarbe_rechts_hex);
	--bg-section-grau_hex: var(--productpreviewhintergrundfarbe_rechts_hex);
	--bg-section-dunkelgrau_hex: var(--productpreviewhintergrundfarbe_rechts_hex);
	--bg-section-farbe1_hex: var(--templatefarbe_hex);
	--bg-section-farbe2_hex: var(--templatefarbe_hex);
	--bg-section-farbe3_hex: var(--templatefarbe_hex);
	--iconshome_invertiert_bg_hex: var(--akzentfarbe_hex);	
	--iconshome_invertiert_text_hex: var(--buttontextfarbe_hex) !important;		
	--kachelboxenfarbe_rgb: 255,255,255 !important;
	--winkelfarbe_rgb: var(--highlightboxhintergrundfarbe_rgb) !important;
	--boxfarbe_hex: #efefef !important;
	--claimslidefarbe_hex: var(--templatefarbe_hex) !important;
	--claimboxinnerfarbe_hex: #fff !important;
	--claimboxtextfarbe_hex: var(--akzentfarbe_hex) !important;	
	--boxverlauf_dunkel_rgb: 240,240,240 !important;		
	--boxverlauf_hell_rgb: 255,255,255 !important;
	--erfal_farbe: #ef6d00 !important;
	--erfal_farbe_rgb: 239,109,0 !important;
	--erfal_raumausstatter_farbe: #ef6d00 !important;
	--erfal_raumausstatter_farbe_rgb: 239,109,0 !important;
	--feba_farbe: #023e72 !important;
	--feba_farbe_rgb: 2,62,114 !important;
	--fensterfachbetriebe_farbe: #464646 !important;
	--fensterfachbetriebe_farbe_rgb: 70,70,70 !important;
	--kneer_suedfenster_farbe: #5aaf24 !important;
	--kneer_suedfenster_farbe_rgb: 90,175,36 !important;
	--markilux_farbe: #e20018 !important;
	--markilux_farbe_rgb: 226,0,26 !important;
	--neutral_farbe: #464646 !important;
	--neutral_farbe_rgb: 70,70,70 !important;
	--rehau_farbe: #d2346e !important;
	--rehau_farbe_rgb: 210,52,110 !important;
	--roma_farbe: #dd7907 !important;
	--roma_farbe_rgb: 221,121,7 !important;
	--terrassendaecher_farbe: #464646 !important;
	--terrassendaecher_farbe_rgb: 70,70,70 !important;
	--weru_farbe: #fffe00 !important;
	--weru_farbe_rgb: 255,254,0 !important;
	--windor_farbe: #e3010f !important;	
	--windor_farbe_rgb: 227,1,15 !important;
	--erfal_template: #ee7101 !important;
	--erfal_template_rgb: 238,113,1!important;
	--erfal-raumausstatter_template: #ee7101 !important;
	--erfal-raumausstatter_template_rgb: 238,113,1 !important;
	--feba_template: #014073 !important;
	--feba_template_rgb: 1,64,115 !important;
	--fensterfachbetriebe_template: #f5c800 !important;
	--fensterfachbetriebe_template_rgb: 245,200,0 !important;
	--kneer_suedfenster_template: #63b332 !important;
	--kneer_suedfenster_template_rgb: 99,179,50 !important;
	--markilux_template: #e2001a !important;
	--markilux_template_rgb: 226,0,26 !important;
	--neutral_template: #464646 !important;
	--neutral_template_rgb: 70,70,70 !important;
	--rehau_template: #4fc1e5 !important;
	--rehau_template_rgb: 79,193,229 !important;
	--roma_template: #ee7b1d !important;
	--roma_template_rgb: 238,123,29 !important;
	--terrassendaecher_template: #f5c800 !important;
	--terrassendaecher_template_rgb: 245,200,0 !important;
	--weru_template: #fffe00 !important;
	--weru_template_rgb: 255,254,0 !important;
	--windor_template: #ed0022 !important;	
	--windor_template_rgb: 237,0,34 !important;	
}

.koop-farbe {
	color: var(--templatefarbe_hex) !important;
}
.koop-farbe-rgb {
	color: rgb(var(--templatefarbe_rgb)) !important;
}
.koop-bg-farbe {
	background-color: var(--templatefarbe_hex) !important;
}
.koop-bg-farbe-rgb {
	background-color: rgb(var(--templatefarbe_rgb)) !important;
}
.erfal-template .bg-gradient,
.erfal-raumausstatter-template .bg-gradient,
.feba-template .bg-gradient,
.fensterfachbetriebe-template .bg-gradient,
.kneer-suedfenster-template .bg-gradient,
.markilux-template .bg-gradient,
.neutral-template .bg-gradient,
.rehau-template .bg-gradient,
.roma-template .bg-gradient,
.terrassendaecher-template .bg-gradient,
.weru-template .bg-gradient,
.windor-template .bg-gradient,
.bg-gradient {
	background: rgb(255,255,255);
	background: radial-gradient(circle, rgba(255,255,255,1) -20%, rgba(var(--templatefarbe_rgb),1) 50%) !important;
}




/* kundenspezifische Ergänzungen */


.bg-gradient {
	background: rgb(255,255,255);
	background: radial-gradient(circle, rgba(255,255,255,1) -20%, rgba(var(--templatefarbe_rgb),1) 50%) !important;
}



/* Für die Über uns Seite */

.team-members {
    hyphens: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 1rem;
    text-align: center;
}

.team-members * {
    margin: 0;
}

.team-members .team-member {
    margin-block: 1.5rem;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 0.5rem;
}

.team-members .team-member .team-member-photo {
    width: 100%;
    border-bottom: 5px solid var(--akzentfarbe_hex);
}

.team-members .team-member .team-member-name {
    font-weight: bold;
}

.team-members .team-member .team-member-profession {
    font-size: 1em;
    font-style: italic;
    padding-top: 1rem;
    border-top: 2px solid var(--akzentfarbe_hex);
}

.team-members .team-member .team-member-details {
    font-size: 1em;
    font-weight: bold;
    padding-top: 0.5rem;
}




/* neue kontaktbuttons */
.contact-wrapper {
    justify-content: center;
    margin-bottom: 3em;
    margin-top: 3em;
    }

  .contact-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;

  }
  .contact-buttons a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    min-width: 200px;
    text-align: center;
  }
  .contact-phone { background: #444; }
  .contact-phone:hover { background: #666; }
  .contact-facebook { background: #1877f2; }
  .contact-facebook:hover { background: #145dbf; }
  .contact-instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
  .contact-instagram:hover { opacity: 0.8; }
  .contact-whatsapp { background: #25d366; }
  .contact-whatsapp:hover { background: #1ebe5d; }

/* social-media icons */

 

.social-icons {

    display: flex;

    gap: 15px;

}

 

.social-icons a {

    display: flex;

    justify-content: center;

    align-items: center;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    text-decoration: none;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}

 

.social-icons a i {

    color: white;

    font-size: 28px;

    transition: color 0.3s ease;

}

 

.social-icons .facebook { background-color: #1877F2; }

.social-icons .instagram { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }

.social-icons .whatsapp { background-color: #25D366; }

.social-icons .phone { background-color: #ff5733; } /* Orange für Telefon */

 

.social-icons a:hover {

    transform: scale(1.15);

    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

}

 

.social-icons a:hover i {

    color: rgba(255, 255, 255, 0.85); /* Etwas heller beim Hover */

}


.contact-youtube { 
    background: #FF0000; 
}

.contact-youtube:hover { 
    background: #cc0000; 
}


.social-icons a.youtube {
    background-color: #FF0000;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}


.social-icons .youtube:hover i {
    color: rgba(255, 255, 255, 0.85);
}