/*place custom css stuff in here*/

/*gallery stuff*/

a.jg-entry > img {
	border-radius: 10px;
	transition: 0.3s ease;
	cursor: pointer;
}

a.jg-entry > img:hover,
a.jg-entry > img:focus {
	transform: scale(1.02);
}

/*portfolio header stuff*/
#video_bg_container {
    position: relative;
    width: 100%;
    height: 60vh;       /* oder jede andere gewünschte Höhe */
    overflow: hidden;
}

.video_bg_video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;  /* schneidet sauber zu, füllt immer aus */
    z-index: 1;
    opacity: 0.9;
}

#video_bg_content {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    text-align: center;
    padding: 1rem;
}

.header_bg_container {
    position: relative;
    width: 100%;
    height: 60vh;
    overflow: hidden;
    
    /* NEU: Flexbox Zentrierung */
    display: flex;
    justify-content: center; /* Horizontal zentrieren */
    align-items: center;     /* Vertikal zentrieren */
}

.header_bg_pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.header_bg_pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.header_bg_content {
    /* position: absolute;  <-- Entfernen oder auskommentieren */
    /* top, left, transform <-- Ebenfalls nicht mehr nötig durch Flexbox */
    
    position: relative; /* Damit z-index greift */
    z-index: 10;
    color: white;
    text-align: center;
    padding: 1rem;
}

/* Sicherheitshalber: Abstände vom H1 entfernen */
.header_bg_content h1 {
    margin: 0;
    padding: 0;
}


/*navbar*/
.navbar-brand img {
	margin-top: -5%;
	width: 80%;
	height: auto;
}

.navbar-default {
	background-color: transparent;
}

.navbar-default.navbar-shrink {
	background-color: #f1efe7;
}

.navbar.navbar-default.navbar-fixed-top a:focus,
.navbar.navbar-default.navbar-fixed-top a:hover,
.navbar-default.navbar-shrink li a,
.navbar.navbar-default.navbar-fixed-top li a{
	color: black;
	transition: all 0.3s ease;
	font-size:110%;

}


.navbar-default .navbar-nav > .active > a ,
.navbar-default .navbar-nav > .active > a:hover ,
.navbar-default .navbar-nav > .active > a:focus {
	background-color: white;
	color: black;
}

.nav.navbar-nav.navbar-right > li:hover,
.nav.navbar-nav.navbar-right > li:focus {
        transition: all 0.3s ease;
        font-size:110%;

}

/*resp navbar*/
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle {
	background-color: white;
	border-color: black;
	border: thin;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color:black;
}

.nav-add-sites,
#nav-collapsed  {
	background-color: #f1efe7;

}

@media(max-width: 768px) {
        ul.nav.navbar-nav.navbar-right {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.65);

        }
}

/*navbar header picture alignment and opacity*/
@media(max-width: 768px) {
	header .intro-text {
	 	margin-top: 30%;
	  
	}
}

header {
    text-align: center;
    color: #fff;

    background-image:
        linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
        url(../img/header-bg.jpg);

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*request button new*/
.floating-contact-container {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
/*    background-color: #f1efe7;*/
    background-color: rgba(241, 239, 231, 0.7);
    color: #333;
    display: flex;
    flex-direction: column; /* Icons untereinander */
    border-radius: 30px 0 0 30px;
    width: 60px;
    overflow: hidden;
    transition: width 0.4s ease-in-out;
    box-shadow: -2px 2px 10px rgba(0,0,0,0.2);
    cursor: pointer;
}

.floating-contact-container.active {
   width: 250px; /* Breite im ausgeklappten Zustand */
   background-color: #f1efe7;
}

.contact-row {
    display: flex;
    align-items: center;
    height: 60px; /* Jede Zeile ist so hoch wie ein Icon */
    width: 100%;
}

.button-icon {
    min-width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
}

.button-text {
    padding-left: 10px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: #333;
    opacity: 0;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity 0.3s;
}

.floating-contact-container.active .button-text {
    opacity: 1;
    pointer-events: auto;
}

/* Optional: Trennlinien zwischen den Icons */
.contact-row:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

a.button-text:hover,
a.button-text:focus {
    color: #7a7a7a;
}


/* Responsive: Auf kleinen Handys etwas kleiner oder ausblenden */
@media (max-width: 768px) {
    .floating-contact-container {
        width: 50px;
    }
    .button-icon {
        min-width: 50px;
    }
    .floating-contact-button:hover {
        width: 240px;
    }
}

/*aboutme container*/
.container.aboutme {
   display: block;
   text-align: left;
   margin-top: -10%;
   padding: 0;
}

::selection {
   background-color: #f1efe7;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.25);
}


/*prices container*/

div.even{
   background-color: white;  
   margin-bottom: 5%; 
   padding: 20px;

}
 
div.odd {
   background-color: #f1efe7;
   margin-bottom: 5%;
   padding: 20px;
}

.price-header, 
.price-text {
   text-align: left;
}

.price-info {
  font-size: smaller;
  font-style: italic;
}

.price-price {
   float: right;
   white-space: nowrap;
   font-size: 2rem;
   font-weight: bold; 
}

.even svg,
.price-text-even .price-price {
   color: #b5a97c;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.15);


}

.odd svg,
.price-text-odd .price-price {
   color: white;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.65);

}

@media(max-width: 768px) {
	.even,
	.odd {
		padding-bottom: 40px !important;
	}

}

/*impressum and dsg stuff*/

div#impressum,
div#datenschutz {
	margin-left:10%;
	margin-top: 15rem;
}

div#impressum ul,
div#datenschutz ul {
	list-style-type: none;
}

@media(max-width: 768px) {
	div#impressum,
	div#datenschutz {
		margin-left: 5%;
		margin-top: 10rem;
	}
}

@media(max-width: 366px) {
	div#impressum,
	div#datenschutz {
		margin-top: 15rem;
	}
}

/*footer*/

footer {
	background-color: #f1efe7;
}

footer .list-inline.quicklinks > li > a {
	color: black;
}