:root,
[data-bs-theme=light] { 
	--background: #fff;
	
	--primary-rgb: 51, 51, 51;
	--primary: #333;
	--primary-dark: #000;
	--primary-light: #ddd;
	
	--secondary-rgb: 153, 153, 153;
	--secondary: #999;
	--secondary-dark: #666;
	--secondary-light: #eee;
	
	--accent-rgb: 255, 196, 81;
	--accent: #ffc451;
	--accent-dark: #eb9b00;
	--accent-light: #ffdfa2;
	--accent-light-rgb: 255, 223, 162;
	
	--bs-info: var(--accent);
	--bs-info-rgb: var(--accent-rgb);
	
	--light-rgb: 232, 238, 238;
	--light: #e8eeee;
	--lighter-rgb: 244, 244, 244;
	--lighter: #f4f4f4;
		
	--body-font: "IBM Plex Sans Condensed",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--body-size: large;
	--body-weight: 300;
	--body-line-height: 1.5;
	--body-color: #444;
	--body-color-rgb: 69, 69, 69;
		
	--heading-font: "Oswald",  sans-serif;
	--heading-color: var(--bs-black);
	--heading-link:var(--bbs-lack);
	--heading-link-hover: var(--bs-black);
	--heading-hover-decoration: underline;
		
	--link-color: var(--bs-black);
	--link-hover-color: var(--accent-dark);
	--link-weight: 400;
	--link-hover-decoration: none;

	--nav-font: "Oswald",  sans-serif;
	--nav-weight: 300;
	--nav-hover-weight: 300;
	--nav-active-weight: bold;
	--nav-color: var(--bs-white);
	--nav-hover-color: var(--bs-white);
	--nav-active-color: var(--bs-white);
	--nav-affix-color: var(--bs-white);
	--nav-affix-hover-color: var(--bs-white);
	--nav-affix-active-color: var(--bs-white);
	--nav-mobil-weight: 300;
	--nav-mobil-hover-weight: 300;
	--nav-mobil-active-weight: bold;
	--nav-mobil-color: var(--bs-dark);
	--nav-mobil-hover-color: var(--bs-black);
	--nav-mobil-active-color: var(--bs-black);
	
	--nav-dropdown-weight: 300;
	--nav-dropdown-hover-weight: 300;
	--nav-dropdown-active-weight: bold;
	--nav-dropdown-color: var(--bs-black);
	--nav-dropdown-hover-color: var(--bs-black);
	--nav-dropdown-active-color: var(--secondary);
	--nav-dropdown-mobil-weight: 300;
	--nav-dropdown-mobil-hover-weight: 300;
	--nav-dropdown-mobil-active-weight: bold;
	--nav-dropdown-mobile-color: var(--bs-dark);
	--nav-dropdown-mobile-hover-color: var(--bs-black);
	--nav-dropdown-mobile-active-color: var(--bs-black);
	
	--icon: var(--accent);
	
	--list-symbol: '\F061';
	--list-color: var(--accent);
	--list-font-family: "Font Awesome 5 Free";
	--list-font-weight: 900;
	
	--radius: 5px;
}



[data-bs-theme=accent] a:hover .icon-bg.border-accent {
	background: var(--accent-dark) !important;
	border-color: var(--accent-dark) !important
	}	
[data-bs-theme=dark] .icon-bg.bg-primary {
	background: var(--bs-dark) !important
	}	
[data-bs-theme=dark] a:hover .icon-bg.bg-primary {
	background: var(--bs-gray-500) !important
	}		
[data-bs-theme=accent] > * {
}	


