*
{
margin: 0;
padding: 0;
border: none;
outline: none;
} 


@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(materials.woff2) format('woff2');
 font-display:swap;
}

@font-face {
 font-family: 'plexsans';
  font-style: normal;
 src: url(IBMPlexSans-Regular.ttf) format('truetype');
 font-display:swap;
}

@font-face {
 font-family: 'delius';
  font-style: normal;
 src: url(Delius-Regular.ttf) format('truetype');
 font-display:swap;
}


/* 
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
*/




.materials {
  font-family: 'Material Symbols Outlined','-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  color: #053571;
}



html 
{
height:100%;

}


@media only screen and (min-width: 800px) {

	body
	{
	background-image: url("olbernhau-januar.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
    background-size: cover;
	background-position: center;
	font-family: 'plexsans','-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif';
	width:100%;
	overflow-x:hidden;
	}
}

@media only screen and (max-width: 799px) {
	body
	{
	font-family: 'plexsans','-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif';
	width:100%;
	overflow-x:hidden;
		background-color: #eee;
		/*#5a5154;*/

	}

}






/* ~~~~~~~~~~~~~~~~~~~~ fig ~~~~~~~~~~~~~~~~~~~~~~~~ */
.boxen {display:flex; justify-content:center; align-content:space-around; ;align-items:flex-start; flex-wrap:wrap; width:100%;}

		a.fig {text-decoration:none; color:#2d4130; overflow:hidden;}
		a.fig:hover img {scale(1.4);}
		
		
		
		.boxen figure
		{
		display: flex;
		flex-direction:column;			
		justify-content : flex-end;
		align-items : center;
		overflow:hidden;
		margin:10px;
		text-align:center;
		width: 320px;
		height: 560px;
		text-decoration:none;
		border: 1px solid #ccc;
		border-radius: 10px;
		position: relative;
		background:#fff;
		transition: 0.8s all;
		}

	.boxen figure:hover
		{
		border: 1px solid #000;
		background: #ccc;
		transition: 0.8s all;
		}
	.boxen figure:hover img
		{
				transform: scale(1.3);
		transition: 0.5s all;
		}
		
		.boxen figure img
		{
		display: block;
		width: 320px;
		max-height: 280px;
		width:auto;
		height:auto;
		transition: 3.8s all;
		overflow:hidden;
		}
		

		
		.boxen figcaption {
			height:380px;
			color:#2d4130;
			overflow:hidden;
					padding: 10px;
								hyphens: auto;
		}
		


		


		.boxen figcaption p
		{
		overflow: hidden;
		display: block;
		position: relative;
		overflow:hidden;

		}

		.boxen figcaption ul
		{
		text-align:left;

		}	
		.boxen figcaption li
		{
		margin-left:10px;

		}	



/* ~~~~~~~~~~~~~~~~~~~~ klein ~~~~~~~~~~~~~~~~~~~~~~~~ */
.kleinboxen {display:flex; justify-content:center; align-content:space-around; ;align-items:flex-start; flex-wrap:wrap; width:100%;}

		a.fig {text-decoration:none; color:#2d4130; overflow:hidden;}
		a.fig:hover img {scale(1.4);}
		
		
		
		.kleinboxen figure
		{
		display: flex;
		flex-direction:column;			
		justify-content : flex-end;
		align-items : center;
		overflow:hidden;
		margin:10px;
		text-align:center;
		width: 320px;
		height: 300px;
		text-decoration:none;
		border: 1px solid #ccc;
		border-radius: 10px;
		position: relative;
		background:#fff;
		transition: 0.8s all;
		}

	.kleinboxen figure:hover
		{
		border: 1px solid #000;
		background: #ccc;
		transition: 0.8s all;
		}
	.kleinboxen figure:hover img
		{
				transform: scale(1.3);
		transition: 0.5s all;
		}
		
		.kleinboxen figure img
		{
		display: block;
		width: 320px;
		max-height: 180px;
		width:auto;
		height:auto;
		transition: 3.8s all;
		overflow:hidden;
		}
		

		
		.kleinboxen figcaption {
			height:120px;
			color:#2d4130;
			overflow:hidden;
					padding: 10px;
								hyphens: auto;
		}
		


		


		.kleinboxen figcaption p
		{
		overflow: hidden;
		display: block;
		position: relative;
		overflow:hidden;

		}

		.kleinboxen figcaption ul
		{
		text-align:left;

		}	
		.kleinboxen figcaption li
		{
		margin-left:10px;

		}	


/* ~~~~~~~~~ Größen ~~~~~~~~~~~~~~~ */
@media (width >= 1300px) {
	body {font-size:18px;}
	header {width:90vw; left: 5vw; right:5vw; height:90px;}
	h1 {font-size: 2.5vw;}
	h2 {font-size: 2.0vw;}	
	h3 {font-size: 1.5vw;}	
	.ueberschrift {width:20vw;}
	.headercontent { width:70vw;}
	section {width:90vw; margin-left: 5vw; margin-right:5vw;}
	main {  width: calc(70vw - 20px); margin-left:20px;}
	.materials {  font-size: 5vh;}
	a.spalte p {font-size:16px;}
	.square,.slantedtop,.slantedbottom {  width:20vw; height:auto;}

	a.spalte {padding:10px;}
	.ueberschrift span {font-size:30px;}
.ueberschrift p {font-size:22px;}
.sticky {position:sticky; top:60px;}
.square {max-height:calc(100vh - 140px);}

#porstmann .back {font-size:1.2vw;}
#porstmann .back p {font-size:0.8vw;}


#hamburger {display:none;}


#datenschutztext:target,#impressumtext:target, #disclaimertext:target, #externtext:target{top:100px; width:50%; height:75%; 	padding:10px; margin-left:-25%;}
}


@media (800px <= width < 1300px )  {
	body {font-size:17px;}
header {width:100vw; height:70px;}
	h1 {font-size: 3vw;}
	h2 {font-size: 2.5vw;}	
	h3 {font-size: 2vw;}
	.ueberschrift {width:20vw;}
.headercontent { width:80vw;}
section {width:100vw; }
main {  width: calc(80vw - 8px); margin-left:8px;}
.materials {  font-size: 4vh;}
	a.spalte p {font-size:14px;}
		.square,.slantedtop,.slantedbottom {  width:20vw;}

				a.spalte {padding:3px;}
					.ueberschrift span {font-size:24px;}
.ueberschrift p {font-size:16px;}

.sticky {position:sticky; top:28px; }
.square {max-height:calc(100vh - 100px);}

#porstmann .back {font-size:1.3vw;}
#porstmann .back p {font-size:0.9vw;}


#hamburger {display:none;}

#datenschutztext:target,#impressumtext:target, #disclaimertext:target, #externtext:target{top:100px; width:50%; height:75%; 	padding:10px; margin-left:-25%;}
}

@media (width < 800px )  {
	body {font-size:16px;}
	header {width:100vw; height:70px;}
	h1 {font-size: 4vw;}
	h2 {font-size: 3.5vw;}	
	h3 {font-size: 3vw; }
	.ueberschrift {width:calc(100vw - 90px); }
					.ueberschrift span {font-size:24px;}
.ueberschrift p {font-size:16px;}
#porstmann .back {font-size:10.5px;}
#porstmann .back p {font-size:7px;}



	.headercontent {  position: fixed; width:100vw; right:-100vw; top:0px; transition: all 2s; flex-direction:column;}
	section {width:100vw; flex-direction:column;}
	main {  width: 100vw; height:auto; margin-left:0px; display:block;}
	.materials {  font-size: 4vh;}
	a.spalte p {font-size:14px;}
		.square,.slantedtop,.slantedbottom {width:100vw; height:auto; display:block;}
	.versteckt {display:none;}
				a.spalte {padding:0px;}
		#datenschutztext:target,#impressumtext:target, #disclaimertext:target, #externtext:target{top:90px; width:90%; height:75%; 	padding:10px; margin-left:-49%;}		
			#impressumtext:target + body {background:#222;}	
			
				
	.boxen figure { width:calc(50vw - 30px);  height:420px; !important}
	.boxen figure img {max-height:230px; width:100%;}
	.boxen figcaption {height:320px; padding:3px;}

	.kleinboxen figure { width:calc(50vw - 30px);  }
	.kleinboxen figure img { width:100%;}
	.kleinboxen figcaption {hpadding:3px;}			
			
			
			
#hamburger {
  --s: 50px; /* control the size */
  --c: #053571; /* the color */
    position: relative; width:52px; height:52px;
  z-index:101;
  height: var(--s);
  aspect-ratio: 1;
  border: none;
  padding: 0;
  border-inline: calc(var(--s)/2) solid #0000; 
  box-sizing: content-box;
  --_g1: linear-gradient(var(--c) 20%,#0000 0 80%,var(--c) 0) 
         no-repeat content-box border-box;
  --_g2: radial-gradient(circle closest-side at 50% 12.5%,var(--c) 95%,#0000) 
         repeat-y content-box border-box;
  background: 
    var(--_g2) left  var(--_p,0px) top,
    var(--_g1) left  calc(var(--s)/10 + var(--_p,0px)) top,
    var(--_g2) right var(--_p,0px) top,
    var(--_g1) right calc(var(--s)/10 + var(--_p,0px)) top;
  background-size: 
    20% 80%,
    40% 100%;

  clip-path: inset(0 25%);
  -webkit-mask: linear-gradient(90deg,#0000,#000 25% 75%,#0000);
  cursor: pointer;
  transition: 
    background-position .3s var(--_s,.3s), 
    clip-path 0s var(--_s,.6s);
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
}
#hamburger:before,
#hamburger:after {
  content:"";
  position: absolute;
  border-radius: var(--s);
  inset: 40% 0;
  background: var(--c);
  transition: transform .3s calc(.3s - var(--_s,.3s));
}

#hamburger:checked {
  clip-path: inset(0);
  --_p: calc(-1*var(--s));
  --_s: 0s;
}

#hamburger:checked + .headercontent {
  transition: all 2s; top:70px; right:0px;
}


#hamburger:checked:before {
  transform: rotate(45deg);
}
#hamburger:checked:after {
  transform: rotate(-45deg);
}
#hamburger:focus-visible {
  clip-path: none;
  -webkit-mask: none;
  border: none;
  outline: 2px solid var(--c);
  outline-offset: 5px;
}
}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/*
  word-wrap: normal;
  white-space: nowrap;
  */


