/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
         url('fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/roboto-v30-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  /* roboto-regular - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  /* roboto-700 - latin */
  @font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
         url('fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
  }

body {
	padding: 0 5% 0 5%;
	margin-left:auto;	
	margin-right:auto;
	max-width:800px;
}	


h3, h4, h5, .txt3, .txt4, .txt4b, .txt5, .bildTitel, .bu, .impressum {
	font-family: "Roboto", sans-serif;
	hyphens: auto; }


h3 {
	color:black;	
	font-size:3.0vw;
	font-weight:700;
	line-height:1.2;
	hyphens: none;
	margin-top: 4%;
	margin-bottom: 1%;
}
@media only screen and (min-width: 1000px) {	
  h3 {
     font-size: 30px;
  }
}

h4 {
	color:#5e607d;	
	font-size:2.5vw;
	font-weight:800;
	line-height:1.3;
	margin-block-start: 1.33em;
    margin-block-end: 0em;
}
@media only screen and (min-width: 800px) {	
  h4 {
     font-size: 24px;
  }
}

h5 {
	color:#5e607d;	
	font-size:2vw;
	font-weight:800;
	line-height:1.3;
	margin-block-start: 1em;
    margin-block-end: 0em;
}
@media only screen and (min-width: 1000px) {	
  h5 {
     font-size: 18px;
  }
}

.bildTitel {
	color:#5e607d;	
	font-size:2.5vw;
	font-weight:800;
	line-height:1.3;
	text-align: center;
	margin-block-end: 0.1em;
}
@media only screen and (min-width: 800px) {	
	.bildTitel {
     font-size: 24px;
  }
}


.txt3 {
	color:#5e607d;			
	font-size:2.2vw;
	font-weight:700;
	line-height:1.2;

}
@media only screen and (min-width: 1000px) {	
  .txt3 {
     font-size: 22px;
  }
}
@media only screen and (max-width:650px){
	.txt3::after {
		content: "•";
	}
}

.txt4 {
	color:#5e607d;	
	font-size:2.2vw;
	font-weight:400;
	line-height:1.3;
}
@media only screen and (min-width: 1000px) {	
  .txt4 {
     font-size: 18px;
  }
}

.txt4 a{
	text-decoration: none;
	color: blue;
	font-weight: 700;
}

.txt5 {
	color:#5e607d;	
	font-size:1.9vw;
	font-weight:400;
	line-height:1.3;
	margin-block-start: 0.1em;	
}
@media only screen and (min-width: 800px) {	
  .txt5 {
     font-size: 16px;
  }
}

#titel img {
	width: 80%;
	margin-left: 8%;
}

.textBlock {
	width: 80%;
	margin-left: 10%;
}

.grafikLinks-text {
    display: grid;
    grid-template-columns: 30% 64%;
    column-gap: 6%;
    grid-template-rows: auto 1fr;
    grid-template-areas: 
      "grafik-links textAbs";
    align-items: start;
    align-content: start;
    margin-bottom: 1em;
}
/*
@media only screen and (max-width: 600px) {	
    .grafikLinks-text{
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas: 
        "grafik-links"
        "textAbs";
    }
}
*/

.grafikLinks-text svg,
.grafikLinks-text img {
	width: 100%;
	height: auto;
}
/*
@media only screen and (max-width: 600px) {	
    .grafikLinks-text svg,
	.grafikLinks-text img {
        width: 30%;
    }
}
*/

.textLinks-bildRechts{
    display: grid;
    grid-template-columns: 62% 35%;
    column-gap: 3%;
    grid-template-rows: auto 1fr;
    align-items: start;
    align-content: start;
    margin-bottom: 0em;
}

.grafik {
	grid-area: grafik-links;
	width: 89%;
}


.rosiBox {
  display: flex;
  justify-content: space-between; 
  width: 95%; 
  margin: 0 auto; /* Abkürzung für margin-left/right: auto */
}