/*
.bg-accent 			{ --bs-bg-opacity: 1; background-color: rgba(var(--secondary-rgb), var(--bs-bg-opacity)) !important;  }
.bg-accent-light 	{ --bs-bg-opacity: 1; background-color: rgba(var(--secondary-light-rgb), var(--bs-bg-opacity)) !important;  }

.text-accent 		{ --bs-bg-opacity: 1; color: var(--secondary) !important; }
.text-accent-light 	{ --bs-bg-opacity: 1; color: var(--secondary-light) !important; }
.text-accent-dark 	{ --bs-bg-opacity: 1; color: var(--secondary-dark) !important;  }

.border-accent 		{  --bs-border-opacity: 1; border-color: rgba(var(--secondary-rgb), var(--bs-border-opacity)) !important;}
.border-accent-light {  --bs-border-opacity: 1; border-color: rgba(var(--secondary-light-rgb), var(--bs-border-opacity)) !important;}

.hover-bg-accent:hover			{ background-color: var(--secondary ) }
.hover-bg-accent-light:hover	{ background-color: var(--secondary-light ) }
.hover-bg-accent-dark:hover		{ background-color: var(--secondary-dark ) }

.icon-bg.border-accent	{ color: var(--secondary) !important; }
a:hover .icon-bg.border-accent	{ background-color: var(--secondary) !important; color: var(--bs-white) !important }
.icon-bg.bg-accent[class*="opacity-"]	{ color: var(--bs-white) !important }
*/


/*--------------------------------------------------------------
# General / Typo
--------------------------------------------------------------*/
body {
	background: var(--background)
	}

a 			{ }
a:hover 	{ }

b 			{ font-weight: bold !important; }
strong 		{ font-weight: 800 !important; }

.fw-light 	{ font-weight: 200 !important; }
.fw-normal 	{ font-weight: normal !important; }
.fw-semi 	{  }
.fw-bold 	{ font-weight: bold !important; }



h1,h2,h3,h4,h5,h6 {
	font-weight: 500 !important;
	margin-bottom: .5em;
	}		
h2,h3,h4 {
	margin-top: 2em
}
h1,.h1, h1 a {
	font-weight: 500 !important;
}
h2,.h2, h2 a {
	font-weight: 400 !important;
}
h3,.h3,h4,.h4, h4 a {
	font-weight: 400 !important;
}
h5,.h5, h5 a,
h6,.h6, h6 a {
	font-weight: 300 !important;
	text-transform: uppercase;
}

@media (min-width: 992px) { h2, .h2 { font-size: 2.5rem }}
@media (min-width: 1200px) { h2, .h2 { font-size: 2.75rem }}

@media (min-width: 992px) { h3, .h3 { font-size: 2.245rem }}
@media (min-width: 1200px) { h3, .h3 { font-size: 2.2rem }}

@media (min-width: 992px) { h4, .h4 {font-size: 1.75rem }}
@media (min-width: 1200px) { h4, .h4 {font-size: 2.0rem }}







/*--------------------------------------------------------------
# Page Titles
--------------------------------------------------------------*/
.title {
	position: relative;
	display: block;
	margin-top: 0;
	margin-bottom: 60px;
	padding-bottom: 0;
	text-align: center;
	text-transform: uppercase;
	}
	@media (min-width: 1200px) {
		.title:not([class*="-start"], [class*="-end"]) {
		padding-left: 12%;
		padding-right: 12%;
		}
	}
	.title small {
		font-size: 90%;
		line-height: 1.2em
	}
	
.title .topline {
	position: relative;
	display: inline-block;
	margin-bottom: .3em;
	font-size: 18pt;
	font-weight: 300;
	text-transform: uppercase;
	display: block
	}	
	.title .topline::before,
	.title .topline::after{
	content: "";
	border: none;
	border-bottom: 3px solid var(--accent);
	position: relative;
	width: 15px; 
	top: -5px; 
	margin: 0 7px;
	display: inline-block;
	opacity: 1
	}
	.bg-accent .title .topline::before,
	.bg-accent .title .topline::after{
	border-color: var(--accent-light);
	}


.title.text-start { text-align: left;  }
.title.text-end { text-align: right; }
.title.text-start .topline::before { display: none}
.title.text-end .topline::after { display: none }	
		
@media (min-width: 575px) {
	.title.text-start-sm 	{ ext-align: left;  }	
	.title.text-end-sm 	{ text-align: right; }	
	.title.text-start-sm .topline::before { display: none }
	.title.text-end-sm .topline::after { display: none }
}
@media (min-width: 768px) {
	.title .topline::before,
	.title .topline::after { 
		width: 30px;
		margin: 0 13px;
		top: -8px;
		}
	.title.text-start-md 	{ text-align: left; }	
	.title.text-end-md 	{ text-align: right; }	
	.title.text-start-md .topline::before { display: none }
	.title.text-end-md .topline::after { display: none }
}
@media (min-width: 992px) {
	.title.text-start-lg 	{ text-align: left; }	
	.title.text-end-lg 	{ text-align: right; }	
	.title.text-start-lg .topline::before { display: none }
	.title.text-end-lg .topline::after { display: none }
}