h1 {
  font-family: 'delius','-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
hyphens: auto;
  direction: ltr;
  color: #f2820d;
  text-shadow: 2px 2px 0px #999;
  display:block;
  }

h2 {
  font-family: 'delius','-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
	hyphens: auto;
  direction: ltr;
  color: #053571;
  text-shadow: 2px 2px 0px #999;
  display:block;
  }

h3 {
  font-family: 'delius','-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
hyphens: auto;
  direction: ltr;
  color: #053571;
  text-shadow: 2px 2px 2px #999;
  display:block;
  }
  
  
.copy {
	font-size:11px; display:block; margin:0 0 20px 20px;
}


/* ~~~~~~~~~~~ WebsiteEditor Styles ~~~~~~ */
.image-style-align-left {width:55%; float:left; position:relative; height: auto;  padding: 10px 10px 10px 0;}
.image-style-align-right {width:55%; float:right; position:relative; height: auto; padding: 10px 0 10px 10px;}

figure.image-style-block-align-left {position:relative; display:inline-block; float:left; padding:5px;}


figure.image-style-block-align-left img{height:300px; width:auto;}

figure.image-style-block-align-right {display:inline-block; float:right; padding:5px;}
figure.image-style-block-align-right img{height:300px; width:auto;}

		figure.image-style-align-right img { 	border-top-left-radius: 5%; 	border-bottom-left-radius: 5%;}
		figure.image-style-align-left img { 	border-top-right-radius: 5%; 	border-bottom-right-radius: 5%;}

