@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&family=Roboto+Slab&display=swap');

body
{
	font-family: 'Roboto', 'Open-Sans', sans-serif;
	overflow-x: hidden;
	color: #313131;
	background-color: #ededed;
	width: auto;
}

/* Force visible vertical scrollbar on fullscreen subpages to prevent flicker */
body.subpage {
	overflow-y: scroll;
}


.black{
	color: #313131;
}
.white{
	background: #fff ;
}
.blue{
	background: #09565c;
}

.yellow{
	background: #ba8f1a;
}

.orange{
	background: #b04604;
}

.dgreen{
	background: #0f4103;
}

.section-wrapper{
	padding: 50px 0;
	position: relative;
	background: transparent;
}

.section-title{
	font-size: 32px;
	font-weight: 300;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: 3px;
	margin-bottom: 15px;
	color: #1a1a1a; /* Dunklere Farbe für Abschnittstitel */
}
.section-item-title{
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 3px;
	text-transform: uppercase;
}
.section-item-detail{
	font-size: 14px;
    font-weight: 300;
    margin-bottom: 50px;
    color: #999;
    letter-spacing: .39px;
}
.underline{
	height: 1px;
	width: 78px;  /* Increased from 60px by 30% */
	margin: 0 auto 50px;
	background: linear-gradient(to right, rgba(0,0,0,0.1), currentColor, rgba(0,0,0,0.1));
}

/* Colorized underline variants */
.underline-green {
	height: 1px;
	width: 78px;  /* Increased from 60px by 30% */
	margin: 0 auto 50px;
	background: linear-gradient(to right, rgba(173, 216, 230, 0.6), rgba(9, 86, 92, 0.9), rgba(173, 216, 230, 0.6));
}

.underline-blue {
	height: 1px;
	width: 78px;  /* Increased from 60px by 30% */
	margin: 0 auto 50px;
	background: linear-gradient(to right, rgba(144, 238, 144, 0.6), rgba(15, 65, 3, 0.9), rgba(144, 238, 144, 0.6));
}

.underline-orange {
	height: 1px;
	width: 78px;  /* Increased from 60px by 30% */
	margin: 0 auto 50px;
	background: linear-gradient(to right, rgba(255, 196, 128, 0.6), rgba(176, 70, 4, 0.9), rgba(255, 196, 128, 0.6));
}

.underline-yellow {
	height: 1px;
	width: 78px;  /* Increased from 60px by 30% */
	margin: 0 auto 50px;
	background: linear-gradient(to right, rgba(255, 236, 143, 0.6), rgba(186, 143, 26, 0.9), rgba(255, 236, 143, 0.6));
}

.underline-purple {
	height: 2px;
	width: 78px;  /* Increased from 60px by 30% */
	margin: 0 auto 50px;
	background: linear-gradient(to right, rgba(216, 191, 216, 0.6), rgba(75, 0, 130, 0.9), rgba(216, 191, 216, 0.6));
}

/* Also update section-wrapper::before to allow for color customization */
.section-wrapper::before {
    display: none !important;
    content: none !important;
}

.section-wrapper.green::before,
.section-wrapper.blue::before,
.section-wrapper.orange::before,
.section-wrapper.yellow::before,
.section-wrapper.purple::before {
    display: none !important;
    content: none !important;
}