main article h1 {
	position: relative;
	display: block;
	margin-top: 0;
	margin-bottom: 60px;
	padding-bottom: 0;
	text-align: left;
	text-transform: uppercase;
	}
	main article h1::after {
	content: "";
	border: none;
	border-bottom: 3px solid var(--accent);
	position: relative;
	width: 45px; 
	top: -20px; 
	margin-left: 15px;
	display: inline-block;
	opacity: 1
	}

aside h1 {
	position: relative;
	display: inline-block;
	text-transform: uppercase;
	display: block;
	text-align: center;
	font-size: calc(1.4rem + 0.9vw) ;
	margin-left: -30px;
	margin-right: -30px;
	width: calc(100% + 60px)
	}	
	aside h1::before,
	aside h1::after {
	content: "";
	border: none;
	border-bottom: 3px solid var(--accent);
	position: relative;
	width: 15px; 
	top: -14px; 
	margin: 0 7px;
	display: inline-block;
	opacity: 1
	}
	aside h1::before,
	aside h1::after{
	border-color: var(--accent-light);
	}
@media (min-width: 768px) and (max-width: 1400px );
@media (max-width: 380px) { 
	aside h1 {
		font-size: calc(1.1em + 0.9vw) ;
		text-align: left;
		margin-left: 0;
		margin-right: 0;
		width: 100%
		}	
		aside h1::before {
		display: none
		}
}





/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
.btn {
    transition: .3s;
    font-weight: 500;
    border-radius: 0;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: var(--radius)
	}

.btn-primary:hover {
	opacity: .7
	}
.btn-info {
	  --bs-btn-bg: var(--accent);
	  --bs-btn-border-color: var(--accent);
	  --bs-btn-hover-bg: var(--accent-dark);
	  --bs-btn-hover-border-color: var(--accent-dark);
	  --bs-btn-active-bg: var(--accent);
	  --bs-btn-active-border-color: var(--accent);
	  --bs-btn-color: var(--bs-black);
	  --bs-btn-hover-color: var(--bs-black);
	}	
.btn-outline-info {
	  --bs-btn-color: var(--accent);
	  --bs-btn-border-color: var(--accent);
	  --bs-btn-hover-bg: var(--accent);
	  --bs-btn-hover-border-color: var(--accent);
	  --bs-btn-active-bg: var(--accent);
	  --bs-btn-active-border-color: var(--accent);
	  --bs-btn-hover-color: var(--bs-black);
	}
	
			
.btn-absenden {
	--bs-btn-color: var(--bs-white);
	--bs-btn-bg: var(--primary);
	--bs-btn-border-color: var(--primary);
	--bs-btn-hover-color: var(--bs-black);
	--bs-btn-hover-bg: var(--accent);
	--bs-btn-hover-border-color: var(--accent);
	--bs-btn-focus-shadow-rgb: var(--bs-black);
	--bs-btn-active-color: var(--bs-black);
	--bs-btn-active-bg: var(--accent-dark);
	--bs-btn-active-border-color: var(--accent-dark);
	}






/*--------------------------------------------------------------
# Paginierung
--------------------------------------------------------------*/
.pagination {
	/*border-top: 1px solid color-mix(in srgb, var(--bs-black), transparent 80%);
	padding-top: 1.5em;
	margin-top: 2em*/
}
.pagination li {
}
.pagination li .page-link {
	border-color:  var(--primary);
	color:  var(--primary);
	padding: .8em 1em .6em 1em;
	border-radius: var(--radius) !important;
	font-size: 17px;
	text-transform: uppercase;
	font-weight: 400;
	text-align: center
}
.pagination li .page-link:hover {
	background:  var(--bs-dark);
	color:  var(--bs-white);
}
.pagination li .page-link i {
	font-size: 25px;
	opacity: .5;
	margin-top: -3px;
}
	
	
	
	

/*--------------------------------------------------------------
# Sections / Aufbau
--------------------------------------------------------------*/
section 					{ padding: 80px 0; }
.start section:not(.hero) 	{ padding: 120px 0; }	