img.image_resized {height:auto;  display:inline-block; }
.image img{width:100%; height:auto;}  
img.darken {mix-blend-mode: darken;}

figure.table { margin:0 20px 0 20px;}
figure table {width:100%;}


.bildbox {
align-items:center;background-color:#ddd;display:flex;justify-content:space-around;width:calc (100% - 40px);}





/* ~~~~~~~~~~~~~~ BildSlider ~~~~~~~~~~~~~ */
.sliderbox {text-align:left; display:flex; justify-content:center; align-items:center; padding:10px; max-width:1500px;  margin:0 auto; text-align:left;}
.textbox {width:70%;}

.bildslider {
	width: 30vw;
	height: 20vw;
	position: relative;
	overflow: hidden;
background:#eee;
	margin-right:15px;
	float: left;
}

@media(max-width: 800px)
{
.bildslider {display:block; margin:15px; width:calc(100vw - 60px); height: calc(66.66vw - 40px);}
.sliderbox {display:block;}
}

.bildslider > * {
	position: absolute; 
	top:100%; left:0; right:0;
	width:100%;
	height:100%;
	object-fit:contain;
	animation: 12s slider infinite ease-in-out;
}

@keyframes slider {
	0%   { top: 100%; }
	5%   { top: 0% }
	33.4%   { top: 0% }
	38.4%   { top: -100% }
	100% { top: -100%;}
}

.bildslider > *:nth-child(1) { animation-delay: 0s }
.bildslider > *:nth-child(2) { animation-delay: 4s }
.bildslider > *:nth-child(3) { animation-delay: 8s }






.weartikelboxgross {background:#fff; border-radius:10px; border:1px solid silver; width:300px; height:600px; margin:10px; display:inline-block; vertical-align: top; float:left;}


.weartikelbox
{
vertical-align: top;
display: inline-block;
margin: 5px;
width: 230px;
height: 200px;
border: 1px solid #ccc;
padding: 10px;
}
	.weartikelbox p
	{
	margin: 15px 0;
	}
	.weartikelbox img
	{
		display: block;
		margin: 0 auto;
	}
	.weartikelbox h4
	{
		display: block;
		height: 30px;
		overflow: hidden;
		text-align: center;
	}
	



















 
  
.abstand {position:relative; width:100vw; height:1vw;}

header {
	z-index:100;
	margin:0 auto; position: sticky; top:0px;
	display:flex; align-items:center; text-align:center;
	box-shadow: 5px 5px 5px rgba(150, 150, 150, 0.9);
	border: thin solid #053571;
	background:#eee;
}

.ueberschrift {  font-family: 'delius','-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'; background:#053571; color:#fff; height:100%; display:flex; justify-content:center; align-items:center; flex-direction: column;}


.headercontent {display:flex; align-items:stretch; justify-content:center; height:auto;}




.spalte {
display:flex;
flex-direction:column;
}

.slantedtop {

   --p: 20px; /* control the shape (can be percentage) */
   clip-path: polygon(0 var(--p),100% 0,100% 100%,0 100%);
  
  border-radius:0px;
  box-sizing:border-box;
  padding:20px;
  background: #eee; color:#053571;
}


.slantedtop a {text-decoration:none; color:#053571;   text-shadow: 2px 2px 10px #999; line-height:1.5; transition:all 2s;}
.slantedtop a:hover, .slantedtop a.sel { margin-left:12px; color:#f2820d;   text-shadow: 1px 1px 1px #000;  transition:all 1s;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~ dropdown-menü ~~~~~~ */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 3px 4px;
  z-index: 1;
  text-align:left;

}

.dropdown-content a:last-child{  border-bottom: 0px solid #ccc;}

.dropdown-content a {text-decoration:none; display:block; color:#053571; white-space: nowrap; hyphens:no;   border-bottom: 1px solid #eee;  text-shadow: 2px 2px 10px #999; line-height:1.1; transition:all 2s; padding:2px;}
.dropdown-content a:hover {text-decoration:none; color:#fff;  background:#f2820d; text-shadow: 1px 1px 1px #000; line-height:1.1; transition:all 0.8s;}
.dropdown-content a.sel { color:#fff; background:#053571;  text-shadow: 1px 1px 1px #000; }




.dropdown:hover .dropdown-content {
  display: block; transition: all 0.5s; height:auto;
}


@media (width < 900px )  {
.dropdown-content {
  position: relative;
  text-align: center;
}
	
}




.square {

  border-radius:1px;
overflow-y: auto;
  box-sizing:border-box;
  background: #f2820d; color:#fff;
  margin: 50px 0px 50px 0px;
    border: 1px solid #aaa;
	padding:8px;
}

.square p {padding:10px;}
.square h2, .square h3 {color:black; padding-left:10px;}
.square a {color:black; background:yellow; transition:all 1s; text-decoration:none; border-radius:6px; padding:0 10px 0 10px; margin-top:5px;}
.square a:hover {color:white; background:#053571; transition:all 1s;}

.slantedbottom {
  --p: 50px; /* control the shape (can be percentage) */

  border-radius:0px;
min-height:200px;

  box-sizing:border-box;
  padding:20px;
  clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--p)));
    background: #888; color:#fff;
	background-repeat: no-repeat;
    background-size: cover;
	background-position: center;
}







.clipwrap {
filter: drop-shadow(0px 4px 4px rgba(250, 250, 250, 0.9));

}


.trapezoid {

}





section {
position:relative;
display:flex;  
}

main {
  background: #eee; color:#053571;
    box-sizing:border-box;
 
  --p: 50px; /* control the shape (can be percentage) */

  clip-path: polygon(100vw var(--p),100vw calc(100vw - var(--p)),0 100vw,0 0);
   clip-path: polygon(0 0,100% 0,100% calc(100% - var(--p)),0 100%);
  background: #eee;
}





main h1, main h2, main p, main h3, main ul {  padding:20px; hyphens:auto;}
figcaption h1, figcaption h2, figcaption p, figcaption h3, figcaption ul {  padding:3px;}
main li {margin-left:30px;}

main img {display:block; width:100%;}
main p  {display:block;}





.unten {
position:relative;
margin-top:40px;
width:100vw;
background:#eee;
height:40px;
box-shadow: 0px -10px 8px silver inset, 0px -10px 10px rgba(50, 50, 50, 0.7);
  display:flex; justify-content:center; align-items:center;
}

footer {
background: #053571;
width:100vw;
min-height:100px;
display:flex;
justify-content:space-around;
align-items:flex-start;

}


/* ~~~~~~~~~~~~~~~~~~~ porstmann-logo ~~~~~~~~~ */
#porstmann2 {
position:absolute;
perspective: 1500;
border-radius:50%; background:#eee;
width:10vw;
height:10vw;
max-width:160px;
max-height:160px;
bottom:-5vw;
  border: thin solid silver;
  box-shadow: 0px 0px 25px rgba(250, 250, 250, 0.7);
  display:flex; justify-content:center; align-items:center;
}

#porstmann {
width:10vw;
height:10vw;
max-width:190px;
max-height:190px;
min-width:80px;
min-height:80px;
  border: thin solid #eee;
  box-shadow: 0px 0px 25px rgba(250, 250, 250, 0.7);
  background:#eee;
  border-radius:50%;
   perspective: 1500; 
   margin: 0 1em;
}

#porstmann:hover .turnaround { 
   transform: rotateY(180deg); 
}

#porstmann .front { 
   background: url(porstmann.svg) 0 0 no-repeat; 
}

#porstmann .back { 
	    border-radius:50%;
background: rgb(35,86,134);
background: radial-gradient(circle, rgba(35,86,134,1) 0%, rgba(26,48,70,1) 100%);
		display:flex; justify-content:center; align-items:center; flex-direction:column;
		color:#e79701;
		

}

#porstmann .back p{ color:#fff; text-align:center;} 




.turnaround {
   transition: .9s;
   transform-style: preserve-3d; 
   position: relative;
   height: 100%;
}

.front,
.back {
   backface-visibility: hidden;
   position: absolute;
   width: 100%;
   height: 100%;

}

.front { z-index: 2; }

.back {
   transform: rotateY(180deg);
   z-index: 1;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~ */


a.spalte { background:#eee; color:#053571; text-decoration:none; height:100%; box-sizing:border-box;}

a.spalte:hover {transition:all 1s; background:#053571; color:#eee;}
a.spalte:hover .materials {transition:all 1s; background:transparent; color:#eee;}



/* ~~~~~~~~~~~ footer-boxen ~~~~~~~~~~~~~~~~~~~ */
.footerboxlinks {
display:flex;
flex-direction:column;
}
.footerboxlinks a, .footerboxrechts a {color:#fff; text-decoration:none; line-height:1.5;}
.footerboxlinks a:hover, .footerboxrechts a:hover {color:#ccc; text-decoration:underline; transition:all 0.7s;}
.footerboxlinks p, .footerboxrechts p {color:#fff; font-size:22px; line-height:1.5; color:#aaa;}

.footerboxrechts {
display:flex;
flex-direction:column;
text-align:right;
}



#datenschutztext,#impressumtext, #disclaimertext, #externtext{
	position:fixed;
	overflow:auto;
	background: rgba(220,220,220,0.6);
	color:#6a312e;
	border-radius:10px;
	border: 1px solid #000055;
	position:fixed;
	top:-20px;
	padding:0px;
	left:50%;
	right:50%;
	width:0%;
	height:0%;
	z-index:100000006;
	transition: all 2.5s;
}

#datenschutztext p,#impressumtext, #disclaimertext, #externtext p{color:#555;}
#datenschutztext h1,#impressumtext, #disclaimertext, #externtext h1{color:#555;}
#datenschutztext h2,#impressumtext, #disclaimertext, #externtext h2{color:#555;}
#datenschutztext a, #impressumtext, #disclaimertext, #externtext a{text-decoration:none; color:#770000;}
#datenschutztext:hover,#impressumtext:hover, #disclaimertext:hover, #externtext:hover{background: rgba(255,255,255,0.95);}

.materialfest {
  font-family: 'Material Symbols Outlined','-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif';
  font-weight: normal;
  font-style: normal;
  font-size: 60px;
  color: #333;
  text-decoraion:none;
  position:sticky;
  top:32px;
  margin-right:10px;
  float:right;
  transition: 2s all; 
}

.materialfest:hover {transition: 2s all; color:rgba(200,200,200,0.5); transform: rotate(360deg);}















/* ~~~~~~~~~~~~~~~~~ Accordionmenü ~~~~~~~~~~~~~~~~~~~~~ */
@layer setupPage, step2styles, markers;

details {
  border-radius: 0.5rem;
  margin: 1rem ;
  transition: 500ms;
}
details[open] {
    padding-bottom: 1em;
}  

summary::before,
summary::after {
    transition: 1000ms;
  }



@layer markers {
  summary {
  position: relative;
}
summary::marker {
  content: none;
}
summary::before,
summary::after {
  content: '';
}
summary::before,
summary::after {
    width: .75em;
    height: 0;
    border-bottom: 2px solid;
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    transform: translateY(-50%);
  }
summary::after {
  transform: rotate(90deg);
  transform-origin: 50% 50%;
}
[open] summary::after {
  transform: rotate(0deg);
}
summary:hover {background:#ddd; transition:all 1s;}
}

/* styles ported over from the second example */
@layer step2styles {
  details {
    border: 1px solid;
    padding: 0 1rem;
    background: white;
  }
  details + details {
    border-top: none;
  }
  details[open] {
      padding-bottom: 1em;
  }  
  summary {
    padding: 1rem 2em 1rem 0;
    font-size: 1.25rem;
    font-weight: bold;
    cursor: pointer;
  }
}





/* ~~~~~~~~~~~ alter Scheiß vom Robin ~~~~~~~~~~~~~~~~~*/


.unterkunftbox
{
margin: 4px 2px;
border: 1px solid #ccc;	
display: inline-block;
width: 300px;
vertical-align: top;
height: 700px;
overflow: hidden;
background:#fff;
transform:all 0.8;
}     
	.unterkunftbild
	{
	height: 230px;	
	}
	.unterkunftbild img
	{
	width: 100%;
  max-height: 230px;	
	}
	.unterkunfthead
	{
	padding: 5px 10px;
	height: 60px;
	}
	.unterkunftbeschreibung
	{
	padding: 0 10px;
	}
	.unterkunftort
	{
	padding: 0 10px;
	color: #900;
	font-size: 16px;
	}
	
.unterkunftbox:hover .unterkunftbild img{transform:all 0.8; scale(1.4);}



/* ~~~~ tab-untermenü ~~~~~~~~ */


#tabmenueunter { 
	position:relative;
	display:block;
	margin: 0 auto; 
	display:block;
	padding:0px;
	z-index:99991;
	min-height:400px;
	width:100%;
}








.tabsunter {
	position: relative;
	display: flex;
}





.tabby-tabunter {
	flex: auto; 
	z-index:1;



}

.tabby-tabunter label {
	display: block;
	position:relative;
	z-index:1;
	padding: 6px;
	text-align: center;
	background: #555;
	color:#fff;
	cursor: pointer;
	transition: background 0.8s ease;
	border:1px solid black;
	border-bottom:0px;

}




.tabby-tabunter label:hover {
	background: #eee;
	color:#003761;
	z-index:10;
}

.tabby-contentunter {
	position: absolute;
	top:30px;
	left:0px;
	right:0px;
	z-index:5;
	padding: 20px;
	box-shadow: 0 0 6px #333;
	border:1px solid black;
	border-radius: 0px 0px 10px 10px;
	background: rgba(235,235,235,1);
	transition: all 1.8s ease;
		overflow:hidden;

		
	/* show/hide */
		opacity: 0;
		scale:1 0;
		transform-origin: top center;
		transition: all 0.8s;;
	
}




/* MAKE IT WORK ----- */
label b {text-decoration:none; font-weight: normal;}
.tabby-tabunter [type=radio] { display: none; }
[type=radio]:checked ~ label {
	background: rgba(235,235,235,1);
	border-bottom:0px;
	color:#000044;
	z-index: 2;

}

[type=radio]:checked ~ label ~ .tabby-contentunter {
	z-index: 1;
	
	/* show/hide */
		opacity: 1;
		scale:1;
		transition: all 3s;;


		overflow-x:hidden;
		overflow-y:auto;
}





.zwischentabunter {width:10px; border-bottom:1px solid black; height: 30px; z-index:3;}

.tabby-contentunter a {text-decoration:none; display:inline-block; padding:8px;  color:#003761; transition: all 1s;}
.tabby-contentunter a:last-child { border-bottom:0px;}
.tabby-contentunter:last-child {margin-right:0px;}








@media(max-width: 900px)
{

.tabby-tabunter label {border-bottom:1px solid black;}
.tabby-tabunter label b{padding:1px; font-size:15px;}	
.tabsunter {flex-direction:column;}
.tabby-contentunter {position:relative; border-top:0px; top:0px; margin:0; padding:0px; width:100%; height:0px; box-sizing:border-box;}
[type=radio]:checked ~ label ~ .tabby-contentunter {   height:auto; font-size:14px; padding:10px;}
.zwischentabunter {display:block; height:5px; border:0px;}
}


/* section figure image figcaption = Bildunterschrift*/
		section.caption {width:100%; margin-left:0vw; margin-right:0vw;}
		section.caption figure.image
		{
		display: flex;
		flex-direction:column;			
		justify-content : center;
		align-items : center;
		overflow:hidden;
		margin:10px;
		text-align:left;
		width: 300px;
		height: 300px;
		text-decoration:none;
		position: relative;
		transition: 0.8s all;
		border: 1px solid #ccc;
		border-radius: 10px;
			background: rgba(5,53,113,0.05);
		}
	section.caption figure.image img
		{
		object-fit:cover;
max-height:260px;
		mix-blend-mode: darken;
		transition: 1.5s all;
		overflow:hidden;
		}
	section.caption figure.image:hover
		{
		border: 1px solid #000;
		background: #ccc;
		transition: 0.8s all;
		}
	section.caption figure.image:hover img
		{
				transform: scale(1.3);
		transition: 1.5s all;
		overflow:hidden;
		}
	section.caption figure.image:hover figcaption
		{
		background:#ccc;
		transition: 1.5s all;
		transform: scale(1.3);

		}
section.caption figure.image figcaption {text-align:center; hyphens:auto; z-index:3; text-shadow: #fff 1px 0 10px; color:#333377; font-size:20px; transition: 1.5s all;}

section.caption {display:flex; justify-content:center; align-content:space-around; align-items:flex-start; flex-wrap:wrap; }

@media (width < 800px )
{
		section.caption {width:100vw; flex-direction:row;}
	section.caption figure.image { width:calc(50vw - 30px); height:250px;}
	section.caption figure.image img {max-height:200px; width:100%;}
section.caption figure.image figcaption {font-size:16px;}
}