/*=================================================
||				3. Header
==================================================*/
.header
{
	background: url('../images/bg/tree3.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	min-height: 100vh;
	position: relative;
	overflow: hidden;
	color: #fff;
	text-transform: uppercase;
}

/* Tablet-spezifische Anpassungen für den Header-Hintergrund */
@media (max-width: 1024px) {
    .header {
        background-attachment: scroll; /* Entfernt das fixed-Verhalten auf Tablets */
        background-size: cover; /* Verhindert starkes Zoom-In und füllt ganzen Bildschirm */
        background-position: center top; /* Zentriert das Bild horizontal */
        min-height: 100vh; /* Stellt sicher, dass die Höhe mindestens die Bildschirmhöhe ist */
    }
}

/* Smartphone-spezifische Anpassungen */
@media (max-width: 767px) {
    .header {
        background-size: cover; /* Sorgt dafür, dass der Hintergrund den ganzen Bildschirm füllt */
        background-position: center top; /* Zentriert und beginnt von oben */
        min-height: 100vh; /* Stellt sicher, dass die Höhe mindestens die Bildschirmhöhe ist */
    }
}

/* iOS-spezifische Fixes */
@supports (-webkit-overflow-scrolling: touch) {
    .header {
        background-attachment: scroll;
        background-size: cover;
        background-position: center top;
        min-height: 100vh;
    }
    
    /* iOS Smartphone-spezifisch */
    @media (max-width: 767px) {
        .header {
            background-size: cover;
            background-position: center top;
            min-height: 100vh;
        }
    }
}
			/*navbar*/
.navbar-brand {
    padding: 5px 20px !important;
}

 

/* Logo-spezifische Styles */
.navbar-default .navbar-brand {
    border: 0;
    padding: 5px 20px;
    height: auto;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* Fixierte Navbar Anpassungen */
 

/* Logo Dimensionen */
 

.navbar-default  {
	background-color: #fbfbfb;
}
.navbar-fixed-top  {
    background-color: #fbfbfb;

}

.navbar-default {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Fixed navbar state - white background with tree image */
.navbar-fixed-top.navbar-default {
    background-color: rgba(251, 251, 251, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background-image: url('../images/bg/tree3_white.jpg') !important;
	
    background-repeat: no-repeat !important;
    background-position: top !important;
    background-size: cover !important;
    border-color: #e7e7e7 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Anpassung der Link-Farben für fixierte Navbar */
.navbar-fixed-top.navbar-default .navbar-nav>li>a {
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Hover-Effekt für fixierte Navbar */
.navbar-fixed-top.navbar-default .navbar-nav>li>a:hover {
    border-color: rgba(0, 0, 0, 0.4) !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Aktiver Link in fixierter Navbar */
.navbar-fixed-top.navbar-default .navbar-nav>.active>a,
.navbar-fixed-top.navbar-default .navbar-nav>.active>a:hover,
.navbar-fixed-top.navbar-default .navbar-nav>.active>a:focus {
    background-color: rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
}

/* Active menu item styles - Safari fix */
.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>.active>a:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    -webkit-backdrop-filter: blur(4px) brightness(100%) !important;
    backdrop-filter: blur(4px) brightness(100%) !important;
}

/* Colored active menu items - Safari specific */
.navbar-default .navbar-nav > li.active > a[href="#photos"] {
    background: linear-gradient(to bottom, rgba(200, 245, 200, 0.4), rgba(15, 65, 3, 0.3)) !important;
    border: 1px solid rgba(15, 65, 3, 0.3);
}

.navbar-default .navbar-nav > li.active > a[href="#genai"] {
    background: linear-gradient(to bottom, rgba(255, 245, 200, 0.35), rgba(186, 143, 26, 0.65)) !important;
    border: 1px solid rgba(186, 143, 26, 0.45);
    backdrop-filter: blur(4px) brightness(105%) !important;
    -webkit-backdrop-filter: blur(4px) brightness(105%) !important;
}

.navbar-default .navbar-nav > li.active > a[href="#portfolio"] {
    background: linear-gradient(to bottom, rgba(173, 216, 230, 0.4), rgba(9, 86, 92, 0.3)) !important;
    border: 1px solid rgba(9, 86, 92, 0.3);
}

.navbar-default .navbar-nav > li.active > a[href="#contact"] {
    background: linear-gradient(to bottom, rgba(235, 235, 235, 0.4), rgba(100, 100, 100, 0.3)) !important;
    border: 1px solid rgba(100, 100, 100, 0.3);
}

/* Fixed navbar active menu items */
.navbar-fixed-top .navbar-default .navbar-nav > li.active > a[href="#photos"] {
    background: linear-gradient(to bottom, rgba(200, 245, 200, 0.4), rgba(15, 65, 3, 0.3)) !important;
    border: 1px solid rgba(15, 65, 3, 0.3);
}

.navbar-fixed-top .navbar-default .navbar-nav > li.active > a[href="#genai"] {
    background: linear-gradient(to bottom, rgba(255, 245, 200, 0.35), rgba(186, 143, 26, 0.65)) !important;
    border: 1px solid rgba(186, 143, 26, 0.45);
    backdrop-filter: blur(4px) brightness(105%) !important;
    -webkit-backdrop-filter: blur(4px) brightness(105%) !important;
}

.navbar-fixed-top .navbar-default .navbar-nav > li.active > a[href="#portfolio"] {
    background: linear-gradient(to bottom, rgba(173, 216, 230, 0.4), rgba(9, 86, 92, 0.3)) !important;
    border: 1px solid rgba(9, 86, 92, 0.3);
}

.navbar-fixed-top .navbar-default .navbar-nav > li.active > a[href="#contact"] {
    background: linear-gradient(to bottom, rgba(235, 235, 235, 0.4), rgba(100, 100, 100, 0.3)) !important;
    border: 1px solid rgba(100, 100, 100, 0.3);
}

.navbar-default .navbar-nav>li>a {
    color: #fff;
    padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1.2px;
    margin-left: 5px;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.navbar-default .navbar-toggle{
	border-radius: 0px;
	backdrop-filter: blur(8px) brightness(95%);
	-webkit-backdrop-filter: blur(8px) brightness(95%);
	border-radius: 2px;
}
.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover{
	color: #fff;
}
.navbar-nav>li>a {
    padding-top: 6px;
    padding-bottom: 6px;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
	background: transparent;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
	backdrop-filter: blur(4px) brightness(90%);
	-webkit-backdrop-filter: blur(4px) brightness(90%);
}
		/*Home*/
.header-wrapper{
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	position: relative;
}
.header-table{
	display: table;
	height: 70vh;
	width: 100%;

}

.header-subtitle{
	
	/*
	border-bottom: 19vh solid  rgba(0, 0, 0, .5);
	border-left: 6vw solid transparent;
	border-right: 6vw solid transparent;
	height: 0;
	*/
	
	background: linear-gradient(to bottom, rgba(0,0,0,0.04) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

	/* background-color: rgba(42, 42, 42, 0.52);*/
	background-repeat: no-repeat;
	padding-left: 3.5vmin;
	padding-right: 3.5vmin;
	padding-top: 1.5vmin;
	padding-bottom: 1.5vmin;

	font-size: min(2.2vh, 18px); /* Increased base size with a minimum value */
	line-height: 1.5;
	letter-spacing: 2px;
	max-width: fit-content;

	margin: auto;
	margin-top: 10vmin;
	display: block;
	text-align: center;

	backdrop-filter: blur(3.5px);
	-webkit-backdrop-filter: blur(3.5px);

	border-radius: 2px;
    text-shadow: 1px 1px 1px rgba(118, 117, 117, 0.2);
    color: #fefefe;

}

/* Responsive styles for tablets and larger devices */
@media (min-width: 768px) and (max-width: 1024px) {
	.header-subtitle {
		font-size: 16px; /* Fixed size for tablets */
		padding: 2vmin 4vmin;
		max-width: 80%;
	}
}

/* Specific adjustment for landscape orientation on tablets */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
	.header-subtitle {
		font-size: 18px; /* Slightly larger for landscape */
		line-height: 1.6;
		max-width: 70%;
	}
}

/* Smartphone-spezifische Anpassungen für die Zitatschrift */
@media (max-width: 767px) {
	.header-subtitle {
		font-size: 13px; /* Kleinere Schrift für Smartphones */
		line-height: 1.4;
		padding: 2vmin 3vmin;
		letter-spacing: 1.5px;
		max-width: 90%;
		margin-top: 8vmin;
	}
}

/*=================================================
||				4. Our Service
==================================================*/
.service{
	background: #ededed;
	position: relative;
}
.service .section-title{
	margin-top: 110px;
}
.services{
	margin-bottom: 100px;
}
.service .underline{
	margin-bottom: 75px;
}
.service-img{
	position: absolute;
	bottom: 0px;
}

.twitter-feed{
	color: #fff;
}
.item{
	text-align: center;
}
.owl-prev, .owl-next
{
	position: absolute;
	top: 10%;
}
.owl-next
{
	right: -10px;
}
.owl-prev
{
	left: -10px;
}
.owl-prev:before
{
    /*content: "\f3d2";*/
    /*font-family: 'ionicons';*/
    content: url("../images/left.png");
}
.owl-next:before
{
    /*content: "\f3d3";*/
    /*font-family: "ionicons";*/
    content: url("../images/right.png");
}

/*=================================================
||				5. Twitter Feed
==================================================*/
.day, .feed{
	font-size: 15px;
	font-weight: 200;
}
.feed{
	font-style: italic;
	margin: 30px 0px;
}
.options a{
	color: #fff;
	text-transform: uppercase;
	font-size: 15px;
	padding: 0px 20px;
}
.options a i{
	padding-right: 10px;
}
.options a:hover{
	text-decoration: none;
}
.item:hover{
	cursor: w-resize;
}
/*=================================================
||				7. Portfolio
==================================================*/
.portfolio-item {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    width: 100%;
    will-change: transform, box-shadow;
}


.portfolio-item2 {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    height: 60%;
    margin-bottom: 30px;
    width: 100%;
    box-sizing: border-box; /* ensure inline 100vh height includes padding to avoid overflow */
}



.portfolio-img {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 0;
    padding-bottom: 66.67%; /* 3:2 Aspect Ratio */
    overflow: hidden;
    background: #f5f5f5;
    will-change: transform, filter;
}

.portfolio-img img,
.portfolio-img .port-item,
.portfolio-img .team-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.portfolio-img-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 20%;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.portfolio-img:hover .portfolio-img-hover {
    opacity: 1;
}

.plus {
    width: 16px;
    height: 16px;
    opacity: 0.8;
    filter: invert(1);
}

.portfolio-item-details {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #ffffff, #fafafa);
}


.portfolio-item-details2 {
    padding-left: 20px;
	padding-right: 20px;
	padding-top: 2px;
	padding-bottom: 5px;
}


.portfolio-item-name{
	font-size: 18px;
	font-weight: 500;
	margin: 15px 0 8px;
	color: #333;
	flex-grow: 1;
	padding-top: 1px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
}

.port-heart, .portfolio-item-name small{
	font-size: 13px;
	color: #969595;
}
.port-heart{
	float: right;
	margin-top: 10px;
}


/*=================================================
||				8. Note
==================================================*/
.note{
	color: #dadada;
}
.quote{
	font-size: 18px;
	line-height: 1.8;
	font-weight: 300;
	font-style: italic;
	color: #555;
	padding: 20px 100px;
	position: relative;
	transition: opacity 0.5s ease;
}
.quote::before, .quote::after {
    content: '"';
    font-size: 60px;
    position: absolute;
    opacity: 0.1;
}
.quote::before {
    left: 40px;
    top: 0;
}
.quote::after {
    right: 40px;
    bottom: -20px;
}
.quoter{
	font-size: 20px;
	font-weight: 400;
	margin-top: 20px;
}

.header-subtitle {
    position: relative;
    padding: 20px;
    margin: 0 auto;
    margin-top: -50px; /* Move up by 50px */
    max-width: 800px;
    text-align: center;
    transition: all 0.8s ease;
}

.header-subtitle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 10px;
    opacity: 1;
    transition: opacity 0.8s ease;
    z-index: -1;
}

.header-subtitle.fade-out::before {
    opacity: 0;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

/*=================================================
||				9. Fun Facts
==================================================*/
.fun{
	background: #f3f3f3;
}
.fun-box{
	border: 2px solid #313131;
	text-align: center;
	padding: 40px 0px;
	font-size: inherit;
}
.number{
	font-weight: 700;
	font-size: 25px;
}
.number-title{
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 400;
}
.col-sm-6 .fun-box{
	margin-bottom: 20px;
}
/*=================================================
||				10. Footer
==================================================*/
footer{
	background: #f8f9fa;
	padding: 30px 0;
	border-top: 1px solid rgba(0,0,0,0.05);
}
.copy{
	font-size: 14px;
	font-weight: 300;
	color: #929292;
	padding: 10px 0px;
	display: inline-block;
}
.fb{
	background: #1976d2;
}
.twitter{
	background: #2CAAE1;
}
.google{
	background: #c62828;
}
.rss{
	background: #ff8f00;
}

.icon{
	height: 40px;
	width: 40px;
	text-align: center;
	padding: 8px;
	display: inline-block;
	border: 1px solid transparent;
	font-size: 18px;
}
a .icon{
	color: #dadada;
}
/*.social-icon{
	float: right;
}*/
a .icon:hover{
	background: transparent;
}
a .fb:hover{
	color: #1976d2;
	border-color: #1976d2;
}
a .twitter:hover{
	color: #2CAAE1;
	border-color: #2CAAE1;
}
a .google:hover{
	color: #c62828;
	border-color: #c62828;
}
a .rss:hover{
	color: #ff8f00;
	border-color: #ff8f00;
}
/*
.navbar-right::after
{
	content: "Close";
	width: 100%;
	
	
    padding-right: 20px;
    padding-left: 20px;
	
    border-bottom: 1px solid #929292;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
	backdrop-filter: blur(6px) brightness(70%);
	-webkit-backdrop-filter: blur(6px) brightness(70%);

	margin-left: 3px;
	border-radius: 2px;
	data-toggle: "collapse";
	data-target:"#bs-example-navbar-collapse-1";
	area-expanded: "true";
	
}
*/


.rcontact
{
	text-decoration: none;
	cursor: pointer;
	height: 74px;
	vertical-align: middle;
	padding-top: 10px;
	

}




 

.plist
{
padding-top:10px;	
}
.smlist
{
	list-style-type: none;
    font-weight: 300;
	margin: 0;
	padding: 0;
}

.porthead {
    font-size: 1.2em;
    font-weight: 300;
    margin-bottom: 20px;
    color: #fff;
}

.porthead2 {
    font-size: 1.2em;
    font-weight: 300;
    margin-bottom: 20px;
    color: #333;
}

.portinfo
{
	color: #f3f3f3;

}
.portinfo2
{
	color: #2c2c2c;

}

.portinfored
{
	color: #c83737;

}


.rimage{

	width: 74px;
	padding: 3px;
}

.zitA {
	font-style: italic;
}

zitL {
font-size: larger;	
}

/* new buttons

base style by Cole McCombs
*/


.pinput
{
	    min-height: 32px;
		width: 110px;
		font-size: 16px;
		color: #313133;
		background: #fbfbfb;
	    
		border: none;
		border-radius: 5px;
		box-shadow: 6px 6px 12px rgba(79,209,197,.64);
		transition: all 0.3s ease-in-out 0s;
		cursor: pointer;
		outline: none;
		position: relative;
		max-width: 10ch;
		white-space: nowrap;
}

.wrap {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  .button {
	min-width: 120px;
	min-height: 28px;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1.1px;
	font-weight: 700;
	color: #313133;
	background: #b5f1eb;
  background: linear-gradient(90deg, rgb(129, 230, 217) 0%, rgb(79, 209, 197) 100%);
	border: none;
	border-radius: 300px;
	box-shadow: 6px 6px 12px rgba(79,209,197,.64);
	transition: all 0.3s ease-in-out 0s;
	cursor: pointer;
	outline: none;
	position: relative;
	padding: 6px;
	margin-left: 4px;
	}
  
  .button::before {
  content: '';
	border-radius: 300px;
	min-width: calc(120px + 6px);
	min-height: calc(28px + 6px);
	
	box-shadow: 0 0 60px rgba(0,255,203,.64);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: all .3s ease-in-out 0s;
  }
  
  .button:hover, .button:focus {
	color: #313133;
	transform: translateY(-6px);
  }
  
  .button:hover::before, .button:focus::before {
	opacity: 1;
  }
  
  .button::after {
	content: '';
	width: 30px; height: 30px;
	border-radius: 100%;
	border: 6px solid #00FFCB;
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: ring 2.5s infinite;
  }
  
  .button:hover::after, button:focus::after {
	animation: none;
	display: none;
  }
  
  @keyframes ring {
	0% {
	  width: 20px;
	  height: 20px;
	  opacity: 1;
	}
	100% {
	  width: 200px;
	  height: 200px;
	  opacity: 0;
	}
  }


/*=================================================
||				11. Others
==================================================*/
/*Testimonial*/
.testimonial{
	background: url('../images/testimonial.png');
	color: #fff;
}
.testimonial .section-title{
	color: #fff;
}
.testimonial-detail{
	font-style: italic;
	font-size: 15px;
	font-weight: 200;
	margin-bottom: 50px;
}
.test-name {
    margin-bottom: 40px;
}
/*Owl carousel*/
.owl-theme .owl-controls .owl-nav [class*=owl-]{
	background: transparent;
}
.owl-theme .owl-dots .owl-dot span{
	width: 20px;
	height: 8px;
	border-radius: 0px;
	background: transparent;
	border: 1px solid #fff;
}
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span{
	background: #fff;
}
.owl-theme .owl-controls .owl-nav [class*=owl-]:hover{
	background: transparent;
}
/*Add*/
.add .owl-prev:before
{
    content: url("../images/bleft.png");
}
.add .owl-next:before
{
    content: url("../images/bright.png");
}
.owl-next
{
	right: -90px;
}
.owl-prev
{
	left: -90px;
}
.add .owl-prev, .add .owl-next
{
	top: 25%;
}
.add-item{
	padding: 20px;
}
@media (max-width: 960px){
	.nav>li{
		text-align: center;
	}
	.service-img{
		opacity: .2;
	}
	.fun-box{
		margin: 15px;
	}
	.quote{
		padding: 0 50px;
	}
	.portfolio .portfolio-item{
		margin: 15px;
	}
	.price-title, .price-list{
		text-align: center;
	}
	.options a{
		padding: 0 5px;
	}
	footer{
		text-align: center;
	}
	footer .text-right{
		text-align: center;
	}
	.navbar-default .navbar-brand{
		margin-left: 15px;
		border: 0px none;
	}
		img.about-img {
	    width: 100%;
	    padding: 15px 15px 0px;
	}
	.quote{
		padding: 0 15px;
	}
} 
@media (max-width: 480px){
	.header-table{
		max-height: 627px;
	}
}

/* Modernere Cards/Portfolio Items */
.portfolio-item, .team-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    margin-bottom: 30px;
}

.portfolio-item:hover, .team-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

/* Verbesserte Header-Sektion */
.header-title {

	margin: auto;
	margin-top: 5%;
	display: block;
	text-align: center;
	font-size: 8vmin;
	letter-spacing: 8px;
	font-weight: 200;
    padding:  40px;
	
    background: rgba(0,0,0,0.2);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border-radius: 4px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.1);
    border: 0px solid rgba(255,255,255,0.1);
}


/* Modernere Social Icons */
.social-icon .icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: all 0.3s ease;
    margin: 0 5px;
}

.social-icon .icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Verbesserte Kontakt-Sektion */
.rblock {
    position: relative;
    overflow: hidden;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    transition: box-shadow 0.3s ease;
}

.rblock .rcontact {
    flex: 1;
    color: #666;
    margin: 0;
    font-size: 16px;
    line-height: 2;
    width: 90%;
    height: 80%;
    

    align-items: center;
    vertical-align: bottom;
    text-align: center;
}

/* Hover Effects */

.rblock:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    text-decoration: none;
    background: linear-gradient(to bottom, #ffffff, #f2f2f2);
}

/* Responsive Anpassungen */
@media (max-width: 767px) {
    .rblock {
        margin-bottom: 15px;
    }
}

/* Verbesserte Sektions-Wrapper */
.section-wrapper {
    padding: 80px 0;
    position: relative;
}

.section-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, transparent, currentColor, transparent);
    opacity: 0.1;
}

/* Modernere Listen */
.smlist {
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.plist {
    padding: 5px 0;
    color: #666;
    font-size: 14px;
    position: relative;
    padding-left: 20px;
}

.plist:before {
    content: '•';
    color: currentColor;
    position: absolute;
    left: 0;
    opacity: 0.5;
}

/* Verbesserte Responsive Anpassungen */
@media (max-width: 768px) {
    .section-title {
        font-size: 28px;
    }
    
    .header-title {
        padding: 20px 30px;
        font-size: 24px;
    }
    
    .portfolio-item, .team-item {
        margin-bottom: 20px;
    }
    
    .section-wrapper {
        padding: 60px 0;
    }
}

/* Burger-Menü Styles mit erhöhter Spezifität */
.navbar-default .navbar-toggle .icon-bar,
.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff !important;  /* Weiße Linien im transparenten Zustand */
    height: 2px !important;
    width: 22px !important;
}

/* Burger-Menü Button im transparenten Zustand */
.navbar-default .navbar-toggle {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

/* Hover-Effekt im transparenten Zustand */
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Burger-Menü in der fixierten Navbar */
.navbar-fixed-top.navbar-default .navbar-toggle .icon-bar,
.navbar-fixed-top.navbar-default .navbar-toggle:hover .icon-bar,
.navbar-fixed-top.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #333333 !important;  /* Dunkle Linien im fixierten Zustand */
}

/* Button-Rahmen in der fixierten Navbar */
.navbar-fixed-top.navbar-default .navbar-toggle {
    background: rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

/* Hover-Effekt in der fixierten Navbar */
.navbar-fixed-top.navbar-default .navbar-toggle:hover,
.navbar-fixed-top.navbar-default .navbar-toggle:focus {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Schließen-Button im Burger-Menü */
.close-nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 5px;
}

.close-nav .menu-close {
    padding: 2px 15px !important;
    text-align: right;
    font-size: 16px !important;  /* Größer für das Icon */
    letter-spacing: 1px;
    color: #fff !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.1);
    line-height: 20px !important;
    height: 24px !important;
}

.close-nav .menu-close i {
    vertical-align: middle;
}

.close-nav .menu-close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* Für die fixierte Navbar */
.navbar-fixed-top .close-nav .menu-close {
    color: #333 !important;
    background: rgba(0, 0, 0, 0.05);
}

.navbar-fixed-top .close-nav {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Nur auf Mobilgeräten anzeigen */
@media (min-width: 768px) {
    .close-nav {
        display: none !important;
    }
}

/* Grid Layout */
.service .row {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}

.service .col-sm-4 {
    padding: 15px;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

/* Responsive */
@media (max-width: 991px) {
    .service .col-sm-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767px) {
    .service .col-sm-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Optional: Hover-Effekt für das Plus-Icon */
.portfolio-img:hover .plus {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* Hover-Effekt für das gesamte Bild */
.portfolio-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.portfolio-img:hover::before {
    opacity: 1;
}

/* Plus-Icon über der Tönung */
.portfolio-img-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    height: 20%;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; /* Über der Tönung */
}

.plus {
    width: 16px;
    height: 16px;
    opacity: 0.8;
    filter: invert(1);
}

/* Contact Section Styles */
.contact {
    text-align: left;
}

/* Contact Card Container */
.contact-item {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    padding: 25px;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Icon Styles */
.contact-item i {
    min-width: 60px;
    height: 60px;
    border-radius: 30px;
    border: 2px solid #b1b1b1;
    color: #b1b1b1;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 25px;
    transition: all 0.3s ease;
}

/* Content Container */
.contact-text {
    flex: 1;
    padding-right: 15px;
}

/* Text Styles */
.contact-item h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.contact-item p {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

/* Hover Effects */
.contact-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.contact-item:hover i {
    background-color: #4a148c;
    border-color: #4a148c;
    color: #fff;
}

/* Add gradient variants for different sections */
#genai .portfolio-item-details {
    background: linear-gradient(to bottom, #ffffff, #fffdf5);
}

#portfolio .portfolio-item-details {
    background: linear-gradient(to bottom, #ffffff, #f7fafb);
}

/* Enhanced hover state with subtle gradient shift */
.portfolio-item:hover .portfolio-item-details {
    background: linear-gradient(to bottom, #ffffff, #f8f8f8);
}

#genai .portfolio-item:hover .portfolio-item-details {
    background: linear-gradient(to bottom, #ffffff, #fffbea);
}

#portfolio .portfolio-item:hover .portfolio-item-details {
    background: linear-gradient(to bottom, #ffffff, #eef4fa);
}

/* Disable hover effects on the single card view (portfolio-item2) */
.portfolio-item2,
.portfolio-item2:hover {
    transform: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    transition: none !important;
}

/* Fix for back button - need to be more specific with our selectors */
.portfolio-item2 .portfolio-img,
.portfolio-item2 .portfolio-img:hover {
    cursor: default !important;
    transform: none !important; /* prevent hover translate causing viewport scrollbars */
    box-shadow: none !important; /* neutralize hover shadow size changes */
}

.portfolio-item2 .portfolio-img:hover .port-item,
.portfolio-item2 .portfolio-img:hover img {
    filter: none !important;
    transform: none !important;
    cursor: default !important;
}

.portfolio-item2 .portfolio-img::before {
    display: none !important;
}

.portfolio-item2 .portfolio-img-hover,
.portfolio-item2 .cross-overlay,
.portfolio-item2 .portfolio-img:hover .portfolio-img-hover,
.portfolio-item2 .portfolio-img:hover .cross-overlay {
    opacity: 0 !important;
    display: none !important;
}

.portfolio-item2 .portfolio-item-details,
.portfolio-item2:hover .portfolio-item-details {
    background: #fff !important;
}

/* Fix for back button - be more specific with selectors to avoid affecting the back button */
.portfolio-item2 .portfolio-img a,
.portfolio-item2 .portfolio-img a:hover {
    cursor: default !important;
    pointer-events: none !important;
}

/* Explicitly ensure the back button works */
.portfolio-back-button,
.portfolio-back-button:hover {
    cursor: pointer !important;
    pointer-events: auto !important;
}

/* Adjust font-weight for active menu items */
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-fixed-top.navbar-default .navbar-nav > li.active > a,
.navbar-fixed-top.navbar-default .navbar-nav > li.active > a:focus,
.navbar-fixed-top.navbar-default .navbar-nav > li.active > a:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(200, 200, 200, 0.8) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    transform: none !important;
    box-shadow: none !important;
    width: auto !important;
    min-width: 100px !important;
    padding: 8px 20px !important;
    height: 38px !important;
    line-height: 20px !important;
}

/* Fix for contact section scrollspy */
#contact {
    padding-bottom: 120px; /* Add extra padding at bottom */
    min-height: 80vh; /* Ensure minimum height to fill most of the viewport */
}

/* Make sure scrollspy detects sections more generously */
body.no-scroll {
    height: auto;
    overflow: visible;
}

@media (max-width: 768px) {
    #contact {
        min-height: 95vh; /* Even more height on mobile */
    }
}

/* Navbar Styles */
.navbar-default .navbar-nav > li > a {
    color: #fff;
    font-size: 13px;
    padding: 8px 20px;
    margin: 0 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    transition: all 0.3s ease;
    min-width: 100px;
    text-align: center;
    display: inline-block;
    box-sizing: border-box;
    height: 38px;
    line-height: 20px;
    letter-spacing: 1.2px;
    font-weight: 500;
}

/* Fixed Navbar Styles */
.navbar-fixed-top.navbar-default .navbar-nav > li > a {
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    font-size: 13px;
    letter-spacing: 1.2px;
    font-weight: 500;
}

/* Active menu items - ensure consistent sizing */
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-fixed-top.navbar-default .navbar-nav > li.active > a,
.navbar-fixed-top.navbar-default .navbar-nav > li.active > a:hover,
.navbar-fixed-top.navbar-default .navbar-nav > li.active > a:focus {
    font-size: 13px !important;
    letter-spacing: 1.2px !important;
    font-weight: 500 !important;
}

/* Language dropdown specific styles */
.navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle,
.navbar-fixed-top.navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle {
    font-size: 13px;
    letter-spacing: 1.2px;
    font-weight: 500;
}

/* Dropdown menu items */
.navbar-default .dropdown-menu > li > a,
.navbar-fixed-top.navbar-default .dropdown-menu > li > a {
    font-size: 13px;
    letter-spacing: 1.2px;
    font-weight: 500;
    padding: 8px 20px;
}

/* Header Border */
.navbar-default {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 0 !important;
}

/* Dropdown Menu Colors */
.navbar-default .dropdown-menu > li > a,
.navbar-collapse .dropdown-menu > li > a,
.navbar-default .navbar-nav .dropdown-menu > li > a,
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff !important;
}

.navbar-fixed-top.navbar-default .dropdown-menu > li > a,
.navbar-fixed-top.navbar-default .navbar-nav .dropdown-menu > li > a,
.navbar-fixed-top.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #333333 !important;
}

/* Dropdown Menu Background */
.navbar-default .dropdown-menu,
.navbar-default .navbar-nav .dropdown-menu {
    background-color: transparent !important;
    border: none !important;
}

.navbar-fixed-top.navbar-default .dropdown-menu,
.navbar-fixed-top.navbar-default .navbar-nav .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

/* Language Selector Styles */
.navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
}

.navbar-fixed-top.navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle {
    color: #333333 !important;
}

/* Dropdown Hover States */
.navbar-default .navbar-nav > li.dropdown.open > a.dropdown-toggle,
.navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle:hover,
.navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle:focus {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.navbar-fixed-top.navbar-default .navbar-nav > li.dropdown.open > a.dropdown-toggle,
.navbar-fixed-top.navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle:hover,
.navbar-fixed-top.navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle:focus {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Gallery Hover Effects */
.portfolio-img {
    position: relative;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 8px !important;
    cursor: pointer;
}

.portfolio-img:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    transform: translateY(-5px);
}

.portfolio-img .team-img {
    width: 100%;
    height: auto;
    display: block;
    transition: filter 0.3s ease;
}

.portfolio-img:hover .team-img {
    filter: brightness(85%);
    transition: filter 0.3s ease;
}

.portfolio-img-hover {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.portfolio-img:hover .portfolio-img-hover {
    opacity: 1;
}

/* Cross Overlay Styles */
.portfolio-img-hover::after {
    content: "";
    display: none !important;
}

.plus {
    width: 15%;
    height: 15%;
    min-width: 30px;
    min-height: 30px;
    max-width: 60px;
    max-height: 60px;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: block;
    z-index: 15;
    margin: 0;
}

.plus::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #fff;
    transform: translateY(-50%);
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.plus::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px;
    height: 100%;
    background-color: #fff;
    transform: translateX(-50%);
    border-radius: 2px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Image Styles */
.team-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Colorbox Popup Styles */
#colorbox, #cboxWrapper {
    max-height: 80vh !important;
}

#cboxContent, #cboxLoadedContent {
    max-height: 78vh !important;
}

#colorbox {
    position: fixed !important;
    top: 10vh !important;
}

#cboxLoadedContent {
    overflow-y: auto !important;
}

#cboxLoadedContent img {
    max-height: 70vh !important;
    width: auto;
    margin: 0 auto;
    display: block;
}

/* Back Button Styles */
.portfolio-back-button:hover {
    background: #e0e0e0 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
}

/* Menu Item Border Styles */
.navbar-default .navbar-nav > li > a {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
    transition: all 0.3s ease !important;
    min-width: 100px; /* Add fixed minimum width */
    text-align: center; /* Center text */
    display: inline-block; /* Ensure consistent sizing */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Active menu item - ensure consistent sizing */
.navbar-default .navbar-nav > li.active > a,
.navbar-default .navbar-nav > li.active > a:hover,
.navbar-default .navbar-nav > li.active > a:focus,
.navbar-fixed-top.navbar-default .navbar-nav > li.active > a,
.navbar-fixed-top.navbar-default .navbar-nav > li.active > a:hover,
.navbar-fixed-top.navbar-default .navbar-nav > li.active > a:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(200, 200, 200, 0.8) !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    transform: none !important;
    box-shadow: none !important;
    width: auto !important;
    min-width: 100px !important;
    padding: 8px 20px !important;
    height: 38px !important;
    line-height: 20px !important;
}

/* Portfolio Item Styles */
.portfolio-item {
    display: flex;
    flex-direction: column;
    min-height: 450px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.portfolio-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    transform: translateY(-5px);
}

.portfolio-item-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 5px 15px;
    background-color: #fff;
}