@media (max-width: 1200px) {
	section 					{ padding: 60px 0; }
}
@media (max-width: 992px) {
	section 					{ padding: 60px 0; }
	
	.container:not(.topbar .container, .navbar .container) { 
	min-width: 100%; 
	padding-left: 60px; 
	padding-right: 60px;
	}
}
@media (max-width: 768px) {
	section 					{ padding: 60px 0; }
	
	.container:not(.topbar .container, .navbar .container) { 
	padding-left: 35px; 
	padding-right: 35px;
	}
}






/*--------------------------------------------------------------
# Navbar / Menu --- navbar - container - navbar-brand/navbar-collapse - navbar-nav
--------------------------------------------------------------*/
.navbar {
  	transition: .5s;
	}
.nav-link {
	position: relative;
    outline: none;
    transition: .3s;
    font-size: 18px;
	text-transform: uppercase;
	letter-spacing: .03em;
	}
	.nav-link:hover,
	.nav-link:focus,
	.nav-link#active { 
	}		
	.nav-link::before {
        position: absolute;
        content: "";
        width: 0;
        height: 2px;
        bottom: -1px;
        left: 50%;
        background: var(--accent);
        transition: .5s;
		}
	    .nav-link:hover::before,
	    .nav-link.active::before,
	    .nav-link#active::before {
        width: calc(100% - 2px);
        left: 1px;
		}
				
@media (min-width: 768px) {
	.navbar {
		background: rgba(0, 0, 0, 0.5) !important	
	  	}
		.navbar.affix {
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
		background: rgba(0, 0, 0, .5) !important;
		}
		.start .navbar:not(.affix) {
		background: none !important;
		}
		.start .navbar:not(.affix) .nav-link {
		color: var(--bs-white) !important
		}
		
	.nav-link {
		font-size: 17px;
		height: 100%;
		margin: 0 !important;
		margin-top: -4px;
		display: inline-block;
		}
	.nav-link:hover,
	.nav-link:focus,
	.nav-link#active { 
		}
}
@media (min-width: 1200px) {
	.nav-link {
		font-size: 18px;
		margin: 0 4px !important;
		}
}
@media (min-width: 1400px) {
	.nav-link {
		font-size: 20px;
		margin: 0 7px !important;
		}
}

@media (max-width: 768px) {
	.navbar { 
		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
		background: var(--bs-white);
		padding: 5px 0;
		}
    .navbar-collapse  {
	    text-align: center;
		padding: 0 15% 25px 15%;
		width: 70%;
		}
	.navbar-nav {
		text-align: center;
		border: none;
    	}		
    .nav-link  {
        font-size: 19px;
        border-bottom: 1px solid color-mix(in srgb, var(--bs-black), transparent 85%);
        padding: 10px 0;
       }
 	.nav-link:last-child  {
       	border: none;
       	margin-bottom: 0
 		}	
	.nav-link:hover, 
	.nav-link:focus,
	.nav-link#active {
		background: color-mix(in srgb, var(--bs-black), transparent 100%);
		}	
	.nav-link#active {
		background: none
		}	
}


.hotline {
	color: var(--bs-black) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: none !important;
	font-weight: 300;
	background: var(--accent) !important;
	border: none;	
	position: absolute;
	top: 15px;
	height: 35px
	}
	.hotline:hover {
	background: var(--accent-dark) !important;
	}	
@media (max-width: 768px) {
	.hotline {
		background: none !important;
		height: 60px; /* = Höhe .navbar */
		top: 0;
		right: 70px;
		padding: 0
		}	
	.hotline:hover {
		background: none !important;
		}	
}
@media (max-width: 575px) {
	.hotline {
		right: 65px;
		letter-spacing: -0.02em;
		font-size: 90%
		}	
}
@media (max-width: 992px) and (min-width: 767px),
   (max-width: 430px) {
	.hotline {
		display: none
		}	
}





