body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
}

body {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(''),
       url('../fonts/inter-v12-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/inter-v12-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  line-height: 1.5;       
}

p { 
	line-height: 1.5;	// Zeilenhöhe innerhalb von p-Elementen
	margin-top: 0; 		// Abstand zwischen p-Elementen
	margin-bottom: 1; 
}

.bildunterschrift {
  margin-top: 0.5em;
  margin-bottom: 1.5em;
  font-size: 0.857em;
  /*padding-bottom: 0em;*/
}

.bildunterschrift a{
  color: #000000;
}

.bildunterschrift a:hover, a:focus {
  color: #386bbb;
  cursor: pointer;
  padding-bottom: 3px;
  }

section.neuigkeiten .bildunterschrift {    
	    font-size: 1em;
	    background-color: #ffffff;
	    margin-top: 0.3em;
	    /*display: -webkit-box;
	    -webkit-line-clamp: 3;
	    -webkit-box-orient: vertical; */
	    overflow: hidden; 
	    height: auto;
	}
section.neuigkeiten .bildunterschrift h2 {
  margin: 0.3em 0em;
  }	

.hero-image { /* neu 9.9.2025 */
  background-image: url("../images/news/titel_sepia_2025_8.jpg");
  background-color: #cccccc;
  height: 60vh; /* Full viewport height */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/*@media (orientation:portrait){
	.hero-image { 
		background-position: center;
		background-size: cover;
		}
	}

@media (orientation:landscape){
	.hero-image { 
		background-position: center;
		background-size: cover;
		}
	}*/

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
  

.hero-text h1{
  font-weight: bold;
  text-shadow: #222222 1px 0 6px;
}

.hero-text h3{
  text-shadow: #222222 1px 0 4px;
}

.bttn3 { /* neu 9.9.2025 */ 
        display: inline-block; 
        font-size: 0.7em;      
		font-weight: bold;
        background-color: white; 
        text-align: center;
        width: auto;
        padding: 0.7em;
        color: #424242;
        cursor: pointer;
        text-transform: none;
    }
    


footer, section, article, div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

strong, b {
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(''),
       url('../fonts/inter-v12-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/inter-v12-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  letter-spacing: -0.01em;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1, h2, h3, h4, h5 {
  margin: 0; 
}


h1 {
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(''),
       url('../fonts/inter-v12-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/inter-v12-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-size: 2.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  letter-spacing: 0.005em;
  line-height: 1.05em;
  }
  
h2 {
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(''),
       url('../fonts/inter-v12-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/inter-v12-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-size: 1.3em;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  }

h3 {
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(''),
       url('../fonts/inter-v12-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/inter-v12-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  font-size: 1.14em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.05em;
  }


.center {
  margin: 0;
  position: relative;
  /*padding: 0.5em;*/
  }
   
/*
 *
 * Topics mit 3 Blöcken
 *
 */		
.topics_container {
  display: block;
  position: relative;
  height: auto;
  margin-top: 2.0em;
  margin-bottom: 2.5em;
  width: 100%;
  font-size: 85.7%;
   		}
  		
.topics__inner {
  display: block;
  position: relative;
  padding-top: 0.5em;
  overflow: auto;
 		}

.topic {
  display: block;
  position: relative;
  width: 98%;
  margin: 0 1.0% 0 1.0%;
  height: auto;
  float:left;
  text-align: center;
   		}

.topic_button-1 {
	margin-top: 0.5em;
	margin-bottom: 3em;
   		}
.topic_button-2 {
	margin-top: 0.5em;
	}

a {
	text-decoration: none;
	color: #727272;
	cursor: pointer;
	}

a:hover, a:focus {
  color: #111;
  cursor: pointer;
  text-decoration: none;
  }

.category {
	display:inline;
	}
	
.category a {
	font-size: 85.7%;
	color: #727272;
	text-decoration: none;
	border-bottom: 1px #727272 solid;
	padding-bottom: 3px;
  }

.category a:hover, .category a:active {
  	color:#111;
  	border-bottom: 1px #111 solid;
	padding-bottom: 3px;
	} 							
/*
 *
 * Main
 *
 */

main {
  width: 98%;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2.5em;
  overflow: auto; /*Wichtig, damit float und height zusammenspielen!*/
}

a.bttn1 {
	text-decoration: none;
	color: #727272;
	border-bottom: 1px #727272 solid;
	padding-bottom: 3px;
	}
	
a.bttn1:hover,
a.bttn1:focus, a.bttn1:active {
	color:#111;
	border-bottom: 1px #111 solid;
  	padding-bottom: 3px;
	}
	
a.bttn2 {
    display: inline-block;
    padding:0.3em 1.2em;
    margin:1em 0.3em 0.3em 0;
    border-radius: 1em;
    box-sizing: border-box;
    text-decoration:none;
	font-size: 1em;
	color: #727272;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #727272;
    }
    
a.bttn2:hover,
a.bttn2:focus {
    color: #111;
    text-decoration: none;
    border: 1px solid #111;
}
@media all and (max-width:30em) {
 a.bttn2{
  display:block;
  margin:0.2em auto;
 }
}



/*
 *
 * Content
 *
 */


/*
 *
 * call-to-action
 *
 */

.call-to-action {
  padding: 1em;
  width: 100%;
  float: left; /*neu*/
}
.cta__title {
  border-bottom: 1px solid #E0E0E0;
  line-height: 1.71em;
  font-size: 1.14em;
}
.call-to-action__item {
  padding: 1em 0;
  line-height: 1.37em;
  padding: 1.5em inherit;
}
/*
 *
 * Footer
 *
 */

footer {
  /*border-top: 1px solid #212121;*/
  width: 100%;
  height: auto%;
  overflow: auto; /*Wichtig, damit float und height zusammenspielen!*/
  clear: both; /*neu*/
  padding-top: 1em;
  margin-top: 1em;
  text-align: center;
  font-size: 0.857em;
  background: #f5f5f7;
  display: block;
}

.footer__inner { /*https://www.drweb.de/elemente-zentrieren-css/*/
  display: block;
  position: relative;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  overflow: hidden;
  }

.footer-1, .footer-2 {
  display: block;
  width: 98%;
  margin: 0 1.0% 0 1.0%;
  height: auto;
  padding-bottom: 1.5em;
  float:left;
}


/*
 *
 * ACCORDION
 *
 */

button {
    margin: 0;
    padding: 0em 0em 1.5em 0em;
    background: #fff;
    border-radius: 0;
    font: inherit;
    outline: none;
    width: 100%;
    display: block;
    text-align: left;
    color: inherit;
    cursor: pointer;
    font-size:0.857em;
}

img {
    vertical-align: middle;
    max-width: 100%;
    }

[data-accordion-group] {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

[data-accordion] [data-content] {
    background: #fff;
    opacity: 0.9;
}

[data-accordion] [data-content] {
    overflow: hidden;
    max-height: 0;
}

/* Basic Theme */

[data-accordion] {
    line-height: 1;
}

[data-control] {
	margin-top: 0px;
    border-top: 0px solid #fff;
    border-right: 0px solid #fff;
    border-bottom: 1px solid #E0E0E0;
    border-left: 0px solid #fff;
    padding: 0.5em 0em 0.5em 0.5em;
}

[data-content] > * {
    /* border-bottom: 1px solid #888;*/
    /*padding: 10px 0px 10px 10px;*/
	font-size: 0.857em;
}

[data-content] [data-accordion] {
    border: 0;
    padding: 1.6em; /*vorher 24 px*/
}

[data-accordion] [data-control] {
	color: #727272;
    position: relative;
    padding-right: 40px;
}

[data-control]:hover, [data-control]:focus {
	color: #111;
}

[data-accordion] > [data-control]:after {
    content: "";
    position: absolute;
    right: 0px;
    top: 10px;
    height: 15px;
    width: 24px;
    background: url('../images/button/down.png') center center no-repeat;
    background-size: 52%;
}

[data-accordion].open > [data-control]:after {
    background: url('../images/button/up.png') center center no-repeat;
    background-size: 52%;
}

[data-content] a {
	color: #727272;
	text-decoration: none;
}


[data-content] a:hover, [data-content] a:focus {
  text-decoration: none;
  color: #111;
}

/*
 *
 *GRID
 *
 */

[class*="col-"] {
	display: block;
	float:left;
	margin: 0 1.0% 0 1.0%;
	/*overflow: hidden; loeschen*/
	/*height: 100%;*/
	}

	.col-1 {
		width: 98%;
		/*text-align: center;*/	
			}
	/*.col-1_schmal {
		width: 98%;
		padding: 0% 25%;
		text-align: center;	
		min-height: 500px;
			}*/
	.col-2-3 {
		width: 64%;
			}
	.col-1-3 {
		width: 31%;
		}
	.col-1-4 {
		width: 23%;	
	}
	.col-3-4 {
		width: 73%;	
	}
	.col-1-2 {
		width: 48%;	
	}
	.col-1-5 {
		width: 18%;	
	}
	.col-2-5 {
		width: 38%;	
	}
	.col-4-5 {
		width: 78%;	
	}
	.col-3-5 {
		width: 58%;	
	}
	.col-1-10 {
		width: 8%;	
	}
/*
 *
 *Specials-Neu
 *
 */

	.nav-box {
	display: block;
	float:left;
	position: absolute;
	/*margin: 0 1.0% 0 1.0%*/
	padding: 0em 0em 0em 1.5em;
	width: 100%;
	z-index: 2;
	}
	
	.displacer {
	display:block;
	float:left;
	height: 34px;
	width:100%;
	}
	
	.bilder-box {
	display: block;
	float:left;
	position: absolute;
	}
 	
.rahmen-1	{ /*Portfolio einzeln Hochformat*/
	display: block;
	float:left;
	margin-right: 1.5%;
	margin-left: 1.5%;
	margin-bottom: 1.5rem;
	overflow: hidden;
	height: 100%;
	width: 22%;
	}

		
.rahmen-2	{ /*Portfolio alle Querformat*/
	display: block;
	float:left;
	width: 100%;
	padding: 0em 0.5em 0em 0.5em;
	}
    
.rahmen-2 > a > img { 
		margin-bottom: 0.4rem;		
		}		
		
.rahmen-3	{ /*Portfolio alle Querformat*/
	display: block;
	float:left;
	width: 100%;
	padding: 0em 0.5em 0em 0.5em;
	}
    
.rahmen-3 > a > img { 
		margin: 0em;		
		}
		
.rahmen-3:hover img {
	opacity: .5;
}		

.panel { 
	position:relative;
	width:100%;
	padding-top:100%;
	background-color: #fff;
}

.box {
	position:absolute;
	height:100%;
	width:100%;
	margin-top: -100%;
}

.box > a > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
  opacity: 1;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  -webkit-backface-visibility: hidden;
  
}

.box > a > img:hover {
	opacity: .5;
}	
				

 


.wrapper {
	display: block;
	float:left;
	width: 100%;
	}
.wrapper:after {
    clear: both;
    content: '';
    display: block;
}

figure {
	margin: 0;
	padding: 0;
	/*background: #fff;*/
	overflow: hidden;
}
figure:hover {
	opacity: 1;
}

/* Opacity #1 */
figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
	-webkit-backface-visibility: hidden;
}
figure:hover img {
	opacity: .5;
}