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


body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  line-height: 1.45;  
}

p { 
	margin-top: 0;
    margin-bottom: 1em;
}

video {
  /* override other styles to make responsive */
  max-width: 100%    !important;
  height: auto   !important;
}

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

.bildunterschrift a{
  color: #000000;
}

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

section.illustrator,
section.whatisnew {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}
  
section.illustrator {
    position: relative;
    clear: both;
    display: flow-root;
}

section.whatisnew {
	background-color: #eeeeee;
	display: flow-root;
	}
	
section.highlights .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.highlights .bildunterschrift h2 {
  margin: 0.3em 0em;
  }	
  
section.neuigkeiten .bildunterschrift, section.whatisnew .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, section.whatisnew .bildunterschrift h2 {
  margin: 0.3em 0em;
  }	
  
.einleitungstext  {
		display: block;
		float:left;
		margin: 0 1.0% 0 1.0%;
		width: 98%;
		text-align: left;
			}

.hero-image { /* neu 9.9.2025 */
  background-image: url("../images/news/titel_sepia_2026_3.avif");
  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: rgba(51, 51, 51, 0.6) 1px 0 4px;
}

.hero-text p{
  text-shadow: rgba(51, 51, 51, 0.6) 1px 0 4px;
}




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

strong, b {
  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: 400;
  font-size: 2.5em;
  margin-top: 2rem;
  margin-bottom: 0.8em;
  letter-spacing: 0.005em;
  line-height: 1.05em;
  }
  
h2 {
  font-style: normal;
  font-size: 1.5em;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  }

h3 {
  font-style: normal;
  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: #000;
	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: #4e82f1;
	border-bottom: 1px #4e82f1 solid;
	padding-bottom: 2px;
	}
	
a.bttn1:hover,
a.bttn1:focus, a.bttn1:active {
	color:#333;
	border-bottom: 1px #000 solid;

	}
	
a.bttn2 {
    display: inline-block;
    padding: 0.3em 1.2em;
    margin:1em 0.3em 0.3em 0;
    border-radius: 0px;
    box-sizing: border-box;
    text-decoration:none;
	font-size: 0.8em;
	color: #4e82f1;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #4e82f1;
    }
    
a.bttn2:hover,
a.bttn2:focus {
    color: #111;
    text-decoration: none;
    border: 1px solid #111;
}
.bttn3 { /* neu 9.9.2025 */ 
        display: inline-block;    
		text-align: center;
        width: auto;
        margin: 0.5em;
        cursor: pointer;
        text-transform: none;
    }
a.bttn3 {
    display: inline-flex;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    padding: 0.8em 0.8em;
    background: #4e82f1;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color .2s ease,
                transform .15s ease,
                box-shadow .2s ease;
}

a.bttn3:hover {
    background: #4062e9;
    box-shadow: 0 8px 12px rgba(17,109,255,.25);
}

.blur-button {

background-color: rgba(255, 255, 255, 1.0);
  
	
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px); /* Für Safari */
  
	border: 1px solid rgba(255, 255, 255);
	border-radius: 0px;
  	cursor: pointer;
    display: inline-block; 
	text-align: center;
    width: auto;
    margin: 0.5em;
    padding: 1em 1.4em;
    color: #4e82f1;
    cursor: pointer;
    text-transform: none; 
}

a.blur-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 16px;
    background-color: rgba(255, 255, 255, 1.0);
    color: #4e82f1;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    border-radius: 0px;
    cursor: pointer;
    transition: background-color .2s ease,
                transform .15s ease,
                box-shadow .2s ease;
}

a.blur-button:hover {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
    /*transform: translateY(-1px);*/
}



@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.857rem;
  border-top: 1px solid #dcdcdc;
  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 0em 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%;
    }
img.projektbild {
    display: block;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    border: 0;
}

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

[data-accordion] [data-content] {
    background: #fff;
    overflow: visible;
    max-height: 0;
}


/* Basic Theme */

[data-accordion] {
   /* line-height: 1rem;*/
}
[data-accordion] > [data-content] {
    max-height: 0;
    overflow: hidden;
}

[data-control] {
    margin-top: 0;
    padding: 0.6em;
    font-size: 0.857rem;
    border: 0;
    border-bottom: 1px solid #E0E0E0;
}

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

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

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

[data-accordion] [data-control] {
	color: #1a1a1a;
    position: relative;
}

[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: #000;
	text-decoration: none;
	padding-left: 0.6em;
}


[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:none;
	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: .8;
}		

.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: .75;
}

.bild-hinten {
  position: absolute;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1; /* Niedrigerer Wert */
}

.bild-vorne {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 60px;
  height: auto;
  z-index: 2; /* Höherer Wert */
}	
				
.text-vorne {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 2; /* Höherer Wert */
  display: inline-block;
  padding: 0.15em 0.5em;
  margin:1em 1em;
  box-sizing: border-box;
  text-decoration:none;
  font-size: 0.75rem;
  color: #000;
  text-align: center;
  vertical-align: middle;
  background-color: #f1fd61;
}
.text-vorne-credit {
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 2; /* Höherer Wert */
  display: inline-block;
  padding: 0.075em 0.25em;
  margin:1em 1em;
  box-sizing: border-box;
  text-decoration:none;
  font-size: 0.6rem;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  background-color: rgba(0, 0, 0, 0.3);
}		
 


.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;
}