/* ============================================================== 
    # TOGGLE Nav
=================================================================== */
.navbar-toggler {
	display: none;
	outline: none;
	box-shadow: none
	}
 @media (max-width: 767px) {
.navbar-toggler {
	height: 60px; /* Höhe .navbar-brand 50px + padding.navbar 5px + 5px = 60px */
	width: 60px;
	display: inline-block;
	position: absolute;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	color: var(--bs-black);
	border-radius: 0 !important;
	background: var(--accent);
	border: none;
	box-shadow: none;
	top: 0;
	right: 0;
	padding-top: 0;
	} 
 .navbar-toggler:hover, 
 .navbar-toggler:focus, 
 .navbar-toggler:active {
    outline: none;
    border-bottom: none !important; 
    }
 .navbar-toggler i {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 2px;
    background: color-mix(in srgb, var(--bs-black), transparent 60%);
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out; 
	top: -4px
    }
   .navbar-toggler i::before, 
   .navbar-toggler i::after {
    content: '';
    width: 34px;
    height: 2px;
    background: color-mix(in srgb, var(--bs-black), transparent 60%);
    position: absolute;
    left: 0;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    }
	.navbar-toggler:hover i,
	.navbar-toggler:hover i::before, 
	.navbar-toggler:hover i::after {
	background: var(--bs-black);
	}
	.navbar-toggler i::before 		{ top: -10px; 
	}
	.navbar-toggler i::after 		{ bottom: -10px; 
	}
	.navbar-toggler:hover i::before	{ top: -9px; 
	}
	.navbar-toggler:hover i::after 	{ bottom: -9px; 
	}

.navbar-toggler[aria-expanded="true"] i {
	background: transparent !important; 
	}
 .navbar-toggler[aria-expanded="true"] i::before {
	top: 0;
	-webkit-transform: rotateZ(45deg);
	-moz-transform: rotateZ(45deg);
	-ms-transform: rotateZ(45deg);
	-o-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
	background: var(--bs-black) !important; 
	}
 .navbar-toggler[aria-expanded="true"] i::after {
	bottom: 0;
	-webkit-transform: rotateZ(-45deg);
	-moz-transform: rotateZ(-45deg);
	-ms-transform: rotateZ(-45deg);
	-o-transform: rotateZ(-45deg);
	transform: rotateZ(-45deg);
	background: var(--bs-black) !important; 
	}
}	
/* --------- end TOGGLE Nav -------- */






/*--------------------------------------------------------------
# Brand / Logo
--------------------------------------------------------------*/
.navbar .navbar-brand {
	z-index: 1000;
	transition: all ease-in-out .2s;
	padding: 0;
	opacity: 1;
	height: 50px;
	}
	.navbar .navbar-brand:hover {
	transform: translateY(-2px);
	opacity: .8
	}
	.start .navbar .navbar-brand 		{ opacity: 0 }
	.start .navbar.affix .navbar-brand	{ opacity: 1 }
		
.navbar .navbar-brand img {
    height: 100%;
	transition: .3s
	}


@media (max-width: 768px) {
	.navbar .navbar-brand {
		opacity: 1 !important
		}
	.navbar .navbar-brand:hover {
		opacity:.8 !important
		}	
	.navbar .navbar-brand img {
		-webkit-filter: invert(100%);
		filter: invert(100%);
		}	
}
@media (max-width: 575px) and (min-width: 430px) {
	.navbar .navbar-brand img {
	height: 80%;
	margin-top: 6px;
	}
}




/*--------------------------------------------------------------
# HIGHLIGHT / CAROUSEL
--------------------------------------------------------------*/
header.hero { /* Komplette Höhe */
	margin-top: -80px /* Höhe Navbar */
	}
.carousel-item::after {
	background: rgba(var(--bs-black-rgb), .2);
	}
.carousel-img {
		filter: brightness(40%);
	}
	
	
	
	
	
.carousel-caption {
	}
	.carousel-caption h1 {
		color: var(--bs-white);
		}
	.carousel-caption p {
		color: var(--bs-white);
		}		
	.carousel-caption .btn {
		opacity: .7;
		border-color: var(--bs-white);
		color: var(--bs-white);
		margin-top: 3em !important;
		}
	.carousel-caption .btn:hover {
		opacity: 1;
		background-color: color-mix(in srgb, var(--acent), transparent 80%);
		border-color: var(--accent);
		color: var(--accent);
		background-color: color-mix(in srgb, var(--acent), transparent 80%);
		margin-top: 2em;
		}
	@media (max-width: 992px) {
		.carousel-caption .btn { padding: 13px 30px; margin-top: 2em !important;}
		}
	
	
	/* nur für 1. Carousel-item --------------- */	
	.carousel-img-2 { 
		transition: .3s;
		display: block;
		height: 100% !important;
		max-width: 300px !important;
		}
		@media (max-width: 992px) {
		.carousel-img-2 { max-width: 250px !important;}
		}
		@media (max-width: 575px) {
		.carousel-img-2 { max-width: 220px !important;}
		}
		@media (max-width: 380px) {
		.carousel-img-2 { max-width: 170px !important;}
		}
	
	
	
	