.portfolio .row {
    display: flex;
    flex-wrap: wrap;
}

.portfolio .col-sm-4, 
.portfolio .col-xs-6 {
    display: flex;
    margin-bottom: 30px;
}

/* Service Section Styles */
.service .portfolio-item {
    height: 100%;
}

.service .col-sm-4,
.service .col-xs-6 {
    display: flex;
    margin-bottom: 30px;
}

.portfolio-img a.group1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    display: block;
}

/* Logo Styles */

.navbar-brand {
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 5px 20px !important;
}

.navbar-brand svg {
    width: 140px;
    height: 36px;
    will-change: transform;
}

.navbar-default .navbar-brand svg {
    color: #fff;
}

 
 

/* Navbar Height Fixes */
.navbar-default {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    height: auto;
}

.navbar-fixed-top.navbar-default {
    padding-top: 5px !important; 
    padding-bottom: 5px !important;
    height: auto;
}

/* Mobile Gallery Styles - Optimierte Version */
@media (max-width: 767px) {
    #photos .col-xs-6 {
        padding: 0 10px;
    }
    
    #photos .row {
        margin: 0 -5px;
    }
    
    #photos .portfolio-img {
        position: relative;
        width: 100%;
        overflow: hidden;
        will-change: transform;
    }
    
    #photos .portfolio-img-hover {
        position: absolute;
        inset: 0;
        z-index: 10;
        will-change: opacity;
    }
    
    #photos .plus {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        will-change: transform;
    }
    
    #photos .portfolio-img a.group1 {
        position: absolute;
        inset: 0;
        z-index: 20;
        display: block;
    }
}