.rosiBox img {
  /*max-width: 50%; */
  width: 100%;
  height: auto; /* Proportional skalieren */
}


.variantenBox {
	display: flex;
  	justify-content: space-between; 
  	width: 100%; 
  	margin: 0 auto; 
}

.variantenBox img {
	width: 100%; 
  	height: auto;
}



.lichtBox {
/*	border:2px solid blue;*/
	padding:0%; 
	margin-top:0%;
	width: 100%;
}


.lichtBox:hover {
    cursor: zoom-in;
}


.grossBild {
/*	border:2px solid blue;*/
	padding:0%; 
	margin-top:0%;
	width: 100%;
}


.grossBild:hover {
    cursor: zoom-out;
}

.kasten {
	border:2px solid lightgray; 
	padding:3%; 
	margin-top:3%;
	width: 100%;
}


.vorschau-Zeile {
	display: flex;
	flex-direction: row; 
	justify-content: space-between;

}


.vorschau-Clip {
	border:2px solid lightgray;
	width: 10%;
}

.vorschau-Clip  img {
	width: 100%;
	height: 100%;
}

.focusRahmen {
	display: grid;
    grid-template-columns: 6% 82% 6%;
    column-gap: 3%;    
/*	justify-items: center;	*/
    margin-bottom: 1em;
	margin-top: 1em;
}

/**/
.pfeilspalte {
	display: flex;
	flex-direction: column; 
	justify-content: center;
	align-items: center;
	width: 100%;
}


/**/
.pfeilspalte a {
	display: block;
	align-self: center;
	width: 100%;
	height: auto;
}


.pfeilspalte svg{
	display: block;
	width: 100%;
	height: 100%;
	align-self: center;
}

#pfeil {
    fill: lightgray;
    stroke: none;
    transition: fill 0.3s ease; /* Optional: Macht den Übergang weicher */
}

.pfeilspalte svg:hover #pfeil{
	fill: rgb(233, 117, 34);
}

/***  Kopfnavi ***/

nav ul {
	display: flex;
	flex-direction: row;
	justify-content:center;
	padding-inline-start: 0px;
	margin-block-start: 0em;
  } 
  
nav li {
	font-family: "Roboto", sans-serif;  
	list-style: none;
	margin: 0.3em;
	padding: 0;
	color: darkgray;
	font-size:2.2vw;  
  }
  @media only screen and (min-width: 1000px) {	
	nav li {
	   font-size: 22px;
	}
  }

/**  
nav li[aria-current] a {
  color: darkgray
}
*/  


nav a {
	padding: 0.4em 1em;
	text-decoration: none; 
	color: black; 
}

  nav a:focus,
  nav a:hover {    
	color: darkblue; 
	font-weight: bold;
  }

nav a.active {
	color: darkgray
}

/***  Ende  Kopfnavi ***/


/*  Navi-Fußzeile  ****************************/
.navizeilenGrid {
	/*    width: 95%;*/
		margin: 1% 2.5% 3% 2.5%;
		display: grid;
		grid-template-columns: 10% 35% 10%;  
		justify-content: space-between;
	}
	
#navizeile svg {
    width: 100%;
    height: auto;
    max-height: 2em; /* Damit sie nicht höher werden als dein Link-Container */
    display: block;
}

	#navizeile a {
		height: 2em; 
		text-decoration: none;
	}
	
	#navizeile svg:hover #schild{
	  fill: gray;
	  stroke: gray;
	}
	
	#navizeile svg:hover #haus{
		fill: gray;
		stroke: gray;
	  }
	
	#navizeile svg:hover text {
		fill: white;
	}
	

/***  Impressum ***/

.impressum {

	font-size: 2vw;
    line-height: 2;
    font-weight: 400;
    color: gray;
    text-align: center;
}
@media only screen and (min-width: 700px) {	
    .impressum {
        font-size: 14px;
    }
}

.impressum a {
	text-decoration: none;
}