/*--------------------------------------------------------------
# Card (= well) / Boxen
--------------------------------------------------------------*/
.card {
	border-radius: var(--radius);
	border: none;
	background-color: var(--bs-white);
	}
.card-date {
	background-color: var(--accent);
	}





/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  background: url("../images/start/shkneu188_bg.jpg") center center no-repeat;
  color: #fff;
  font-size: 16px;
  position: relative;
}
#footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1;
}
#footer .footer-top {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 80px 0;
}
#footer a {
	color: var(--bs-white);
	}
	#footer a:hover {
	color: var(--accent);
	}
#footer img {
	height: 70px !important;
	transition: 0.3s;
	margin-bottom: 30px
	}
#footer .footer-top h1 {
  font-size: 28px;
  font-weight: 200 !important;
  color: var(--bs-white);
  position: relative;
  padding: 0;
  margin: 15px 0 30px 0;
}
#footer .foot-kontakt div {
  display: inline;
}
#footer .foot-kontakt i {
  margin-right: 3px;
  color: var(--accent);
}
#footer .footer-top .social-links {
  margin-top: 30px;
}
#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: var(--accent);
  color: var(--bs-dark);
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}
#footer .footer-top .social-links a:hover {
  background: var(--accent-dark);
  color: var(--bs-darker);
  text-decoration: none;
}
#footer .footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--bs-white), transparent 80%);
  z-index: 2;
  position: relative;
  margin-top: 40px;
  padding-top: 40px;
  font-size: 85%;
  opacity: .6
}







/*--------------------------------------------------------------
# Pagetop (style_master_01.css)
--------------------------------------------------------------*/
.back-to-top {
    background: color-mix(in srgb, var(--accent), transparent 40%);
    border:none
    }
.back-to-top i {
	}
.back-to-top:hover {
	background: var(--accent) !important;
   }
	
	








/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
 }


/* -------- Portfolio lang - Carousel Großes Image -------- */
.portfolio-details .carousel {
	margin: 0 auto;
	}
.portfolio-details .carousel-item {
	height: 250px;
	width: 100%;
	background: color-mix(in srgb, var(--bs-black), transparent 90%)
	}
.portfolio-details .carousel-item img {
	height: 100%;
	width: auto;
	margin: 0 auto;
	}
.portfolio-details .carousel-inner {
	float: left;
	width: calc(100% - 150px);
    border-radius: var(--radius)
	}




/* -------- Portfolio lang - Carousel Thumbnails -------- */
.portfolio-details .carousel-indicators {
	width: 150px;
	display: inline-block;
    position: static;
    float: left;
	margin: 0;
	justify-content: left;
	}
.portfolio-details .carousel-indicators .thumbnail {
	border: 5px solid color-mix(in srgb, var(--bs-white), transparent 0%);
	}
	.portfolio-details .carousel-indicators .thumbnail img {
	width: 150px;
	height: auto
	}
	.portfolio-details .carousel-indicators .thumbnail.active {
	border-color: color-mix(in srgb, var(--bs-white), transparent 0%)
	}
	.portfolio-details .carousel-indicators .thumbnail:not(.active) {
	opacity: .5;
	}