/* Team Item Styles - Optimierte Version */
.team-item-name {
    font-size: 14px;
    font-weight: 300;
    margin: 8px 0 2px;
    color: #1a1a1a; /* Dunklere Farbe für Galerie-Titel */
    text-align: center;
    letter-spacing: 0;
    line-height: 1.2;
}

.team-item-id {
    font-size: 12px;
    color: #333333; /* Dunklere Farbe für Galerie-Untertitel */
    text-align: center;
    font-weight: 300;
    margin: 0 0 8px;
    font-style: italic;
    line-height: 1.2;
}

.team-img {
    width: 100%;
    height: auto;
    border-radius: 3px;
    transition: filter 0.3s ease;
    will-change: filter;
}

/* Cross Icon Styles - Optimierte Version */
.cross-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 60px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    z-index: 20;
    will-change: transform;
}

/* Cross Overlay Base Styles */
.cross-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

#photos .cross-overlay {
    width: 50px;
    height: 50px;
}

#genai .cross-overlay,
#portfolio .cross-overlay {
    width: 60px;
    height: 60px;
}

.cross-plus {
    color: #fff;
    font-size: 48px;
    font-weight: 300;
    line-height: 1;
    text-align: center;
}

.portfolio-item:hover .cross-overlay,
.portfolio-img:hover .cross-overlay {
    opacity: 1;
}

/* Add margin below each row in the photos section */
#photos .col-sm-3,
#photos .col-xs-6 {
    margin-bottom: 25px;
}

/* Ensure consistent spacing in the grid */
#photos .row {
    margin-bottom: -25px;
}