@media (min-width: 768px) {
	.portfolio-details .carousel-item,
	.portfolio-details .carousel-indicators { height: 400px }
	
	.portfolio-details .carousel-indicators {
	overflow: auto;
	overflow-x:hidden;
	height: 400px;
	}
	.portfolio-details .carousel-indicators .thumbnail {
	width: 100px;
	height: auto;
	margin-top: -5px;
	display: inline-block;
	float: left;
	clear: both;
	}
}
@media (min-width: 992px) {
	.portfolio-details .carousel-item,
	.portfolio-details .carousel-indicators { height: 450px }
}
@media (min-width: 1200px) {
	.portfolio-details .carousel-item,
	.portfolio-details .carousel-indicators { height: 500px }
}
	
	
@media (max-width: 768px) {
	.portfolio-details .carousel-item { height: 330px }
	
	.portfolio-details .carousel-inner {
	float: left;
	width: 100%;
	}
	.portfolio-details .carousel-indicators {
	overflow-y: hidden;
	overflow-x: scroll;
	width: 100%;
	height: 100px;
	display: inline;
	margin: 0;
	margin-top: 5px;
	white-space: nowrap;
	}
	.portfolio-details .carousel-indicators .thumbnail {
	width: auto;
	height: 100px;
	margin-top: -5px;
	margin-left: -10px;
	clear: none;
	display: inline-block;
    float: none;
	}
	.portfolio-details .carousel-indicators .thumbnail img {
	width: auto;
	height: 100px
	}
}	
@media (max-width: 480px) {
	.portfolio-details .carousel-item { height: 270px }
	
	.portfolio-details .carousel-indicators,
	.portfolio-details .carousel-indicators .thumbnail,
	.portfolio-details .carousel-indicators .thumbnail img{ height: 75px }
}	
@media (max-width: 400px) {
	.portfolio-details .carousel-item { height: 220px }
}		



	
	

/* -------- ANPASSUNG FÜR ###lang### - Großes Image -------- */
.portfolio-details-bilder {
	margin: 0 auto;
	color: rgba(255, 255, 255, 0);
	font-size: 0;
	}
	.portfolio-details-bilder br,
	.portfolio-details-bilder ul:not(.pagination),
	.portfolio-details .bildunterschrift {
		display: none
		}
		
	.portfolio-details-bilder .bildrahmenmitte-wrapper,
	.portfolio-details-bilder .bildunterschrift-bildrahmenmitte-nb {
		float: left;
		width: 100%;
		height: auto;
		}
		.portfolio-details-bilder img {
		padding: 0 !important;
		border-radius: var(--radius);
		border: 1px solid color-mix(in srgb, var(--bs-black), transparent 90%) !important;
		}



/* -------- ANPASSUNG FÜR ###lang### - Galerie -------- */
.portfolio-details-bilder .gallery-wrapper {
	float: left;
	position: relative;
 	width: 100%;
	grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-top: 10px;
	margin-right: -10px;
	width: calc(100% + 28px);
    }
	.portfolio-details-bilder .gallery-wrapper a.gallery {
    height: 150px;
	border-radius: var(--radius);
	justify-content: center;
	}
	.portfolio-details-bilder .gallery-wrapper a.gallery img.gallery_bild {
    width: auto;
    height: 100%;
    border-radius: var(--radius);
	}
	
	
	@media screen and (max-width: 768px) {
	   .portfolio-details-bilder .gallery-wrapper {
	        grid-template-columns: repeat(4, 1fr);
			width: calc(100% + 25px);
	    }
	}
	@media screen and (max-width: 480px) {
	   .portfolio-details-bilder .gallery-wrapper {
			width: calc(100% + 20px);
		}
	}
	@media screen and (max-width: 340px) {
	   .portfolio-details-bilder .gallery-wrapper {
			width: 100%;
			margin-left: 0;
			margin-right: 0 
		}
	}



/* -------- ANPASSUNG FÜR ###lang### - rechts - nur Text ohne img + .news_lang_galerie  -------- */
.portfolio-details-info {
		margin-top: 0
		}
.portfolio-details-info img,
.portfolio-details-info .gallery-wrapper {
		display: none !important
		}
	
	
.news .card {
	
}	
	
	




/*--------------------------------------------------------------
# Kontakt
--------------------------------------------------------------*/
.konatkt {
	
}
.kontakt-info h2 {
  padding: 0 0 0 70px;
  margin-top: 0;
  margin-bottom: 5px;
}
.kontakt-info p {
  padding: 0 0 0 70px;
  margin-bottom: 0;
}
.kontakt-info {
  margin-top: 40px;
}
.kontakt-info [class*="icon-"] {
 float: left;
  }