/* Base smooth scrolling optimizations */
html {
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
}

        body {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

/* Custom smooth scroll behavior for Safari */
@supports (-webkit-overflow-scrolling: touch) {
    html, body {
        scroll-behavior: smooth !important;
    }
}

/* Preserve existing navbar and styling */
.navbar-default {
            -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: background-color 0.3s ease, padding 0.3s ease;
}

.navbar-fixed-top.navbar-default {
    background-color: rgba(251, 251, 251, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-image: url('../images/bg/tree3_white.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: top !important;
    background-size: cover !important;
    border-color: #e7e7e7 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Navbar Styles */
.navbar-default {
    background: transparent;
    border: none;
    transition: all 0.3s ease;
    padding: 15px 0;
}

.navbar.scrolled {
    background: url('../images/bg/tree3_white.jpg') no-repeat center center;
    background-size: cover;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.navbar-default .navbar-nav > li > a {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 15px;
    transition: color 0.3s ease;
}

.navbar.scrolled .navbar-nav > li > a {
    color: #333;
}

/* Header Styles */
.header {
    background: url('../images/bg/tree3.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    color: #fff;
    text-transform: uppercase;
}

/* Portfolio Item Styles */
.portfolio-item {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.portfolio-img {
    position: relative;
    overflow: hidden;
}

.portfolio-img-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-img:hover .portfolio-img-hover {
    opacity: 1;
}

.navbar-default .navbar-nav > li > a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
    font-weight: bold;
}

/* Fixed Navbar Styles */
.navbar-fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.navbar-fixed-top.navbar-default .navbar-nav > li > a {
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.navbar-fixed-top.navbar-default .navbar-nav > li > a:hover {
    border-color: rgba(0, 0, 0, 0.4) !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.navbar-fixed-top.navbar-default .navbar-nav > .active > a,
.navbar-fixed-top.navbar-default .navbar-nav > .active > a:hover,
.navbar-fixed-top.navbar-default .navbar-nav > .active > a:focus {
    background-color: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.6) !important;
    color: #333 !important;
}

/* Mobile Menu Styles */
@media (max-width: 767px) {
    .navbar-default {
        background-color: transparent !important;
        box-shadow: none !important;
    }
    
    /* Konsistenter Style für alle Menüpunkte inkl. Sprachauswahl */
    .navbar-default .navbar-nav > li > a,
    .navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle,
    .navbar-default .dropdown-menu > li > a {
        width: calc(100% - 30px) !important;
        margin: 5px 15px !important;
        margin-top: 4px !important;
        margin-bottom: 4px !important;
        text-align: center !important;
        display: block !important;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        letter-spacing: 1.2px !important;
        padding: 10px 10px !important;
        border-radius: 4px !important;
    }
    
    /* Hover-Effekte */
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle:hover,
    .navbar-default .dropdown-menu > li > a:hover {
        border-color: rgba(255, 255, 255, 0.4) !important;
        background-color: rgba(255, 255, 255, 0.2) !important;
    }
    
    /* Aktive Menüpunkte */
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {
        background-color: rgba(255, 255, 255, 0.2) !important;
        border-color: rgba(255, 255, 255, 0.6) !important;
        color: #fff !important;
    }
    
    /* Dropdown-Menü Container */
    .navbar-default .dropdown-menu {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    
    /* Gescrollter Zustand (navbar-fixed-top) */
    .navbar-fixed-top.navbar-default .navbar-nav > li > a,
    .navbar-fixed-top.navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle,
    .navbar-fixed-top.navbar-default .dropdown-menu > li > a {
        color: #333 !important;
        border: 1px solid rgba(0, 0, 0, 0.2) !important;
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    .navbar-fixed-top.navbar-default .navbar-nav > li > a:hover,
    .navbar-fixed-top.navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle:hover,
    .navbar-fixed-top.navbar-default .dropdown-menu > li > a:hover {
        border-color: rgba(0, 0, 0, 0.4) !important;
        background-color: rgba(0, 0, 0, 0.05) !important;
    }
    
    .navbar-fixed-top.navbar-default .navbar-nav > .active > a,
    .navbar-fixed-top.navbar-default .navbar-nav > .active > a:hover,
    .navbar-fixed-top.navbar-default .navbar-nav > .active > a:focus {
        background-color: rgba(0, 0, 0, 0.1) !important;
        border-color: rgba(0, 0, 0, 0.6) !important;
        color: #333 !important;
    }
    
    /* Burger-Menü Button */
    .navbar-toggle {
        border-color: rgba(255, 255, 255, 0.2) !important;
        margin-right: 15px;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
    }
    
    .navbar-fixed-top .navbar-toggle {
        border-color: rgba(0, 0, 0, 0.2) !important;
        background: rgba(0, 0, 0, 0.05) !important;
    }
    
    .navbar-toggle:hover,
    .navbar-toggle:focus {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }
    
    .navbar-fixed-top .navbar-toggle:hover,
    .navbar-fixed-top .navbar-toggle:focus {
        background-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    .navbar-toggle .icon-bar {
        background-color: #fff !important;
    }
    
    .navbar-fixed-top .navbar-toggle .icon-bar {
        background-color: #333 !important;
    }
    
    .navbar-collapse {
        border-color: rgba(255, 255, 255, 0.1) !important;
        background-color: transparent !important;
        padding: 10px 0 !important;
    }
    
    /* Sprachauswahl Icon Anpassung */
    .dropdown-toggle img {
        display: inline-block !important;
        vertical-align: middle !important;
        margin-right: 5px !important;
    }
}

/* Ensure navbar is always visible */
.navbar {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.navbar-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    border: none !important;
}

/* Fix for navbar toggle button */
.navbar-toggle {
    display: none !important;
}

/* Ensure proper spacing */
.navbar-nav {
    margin: 0 !important;
    float: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-top: 5px !important;
}

@media (max-width: 767px) {
    .navbar-nav {
        display: block !important;
    }
    
    .navbar-toggle {
        display: block !important;
    }
    
    .navbar-collapse {
        display: none !important;
    }
    
    .navbar-collapse.in {
        display: block !important;
    }
}

/* Language selector flag sizes */
.dropdown-toggle img,
.dropdown-menu > li > a img {
    width: 14px !important;
    height: 10px !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

/* Mobile menu flag sizes */
@media (max-width: 767px) {
    .dropdown-toggle img,
    .dropdown-menu > li > a img {
        width: 14px !important;
        height: 10px !important;
        margin-right: 5px !important;
        vertical-align: middle !important;
        display: inline-block !important;
    }
    
    /* Ensure proper vertical alignment in mobile menu */
    .navbar-default .navbar-nav > li.dropdown > a.dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Verbesserte Responsive Anpassungen für Menüpunkte */
@media (max-width: 991px) {
    .navbar-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 0;
    }
    
    .navbar-nav > li {
        margin-bottom: 4px; /* Reduzierter Abstand zwischen den Zeilen */
    }
    
    /* Optimierter Abstand zwischen Menüzeilen */
    .navbar-nav > li:nth-child(n+4) {
        margin-top: 4px; /* Reduzierter Abstand für Items ab der zweiten Zeile */
    }

    /* Konsistente Abstände für Menüpunkte */
    .navbar-default .navbar-nav > li > a {
        margin: 2px !important; /* Reduzierter Abstand um alle Menüpunkte */
        min-width: 110px; /* Minimale Breite für bessere Ausrichtung */
    }
}

@media (max-width: 767px) {
    /* Mobile Anpassungen für Menüpunkte */
    .navbar-nav {
        display: block;
        padding-top: 0;
        margin: 0;
    }
    
    .navbar-nav > li {
        margin-bottom: 0;
    }
    
    /* Zurücksetzen der Abstände für mobile Ansicht */
    .navbar-nav > li:nth-child(n+4) {
        margin-top: 0;
    }
    
    /* Konsistente Abstände für mobile Menüpunkte */
    .navbar-default .navbar-nav > li > a {
        margin: 3px 15px !important;
        width: calc(100% - 30px) !important;
    }
}

/* Basis-Menüstil anpassen */
.navbar-default .navbar-nav > li > a {
    color: #fff;
    padding: 8px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1.2px;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    height: 38px;
    line-height: 20px;
}

/* Bootstrap 5 Navigation Compatibility */
.navbar {
    background-color: transparent;
    border: none;
    transition: all 0.3s ease;
    padding: 15px 0;
    margin-bottom: 0;
    width: 100%;
    z-index: 1000;
}

 

 

.navbar-toggler {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    padding: 4px 8px;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    height: 1.5em;
    width: 1.5em;
}

/* Fixed navbar appearance */
.navbar.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030 !important;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    background-color: rgba(251, 251, 251, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background-image: url('../images/bg/tree3_white.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: top !important;
    background-size: cover !important;
    border-color: #e7e7e7 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

.navbar.scrolled .navbar-toggler {
    background: rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.navbar.scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Customize navigation items */
.nav-link {
    color: #fff;
    padding: 8px 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.2px;
    margin: 0 1px;
    border-radius: 2px;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    height: 38px;
    line-height: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.nav-link:hover, 
.nav-link:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.navbar-nav .nav-item.active .nav-link {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
    backdrop-filter: blur(4px) brightness(90%);
    -webkit-backdrop-filter: blur(4px) brightness(90%);
}

/* Scrolled state links */
.navbar.scrolled .nav-link {
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.navbar.scrolled .nav-link:hover,
.navbar.scrolled .nav-link:focus {
    border-color: rgba(0, 0, 0, 0.4);
    background-color: rgba(0, 0, 0, 0.05);
}

.navbar.scrolled .navbar-nav .nav-item.active .nav-link {
    background-color: rgba(0, 0, 0, 0.05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(0, 0, 0, 0.3);
}

/* Adjust navbar spacing */
.navbar-nav {
    margin-top: 0 !important;
    gap: 0;
}

.navbar-nav .nav-item {
    margin: 0 3px;
}

/* Flag sizes in Bootstrap 5 */
.dropdown-toggle img,
.dropdown-item img {
    width: 16px !important;
    height: 12px !important;
    margin-right: 5px !important;
    vertical-align: middle !important;
    position: relative;
    top: -1px;
}

/* Dropdown styling */
.dropdown-menu {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 5px;
    padding: 8px;
}

.dropdown-item {
    color: #333;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Active menu items colored variants for Bootstrap 5 */
.navbar-nav .nav-item.active .nav-link[href="#photos"] {
    background: linear-gradient(to bottom, rgba(200, 245, 200, 0.3), rgba(15, 65, 3, 0.3)) !important;
    border: 1px solid rgba(15, 65, 3, 0.3);
}

.navbar-nav .nav-item.active .nav-link[href="#genai"] {
    background: linear-gradient(to bottom, rgba(255, 245, 200, 0.3), rgba(186, 143, 26, 0.55)) !important;
    border: 1px solid rgba(186, 143, 26, 0.4);
    backdrop-filter: blur(4px) brightness(105%) !important;
    -webkit-backdrop-filter: blur(4px) brightness(105%) !important;
}

.navbar-nav .nav-item.active .nav-link[href="#portfolio"] {
    background: linear-gradient(to bottom, rgba(173, 216, 230, 0.4), rgba(9, 86, 92, 0.3)) !important;
    border: 1px solid rgba(9, 86, 92, 0.3);
}

.navbar-nav .nav-item.active .nav-link[href="#contact"] {
    background: linear-gradient(to bottom, rgba(235, 235, 235, 0.3), rgba(100, 100, 100, 0.3)) !important;
    border: 1px solid rgba(100, 100, 100, 0.3);
}

/* Adjust navbar container */
.navbar > .container {
    padding-top: 5px;
    padding-bottom: 5px;
}

/* Adjust navbar brand */
.navbar-brand {
    padding: 5px 15px !important;
}

/* Overall navbar spacing */
.navbar {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
}

/* Mobile menu styling */
@media (max-width: 767px) {
    .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 0 0 10px 10px;
        padding: 15px;
        margin-top: 10px;
    }
    
    .navbar.scrolled .navbar-collapse {
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    .nav-link {
        width: 100%;
        margin: 4px 0;
        text-align: center;
    }
    
    .dropdown-menu {
        background: transparent;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 0;
    }
    
    .dropdown-item {
        color: #fff;
        text-align: center;
        padding: 8px;
    }
    
    .navbar.scrolled .dropdown-item {
        color: #333;
    }
    
    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
    }
    
    .navbar.scrolled .dropdown-item:hover,
    .navbar.scrolled .dropdown-item:focus {
        background-color: rgba(0, 0, 0, 0.05);
        color: #333;
    }
    
    /* Mobile menu close button */
    .close-nav {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        margin-bottom: 5px;
    }
    
    .menu-close {
        padding: 2px 15px !important;
        text-align: right;
        font-size: 16px !important;
        letter-spacing: 1px;
        color: #fff !important;
        border: none !important;
        background: rgba(255, 255, 255, 0.1);
        line-height: 20px !important;
    }
    
    .navbar.scrolled .close-nav {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .navbar.scrolled .menu-close {
        color: #333 !important;
        background: rgba(0, 0, 0, 0.05);
    }
}

/* Scrolled state active menu items */
.navbar.scrolled .navbar-nav .nav-item.active .nav-link[href="#photos"] {
    background: linear-gradient(to bottom, rgba(200, 245, 200, 0.4), rgba(15, 65, 3, 0.3)) !important;
    border: 1px solid rgba(15, 65, 3, 0.3);
}

.navbar.scrolled .navbar-nav .nav-item.active .nav-link[href="#genai"] {
    background: linear-gradient(to bottom, rgba(255, 245, 200, 0.35), rgba(186, 143, 26, 0.65)) !important;
    border: 1px solid rgba(186, 143, 26, 0.45);
}

.navbar.scrolled .navbar-nav .nav-item.active .nav-link[href="#portfolio"] {
    background: linear-gradient(to bottom, rgba(173, 216, 230, 0.4), rgba(9, 86, 92, 0.3)) !important;
    border: 1px solid rgba(9, 86, 92, 0.3);
}

.navbar.scrolled .navbar-nav .nav-item.active .nav-link[href="#contact"] {
    background: linear-gradient(to bottom, rgba(235, 235, 235, 0.4), rgba(100, 100, 100, 0.3)) !important;
    border: 1px solid rgba(100, 100, 100, 0.3);
}

/* Bootstrap 5 Navbar Toggler anpassen */
.navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 2px !important;
}

.navbar-toggler-icon {
    width: 1.25em;
    height: 1.25em;
}

@media (min-width: 768px) {
    .navbar-expand-md .navbar-nav .nav-link {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .navbar > .container {
        justify-content: space-between;
        align-items: center;
    }
    
    .navbar-nav {
        margin-right: -5px;
    }
}

/* Verbessern des Logo-Stils */
.raza-logo {
    height: 36px;
    width: 165px;
}

/* Verbesserung des Dropdown-Menüs */
.dropdown-menu {
    min-width: 150px;
}

.dropdown-toggle::after {
    margin-left: 0.4em;
    vertical-align: 0.15em;
    opacity: 0.7;
}

.navbar-nav {
    padding-top: 3px !important;
    display: flex;
    align-items: center;
}

.navbar {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* Navbar im fixierten Zustand */
.navbar.scrolled {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1030 !important;
    background-color: rgba(251, 251, 251, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background-image: url('../images/bg/tree3_white.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: top !important;
    background-size: cover !important;
    border-color: #e7e7e7 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* NEUE ANPASSUNGEN */
/* Abgerundete Menübuttons und vertikale Zentrierung */
.nav-link {
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Klassische Navbar-Links mit Bootstrap 3/4 */
.navbar-default .navbar-nav > li > a {
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Logo-Farbe im ungescrollten Zustand */
.navbar:not(.scrolled) .navbar-brand svg,
.navbar-default:not(.navbar-fixed-top) .navbar-brand svg {
    color: #fff !important;
}

/* Logo-Farbe im ungescrollten Zustand */
.navbar:not(.scrolled) .navbar-brand svg,
.navbar-default:not(.navbar-fixed-top) .navbar-brand svg {
    color: #fff !important;
}

/* Logo-Farbe im gescrollten Zustand */
.navbar.scrolled .navbar-brand svg,
.navbar-fixed-top.navbar-default .navbar-brand svg {
    color: #333 !important;
}

/* GLightbox angepasste Stile */
.portfolio-img {
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.portfolio-img img {
    transition: transform 0.4s ease;
}

.portfolio-img:hover img {
    transform: scale(1.05);
}

.portfolio-img .portfolio-img-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-img:hover .portfolio-img-hover {
    opacity: 1;
}

        .cross-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

 

.cross-plus {
    color: #fff;
    font-size: 32px;
    font-weight: 300;
}

/* GLightbox Custom Styles */
.glightbox-container {
    backdrop-filter: blur(8px);
}

.glightbox-clean .gslide-description {
    background: rgba(0, 0, 0, 0.7);
}

.glightbox-clean .gslide-title {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 5px;
}

.glightbox-clean .gslide-desc {
    color: #ddd;
    font-size: 14px;
}

/* ------------------------------------------------------
 * WICHTIGE STYLE-ANPASSUNGEN - HÖCHSTE PRIORITÄT 
 * ------------------------------------------------------*/

/* Abgerundete Buttons mit vertikaler Zentrierung - wichtigste Regel */
.nav-link,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li.active > a,
.navbar-fixed-top.navbar-default .navbar-nav > li > a,
.navbar .nav-item .nav-link,
.dropdown-toggle,
.dropdown-item {
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Abgerundete Buttons mit vertikaler Zentrierung - aktualisiert */
.nav-link,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li.active > a,
.navbar-fixed-top.navbar-default .navbar-nav > li > a,
.navbar .nav-item .nav-link,
.dropdown-toggle,
.dropdown-item {
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Language Dropdown Styles - Höchste Priorität */
.navbar.scrolled .dropdown-menu .dropdown-item {
    color: #000000 !important;
}

.navbar.scrolled .dropdown-menu .dropdown-item:hover {
    color: #000000 !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}


	/* Hardware-accelerated scrolling and rendering optimizations */
		html, body {
			scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch;
			overflow-x: hidden;
			will-change: scroll-position;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		
		/* Rendering optimizations for key elements */
		.navbar, .header-table, .section-wrapper, .portfolio-item, .rblock {
			will-change: transform;
			transform: translateZ(0);
			-webkit-transform: translateZ(0);
			backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
		}
		
		/* Remove ::before line */
		.section-wrapper::before {
			display: none;
		}

		._section-wrapper::before {
			display: none;
		}

		div.section-wrapper::before {
			content: none;
		}
		
		/* Blur-Effekt für die Navigationsleiste im ungescrollten Zustand */
		.navbar {
			background: rgba(0, 0, 0, 0.15);
			
			backdrop-filter: blur(4px);
			-webkit-backdrop-filter: blur(4px);
			transition: all 0.3s ease;
			padding: 15px 0;
		}

		/* Language selector positioning for desktop */
		@media (min-width: 768px) {
			.navbar-nav {
				position: relative;
				padding-right: 150px !important;
				align-items: center;
				display: flex;
				flex-wrap: wrap;
			}
			
			.nav-item.dropdown.d-none.d-md-block {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				margin-left: 20px;
				padding-left: 20px;
				height: 38px;
				display: flex;
				align-items: center;
			}

			/* When menu wraps to a second line, make language selector responsive */
			@media (max-width: 991px) {
				.navbar-nav {
					flex-wrap: wrap;
					justify-content: flex-end;
				}
				
				.nav-item.dropdown.d-none.d-md-block {
					position: relative;
					right: auto;
					transform: none;
					margin-left: auto;
					margin-top: 10px;
				}
			}

			.navbar.scrolled .nav-item.dropdown.d-none.d-md-block {
				border-left-color: transparent;
			}

			.nav-item.dropdown .nav-link.dropdown-toggle {
				height: 38px;
				padding: 0 15px;
				display: flex;
				align-items: center;
				border: none !important;
				color: #fff;
				transition: all 0.3s ease;
			}

			.navbar.scrolled .nav-item.dropdown .nav-link.dropdown-toggle {
				color: #333;
				border: none !important;
			}

			/* Dropdown-Menü Styling */
			.dropdown-menu {
				background-color: rgba(255, 255, 255, 0.1);
				backdrop-filter: blur(10px);
				-webkit-backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.2);
				border-radius: 4px;
				margin-top: 5px;
				padding: 8px;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
				min-width: 140px;
			}

			.dropdown-item {
				padding: 8px 15px;
				font-size: 13px;
				border-radius: 4px;
				transition: all 0.3s ease;
				display: flex;
				align-items: center;
				color: #fff;
			}

			.dropdown-item:hover {
				background-color: rgba(255, 255, 255, 0.1);
				color: #fff;
			}
		}

		.navbar.scrolled {
			background: rgba(255, 255, 255, 0.98);
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			background-image: url("../images/bg/tree3_white.jpg") !important;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}

		/* Dropdown-Styling für das Sprachmenü */
		.nav-item.dropdown .nav-link.dropdown-toggle:hover {
			background-color: rgba(255, 255, 255, 0.1);
		}

		.navbar.scrolled .dropdown-menu {
			background-color: rgba(255, 255, 255, 0.98);
			border: 1px solid rgba(0, 0, 0, 0.1);
		}

		.dropdown-item {
			padding: 8px 15px;
			font-size: 13px;
			border-radius: 4px;
			transition: all 0.3s ease;
			display: flex;
			align-items: center;
			color: #fff;
		}

		.navbar.scrolled .dropdown-menu .dropdown-item {
			color: #000;
		}

		.dropdown-item:hover {
			background-color: rgba(255, 255, 255, 0.1);
			color: #fff;
		}

		.navbar.scrolled .dropdown-menu .dropdown-item:hover {
			background-color: rgba(0, 0, 0, 0.05);
			color: #000;
		}

		/* Spezifischere Selektoren für die Dropdown-Items im gescrollten Zustand */
		.navbar.scrolled .dropdown-menu a.dropdown-item {
			color: #000 !important;
		}

		.navbar.scrolled .dropdown-menu a.dropdown-item:hover {
			color: #000 !important;
			background-color: rgba(0, 0, 0, 0.05);
		}

		/* Zusätzliche spezifische Regeln für Bootstrap Dropdowns im gescrollten Zustand */
		.navbar.scrolled .dropdown-menu .dropdown-item,
		.navbar.scrolled .dropdown-menu .dropdown-item span,
		.navbar.scrolled .dropdown-menu .dropdown-item * {
			color: #000 !important;
		}

		/* Stelle sicher, dass die scrolled-Klasse richtig angewendet wird */
		@media (min-width: 768px) {
			.navbar.scrolled {
				background: rgba(255, 255, 255, 0.98) !important;
			}
		}

		.dropdown-item img {
			margin-right: 8px;
			width: 16px;
			height: 12px;
		}

		@media (max-width: 767px) {
			.nav-item.dropdown .nav-link.dropdown-toggle {
				margin: 5px 0;
				width: 100%;
				justify-content: space-between;
			}
			
			.dropdown-menu {
				width: 100%;
				margin-top: 0;
				background-color: rgba(255, 255, 255, 0.05);
				border: none;
				box-shadow: none;
			}
			
			.navbar.scrolled .dropdown-menu {
				background-color: rgba(255, 255, 255, 0.98);
			}
		}

		/* Extra spezifische Regeln für Dropdown im gescrollten Zustand */
		html body .navbar.scrolled .dropdown-menu .dropdown-item,
		.navbar.scrolled li a.dropdown-item,
		.navbar.scrolled .dropdown-menu a.dropdown-item {
			color: #000000 !important;
			text-shadow: none !important;
		}

		/* Regel für den gescrollten Dropdown-Hintergrund */
		.navbar.scrolled .dropdown-menu {
			background-color: #ffffff !important;
			border: 1px solid rgba(0, 0, 0, 0.15) !important;
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !important;
		}

		.navbar.scrolled .dropdown-item:hover {
			background-color: #f8f9fa !important;
			color: #000000 !important;
		}
		
		/* Navbar im gescrollten Zustand */
		html body .navbar.scrolled {
			background: rgba(255, 255, 255, 0.98) url("../images/bg/tree3_white.jpg") !important;
			background-size: cover !important;
			background-position: center !important;
			background-repeat: no-repeat !important;
			backdrop-filter: none;
			-webkit-backdrop-filter: none;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		}
		
		/* Stelle sicher, dass die scrolled-Klasse richtig angewendet wird */
		@media (min-width: 768px) {
			html body .navbar.scrolled {
				background: rgba(255, 255, 255, 0.98) url("../images/bg/tree3_white.jpg") !important;
				background-size: cover !important;
				background-position: center !important;
				background-repeat: no-repeat !important;
			}
		}
		
		/* Hover-Effekt für die Galerie verbessern */
		#photos .portfolio-img {
			position: relative;
			overflow: hidden;
			display: block;
			width: 100%;
			height: auto;
			cursor: pointer;
		}
		
		#photos .portfolio-img img {
			display: block;
			width: 100%;
			height: auto;
		}
		
		#photos .portfolio-img-hover {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.4);
			opacity: 0;
			transition: opacity 0.3s ease;
			z-index: 1;
			pointer-events: none;
		}
		
		#photos .portfolio-img:hover .portfolio-img-hover {
			opacity: 1;
		}
		
		#photos .cross-overlay {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 40px;
			height: 40px;
			opacity: 0;
			transition: opacity 0.3s ease;
			z-index: 2;
			pointer-events: none;
		}
		
		#photos .portfolio-img:hover .cross-overlay {
			opacity: 1;
		}
		
		#photos .portfolio-img a.group1 {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 3;
			cursor: pointer;
		}
		
		/* Verbesserte responsive Galerie-Ansicht */
		@media (min-width: 1200px) {
			#photos .col-sm-3 {
				width: 25%;
				float: left;
			}
		}
		
		@media (min-width: 992px) and (max-width: 1199px) {
			#photos .col-sm-3 {
				width: 33.33333%;
				float: left;
			}
		}
		
		@media (min-width: 768px) and (max-width: 991px) {
			#photos .col-sm-3 {
				width: 50%;
				float: left;
			}
		}
		
		@media (max-width: 767px) {
			#photos .col-xs-6 {
				width: 100%;
				float: none;
			}
		}
		
		/* Responsive Kontaktkacheln - Komplett überarbeitete Version */
		.contact .row {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		
		.rblock {
			position: relative;
			overflow: hidden;
			height: 100%;
			background-color: rgba(255, 255, 255, 0.8);
			border-radius: 10px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			padding: 20px;
			text-decoration: none;
			color: inherit;
			box-sizing: border-box;
			transform: translateZ(0);
			backface-visibility: hidden;
			-webkit-font-smoothing: subpixel-antialiased;
			transition: box-shadow 0.3s ease;
		}
		
		.rblock::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(255, 255, 255, 0);
			pointer-events: none;
			z-index: 1;
			transition: background-color 0.3s ease;
			transform: translateZ(0);
		}
		
		.rblock:hover::after {
			background-color: rgba(255, 255, 255, 0.1);
		}
		
		.rblock::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 10px;
			box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
			opacity: 0;
			transition: opacity 0.3s ease;
			z-index: -1;
			transform: translateZ(0);
		}
		
		.rblock:hover::before {
			opacity: 1;
		}
		
		.rimage {
			display: block;
			width: 150px;
			height: 150px;
			object-fit: cover;
			border-radius: 50%;
			margin: 0 auto 15px;
			border: 3px solid #fff;
			box-sizing: border-box;
			position: relative;
			z-index: 2;
			transform: translateZ(0);
			will-change: box-shadow;
			transition: box-shadow 0.3s ease;
		}
		
		.rcontact {
			margin: 10px 0 0;
			text-align: center;
			font-size: 16px;
			line-height: 1.5;
			width: 100%;
			position: relative;
			z-index: 2;
			transform: translateZ(0);
		}
		
		@media (max-width: 767px) {
			.rblock {
				padding: 15px;
			}
			
			.rimage {
				width: 120px;
				height: 120px;
			}
		}
		
		/* Progressbar für Zitate */
		.progressbar {
			margin: auto;
			display: block;
			visibility: visible;
			background-color: rgba(235, 235, 235, 0.7);
			height: 2px;
			width: 0%;
			border-radius: 1px;
			box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
		}
		
		/* Zitat-Überblendung */
		.header-subtitle {
			transition: opacity 0.3s ease;
			opacity: 1;
		}

		/* Mobile Menu Styles - Vereinfachte und klare Regeln */
		@media (max-width: 767px) {
			/* Burger-Button Styles */
			.navbar-toggler {
				border: 2px solid white;
				background-color: transparent;
				margin-right: 0;
				position: relative;
				z-index: 1002;
			}
			
			/* Sicherstellen, dass das Menü angezeigt wird, wenn es geöffnet ist */
			.navbar-collapse {
				position: fixed;
				top: 70px; /* Add space below the header */
				left: 0;
				right: 0;
				background-color: rgba(0, 0, 0, 0.9);
				padding: 20px;
				z-index: 1001;
				display: none;
				transition: all 0.3s ease;
			}
			
			/* Das Wichtigste: sicherstellen, dass .show das Menü sichtbar macht */
			.navbar-collapse.show {
				display: block !important;
			}

			/* Overlay für den abgedunkelten Hintergrund */
			.menu-overlay {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0.85);
				z-index: 1000;
				display: none;
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			/* Overlay anzeigen, wenn Menü aktiv ist */
			.menu-overlay.active {
				display: block;
				opacity: 1;
			}
			
			/* Rest der Menü-Styles */
			.navbar-nav {
				width: 100%;
			}
			
			.nav-item {
				width: 100%;
				margin: 10px 0;
			}
			
			.nav-link {
				color: white !important;
				padding: 10px;
				text-align: center;
				font-size: 16px;
				width: 100%;
				display: block;
				transition: all 0.3s ease;
			}
			
			/* Hover-Effekt für Menüpunkte im normalen Zustand */
			.nav-link:hover {
				background-color: rgba(255, 255, 255, 0.1);
				transform: translateY(-2px);
			}
			
			/* Trenner für Sprachauswahl */
			.dropdown-divider {
				margin: 15px 0;
				border-top: 1px solid rgba(255, 255, 255, 0.1);
			}
			
			/* Sprachauswahl im mobilen Menü */
			.nav-item.d-md-none .nav-link.lang-select {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 12px;
				font-size: 15px;
			}
			
			.nav-item.d-md-none .nav-link.lang-select img {
				margin-right: 10px;
				width: 20px;
				height: 15px;
			}

			/* Spezifische Styles für das gescrollte Menü */
			.navbar.scrolled .navbar-collapse {
				background-color: rgba(0, 0, 0, 0.9);
				top: 60px; /* Slightly less space when scrolled */
			}
			
			.navbar.scrolled .nav-link {
				color: white !important;
			}
			
			/* Hover-Effekt für Menüpunkte im gescrollten Zustand */
			.navbar.scrolled .nav-link:hover {
				background-color: rgba(255, 255, 255, 0.1);
				color: white !important;
				transform: translateY(-2px);
			}
		}

		/* Stil für Zitat-Referenzen */
		.reference {
			font-style: italic;
			opacity: 0.9;
			margin-top: 10px;
			display: block;
			font-size: 0.9em;
		}

		/* Logo color enhancement for better visibility */
		.raza-logo path:first-child {
			stroke-width: 3px !important;
			filter: drop-shadow(0 0 1px rgba(0,0,0,0.3));
			transition: all 0.3s ease;
		}
		
		/* Ensure visible logo colors on mobile */
		@media (max-width: 767px) {
			.raza-logo path:first-child {
				stroke-width: 3.5px !important;
				filter: drop-shadow(0 0 2px rgba(0,0,0,0.5));
			}
		}

		/* Global background gradient for all content after header */
		body {
			background: linear-gradient(175deg, 	
rgb(34, 37, 31) 0%,
rgb(48, 64, 34) 26%,
rgb(165, 139, 96) 50%,		
rgb(98, 138, 162) 65%,
rgb(74, 117, 145) 80%,
#818b77 100%

			);
			margin: 0;
			padding: 0;
			position: relative;
		}

		/* Header section with background image */
        .header {
			background: url("../images/tree3.jpg") no-repeat center center fixed;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
			position: relative;
			margin: 0;
			padding: 0;
			min-height: 100vh;
			width: 100%;
		}

		/* Navigation bar - highest z-index and proper stacking context */
		#navigation-bar {
			position: fixed !important;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99999 !important;
			transform: translateZ(0);
            -webkit-transform: translateZ(0);
			backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
        
		/* Ensure dropdown stays on top */
		#navigation-bar .dropdown-menu {
			z-index: 100000 !important;
		}

		/* Menu overlay for mobile */
		.menu-overlay {
			z-index: 99998 !important;
		}

		/* Content sections */
		.service, .team, .contact {
			position: relative;
			z-index: 1;
			background: transparent;
			color: #fff;
			padding: 30px 0;
			margin: 0;
		}

		/* Override for photos section */
		section#photos.team {
			padding-top: 50px !important;
		}

		/* Header content */
		.header-table {
			position: relative;
			z-index: 1;
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 70px;
			padding-bottom: 70px;
		}

		/* Make sections transparent to show gradient */
		.service, .team, .contact {
			background: transparent;
			color: #fff;
			position: relative;
			z-index: 2;
			padding: 30px 0;
			margin: 0;
		}

		/* Remove any potential white gaps */
		.section-wrapper {
			background: transparent;
			padding: 0;
			margin: 0;
		}

		._section-wrapper {
			background: transparent;
			padding: 0;
			margin: 0;
		}

		/* Adjust container spacing */
		.container {
			padding-top: 10px;  /* Reduced from 20px to 10px */
			padding-bottom: 20px;
		}

		/* Keep text colors for section titles */
		.service .section-title,
		.team .section-title,
		.contact .section-title {
			color: #333;
			margin-bottom: 30px;
		}

		/* Maintain card styles but with consistent shadows */
		.portfolio-item, .team-item {
			background: rgba(255, 255, 255, 0.95);
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
			margin-bottom: 30px;
		}

		.portfolio-item:hover, .team-item:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
		}

		/* Contact blocks with consistent styling */
		.rblock {
			background: rgba(255, 255, 255, 0.95);
			border-radius: 8px;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			padding: 20px;
			display: flex;
			align-items: center;
			width: 90%;
			text-decoration: none;
			height: 95%;
			transform: translateY(0);
			margin: 10px auto;
		}

		.rblock:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 25px rgba(0,0,0,0.4);
			background: rgba(255, 255, 255, 0.98);
		}

		/* Footer styling */
		footer {
			background: rgba(28, 28, 28, 0.95);
			border-top: 1px solid rgba(255,255,255,0.1);
			color: #fff;
			padding: 20px 0;
			margin-top: 0;
		}

		footer .copy {
			color: rgba(255,255,255,0.8);
		}

		/* Ensure proper spacing between sections */
		section {
			padding: 30px 0;  /* Reduced from 60px to 30px */
			margin: 0;
		}

		/* Ensure dropdown menu stays above other content */
		.navbar .dropdown-menu {
			z-index: 10000;
		}

		/* Gallery section adjustments */
		#photos .row {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			margin: 0 -12px;
		}

		#photos .col-sm-3 {
			padding: 12px;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		@media (min-width: 1200px) {
			#photos .col-sm-3 {
				flex: 0 0 25%;
				max-width: 25%;
			}
		}

		@media (min-width: 992px) and (max-width: 1199px) {
			#photos .col-sm-3 {
				width: 33.33333%;
				float: left;
			}
		}

		@media (min-width: 768px) and (max-width: 991px) {
			#photos .col-sm-3 {
				width: 50%;
				float: left;
			}
		}

		@media (max-width: 767px) {
			#photos .col-sm-3 {
				flex: 0 0 100%;
				max-width: 100%;
			}
		}

		/* Portfolio item styling */
		.portfolio-img {
			width: 100%;
			position: relative;
			margin-bottom: 15px;
		}

		.team-img {
			width: 100%;
			height: auto;
			display: block;
		}

		
	
		/* Main navigation styling for desktop */
		@media (min-width: 1200px) {
			.navbar-nav {
				display: flex;
				flex-wrap: nowrap;
				justify-content: flex-end;
				align-items: center;
				padding-right: 150px !important;
			}
			
			.navbar-nav .nav-item {
				margin: 0 4px; /* Reduced from 8px to 4px */
				white-space: nowrap;
			}
			
			.navbar-nav .nav-link {
				padding: 0.5rem 0.75rem;
			}
			
			.nav-item.dropdown.d-none.d-md-block {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				margin-left: 20px;
				padding-left: 20px;
				height: 38px;
				display: flex;
				align-items: center;
			}
		}

		/* Handle large screens where items might wrap */
		@media (min-width: 992px) and (max-width: 1199px) {
			.navbar-nav {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-end;
				align-items: center;
				row-gap: 10px;
			}
			
			/* First three menu items */
			.navbar-nav .nav-item:nth-child(-n+3) {
				margin: 0 4px; /* Reduced from 8px to 4px */
				order: 1;
				display: flex;
				align-items: center;
			}
			
			/* Last two menu items (Portfolio and Contact) */
			.navbar-nav .nav-item:nth-child(n+4):not(.dropdown) {
				margin: 0 4px; /* Reduced from 8px to 4px */
				order: 2;
				display: flex;
				align-items: center;
			}
			
			/* Language selector */
			.nav-item.dropdown.d-none.d-md-block {
				position: relative;
				right: 0;
				transform: none;
				margin: 0 4px; /* Reduced from 8px to 4px */
				order: 2;
				display: flex;
				align-items: center;
			}
			
			.navbar-nav .nav-link {
				padding: 0.5rem 0.75rem;
				display: flex;
				align-items: center;
				height: 100%;
			}
			
			/* Ensure consistent height for all items */
			.navbar-nav .nav-item {
				height: 38px;
			}
		}

		/* Medium screens handle multiple menu items wrapping */
		@media (min-width: 768px) and (max-width: 991px) {
			/* Break into two rows on medium screens */
			.navbar-nav {
				width: 100%;
				justify-content: center;
				padding-right: 0 !important;
				flex-wrap: wrap;
			}
			
			/* First menu row */
			.navbar-nav .nav-item:nth-child(-n+3) {
				margin: 0 6px; /* Reduced from 10px to 6px */
			}
			
			/* Second menu row (with language selector) */
			.navbar-nav .nav-item:nth-child(n+4):not(.dropdown) {
				margin: 10px 6px 0; /* Reduced from 10px to 6px */
			}
			
			/* Language selector on the right side of second row */
			.nav-item.dropdown.d-none.d-md-block {
				position: relative;
				right: auto;
				transform: none;
				margin: 10px 0 0 auto;
			}
		}

		/* Specific mid-range case where only last item might break */
		@media (min-width: 850px) and (max-width: 991px) {
			/* Force the last two items to stay together */
			.navbar-nav .nav-item:nth-child(4),
			.navbar-nav .nav-item:nth-child(5) {
				order: 10;
			}
		}

		/* General dropdown styling */
		.navbar-nav .dropdown-toggle::after {
			margin-left: 0.5em;
			vertical-align: middle;
		}

		.navbar-nav .dropdown-menu {
			min-width: 180px;
			margin-top: 0;
		}

		/* Mobile menu improvements */
		@media (max-width: 767px) {
			.navbar-nav {
				padding-right: 0 !important;
				flex-direction: column;
			}
			
			.nav-item.d-md-none .nav-link.lang-select {
				margin-top: 10px;
			}
			
			.navbar-nav .nav-item {
				width: 100%;
				text-align: center;
			}
		}

		/* Improved responsive navigation with better wrapping behavior */
		.navbar .container {
			position: relative;
			width: 100%;
		}

		


	

		.team-item-name {
			font-size: 15px;
			font-weight: 400;
			margin: 8px 0 2px;
			
			text-align: center;
			letter-spacing: 0.5px;
			line-height: 1.4;
			
		}

		.team-item-id {
			font-size: 13px;
			color: #828282 !important;
			text-align: center;
			font-weight: 400;
			margin: 0 0 8px;
			font-style: italic;
			line-height: 1.3;
			/*text-shadow: 0 0 1px rgba(255,255,255,0.5);*/
		}

		/* Section headers styling */
		.section-title {
			color: #ffffff !important;
			text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
			font-size: 32px;
			font-weight: 400;
			text-transform: uppercase;
			text-align: center;
			letter-spacing: 3px;
			margin-top: 0;  /* Ensure no top margin */
			margin-bottom: 15px;
		}

		/* Gallery section specific styles */
		#photos .team-item-name {
			color: #ffffff !important;
			
		}

		#photos .team-item-id {
			color:rgb(164, 164, 164) !important;
			/*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);*/
		}

		/* Portfolio cards with light blue tint */
		.portfolio-item {
			background: rgba(255, 255, 255, 0.95);
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
			margin-bottom: 30px;
			position: relative;
		}

		.portfolio-item::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(98, 138, 162, 0.05); /* Very light blue tint */
			pointer-events: none;
			transition: all 0.3s ease;
		}

		.portfolio-item:hover::after {
			background: rgba(98, 138, 162, 0.1); /* Slightly stronger blue tint on hover */
		}

		.portfolio-item:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.navbar.scrolled {
    background: url('../images/bg/tree3_white.jpg') no-repeat center center;
    background-size: cover;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

/* Mobile Menu Styles */
@media (max-width: 767px) {
    .navbar-nav {
        padding: 10px 0;
        margin: 0;
    }

    .nav-item {
        padding: 2px 0;
        margin: 0;
    }

    .nav-link {
        padding: 8px 20px;
        font-size: 16px;
        display: block;
        text-align: center;
        transition: all 0.3s ease;
    }

    .nav-item.d-md-none .nav-link.lang-select {
        margin: 2px 0;
        padding: 8px 20px;
    }

    .navbar-collapse {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 1000;
        padding: 10px;
        overflow-y: auto;
    }
}

/* Dropdown Styles */
.dropdown-menu {
    background: rgba(255,255,255,0.95);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 10px 0;
}

.dropdown-item {
    color: #333;
    padding: 8px 20px;
    transition: background-color 0.3s ease;
}

.dropdown-item:hover {
    background-color: rgba(0,0,0,0.05);
}

.navbar.scrolled .dropdown-menu {
    background: #fff;
}

@media (max-width: 767px) {
    .navbar-nav {
        padding: 20px 0;
        margin: 0;
    }

    .nav-item {
        padding: 5px 0;
    }

    .nav-link {
        padding: 12px 20px;
        font-size: 16px;
        display: block;
        text-align: center;
        transition: all 0.3s ease;
    }

    /* Ensure proper spacing for language selector */
    .nav-item.d-md-none .nav-link.lang-select {
        margin: 5px 0;
        padding: 12px 20px;
    }
}

@media (max-width: 767px) {
    .navbar-nav {
        margin: 0;
        padding: 10px 0;
    }

    .nav-item {
        margin: 4px 0;
        padding: 0;
    }

    .nav-link {
        padding: 8px 20px !important;
        margin: 0 !important;
        font-size: 16px;
        display: block;
        text-align: center;
    }

    .nav-item.d-md-none .nav-link.lang-select {
        margin: 4px 0 !important;
        padding: 8px 20px !important;
    }

    .navbar-collapse {
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.9);
        z-index: 1000;
        padding: 10px 0 !important;
        overflow-y: auto;
    }

    .dropdown-menu {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 4px 0 !important;
    }

    .dropdown-item {
        padding: 8px 20px !important;
        margin: 4px 0 !important;
        text-align: center;
        color: #fff !important;
    }
}

.impressum-header {
    color: rgba(255,255,255,0.95);
    margin-bottom: 30px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 0 10px rgba(0,0,0,0.25);
}

.impressum-intro {
    color: rgba(255,255,255,0.95);
    margin-bottom: 40px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 0 10px rgba(0,0,0,0.25);
}

.impressum-content {
    color: rgba(255,255,255,0.9);
    text-shadow: 0 2px 4px rgba(0,0,0,0.35), 0 0 12px rgba(0,0,0,0.25);
}

.impressum-content a { color: inherit; text-decoration-color: rgba(255,255,255,0.6); }

/* Dropdown-Menü Styling für die Sprachauswahl im nicht-gescrollten Zustand */
.navbar:not(.scrolled) .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.navbar:not(.scrolled) .dropdown-menu .dropdown-item {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.navbar:not(.scrolled) .dropdown-menu .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* Spezifische Regel für das Flag-Icon im Dropdown */
.navbar:not(.scrolled) .dropdown-menu .dropdown-item img {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}