@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  src: url('Sora-Regular.ttf') format('truetype');

} 






#tabmenue { 
	margin: 0 auto; 
	padding:0px;
	background: transparent;
	top:0px;
	margin-top:0px;
	z-index:99991;
	height:30px;
	transition: all 1s;

	/*box-shadow: rgba(0, 0, 0, 0.44) 0px 10px 10px;	*/
	}



.tabs {


}

@media(min-width: 901px)
{
	.tabs {	 	display: flex; flex-wrap:wrap; align-items:center; justify-content:center;}
	#tabmenue {	position:sticky;}
	.tabby-tab {font-family: Arial; font-size:clamp(14px, 1.4vw, 16px); }
}

@media(max-width: 900px)
{
		.tabby-tab { font-family: Arial; font-size:clamp(14px, 1.5vw, 18px); }
}




.tabby-tab {

	flex-flow: row wrap; 
margin:0 50px 0 5px;


}







.tabby-tab label {

	display: flex;

	justify-content: center;
	align-items: center;
	position:relative;
	padding: 1px 5px 1px 5px;
	cursor: pointer;
		color:#eee;
		text-decoration:none;

}

.tabby-tab a {
	


	display: flex;
	justify-content: center;
	align-items: center;
	color:#eee;
	padding: 1px 5px 1px 5px;
	 /*margin:0 14px 0 14px;*/
		text-decoration:none;

}


.tabby-tab label:hover, .tabby-tab a:hover {


	text-shadow: #333 1px 2px 4px; color:#eeee00; transition:all 1s;
}

.tabby-content {

display: inline-block;
	max-width:500px;
	min-width:150px;
	position: absolute;

	margin-left:0px;
	max-height:calc(100vh - 100px);
	overflow-y:auto;
z-index:99998;
	padding-top:4px; padding-right:20px; padding-bottom:20px; padding-left:0px;
	


	/*background: rgba(220,220,220,0.9);*/
		opacity: 0;
		scale:1 0;
		transform-origin: top center;
		transition: all 0.8s;
	
}

.tabby-content img {
	float: left;
	margin-right: 20px;
	border-radius: 8px;
	mix-blend-mode:darken;
}


/* MAKE IT WORK ----- */
label {text-decoration:none; font-weight: normal;}
.tabby-tab [type=radio] { display: none; }
[type=radio]:checked ~ label {
		/*background: rgba(220,220,220,0.9);*/
	color:#eee;
	text-shadow: #fff 1px 2px 4px;


}

[type=radio]:checked ~ label ~ .tabby-content {

	
	/* show/hide */
		opacity: 1;
		scale:1;
		transition: all 1.2s;;

display: inline-block; max-width:500px;

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



.tabzu {position:absolute; bottom:0px; right:0px; z-index:99999; cursor:pointer;  padding: 0px; mix-blend-mode: darken !important;}
.tabzu label {border-radius:50%;  height:24px; z-index:99999;}
.tabzu label:hover {z-index:99999;}
/* label[for="tab-zu9"] {width:100%; border-radius:0px; } */



.zwischentab {width:10px; border-bottom:1px solid black; height: 39px; }

.tabsymbol{border: 1px solid black; border-radius:20px; height:20px; width:20px;  background:orange; display:block; margin-right:7px; margin-bottom:-3px;}
.tabby-content a {	background:#b3987a; border: 1px solid #814c35; text-decoration:none; display:block; padding:3px; height:auto; margin-bottom:2px; border-bottom: 1px solid black; color:#eee; transition: all 1s;  text-shadow: #222 1px 2px 4px; }
.tabby-content a:hover {background:#111; color:#eee; justify-content:flex-end; transition: all 2s;}
.tabby-content a:last-child { border-bottom: 1px solid transparent;}

.lastchild {right:12px;}

#unteraktuell {background:#814c35; color:#fff; text-shadow: #000 1px 2px 4px;}
#oberaktuell {	background:#814c35; color:#fff; text-shadow: #000 1px 2px 4px;}



	#tabmenue {display:block; z-index:999999999999999999;}


nav.hauptnavi
{
display:block;	
margin: 5px 0 0 0;
height:50px;
background: #B3987A;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
text-align: center;     

}




@media(max-width: 900px)
{

nav.hauptnavi{background:none;}
		.tabby-tab a,.tabby-tab label {		border:1px solid black;	background-color: rgba(179,152,122,1);}
		.tabby-content a {margin-top:2px;}

		.tabs {display:block; width:90vw; }
		.tabby-content {top:auto; max-height:calc(90vh - 100px);}

		.lastchild {top:0px; left:12px; }
/*
.tabby-content img {mix-blend-mode: unset;}
label[for="tab-9"] {position:fixed; top: 4px; right:10px;}
.tabs {flex-direction:column;}
.tabby-content {position:relative; top:0px; margin:0; padding:0px; width:calc(100vw - 20px); height:0px; box-sizing:border-box;}
[type=radio]:checked ~ label ~ .tabby-content {   height:auto; font-size:13px;}
*/
}




/* ~~~~~~~~~~~~~~~ Hamburger - Menü ~~~~~~~ */


@media (width >= 900px) {
	#hamburger, #hamburgerback {display:none;}
	
	nav.hauptnavi {position:sticky; top:10px; z-index:1110; display:flex; justify-content:center; align-items:center; transition: all 1s;}

	
	
	
}

@media (width < 900px )  {
nav.hauptnavi {  position: fixed; width:95vw; top:102px; right:-100vw; transition: all 2s; flex-direction:column; display:flex; align-items:stretch; justify-content:center; height:auto; z-index:9999999;}
nav.hauptnavi a {color:#eee; text-decoration:none; margin: 0 14px 0 14px; transition:all 1s; padding:1px; margin:2px 0 2px 0; border:1px solid black;}
nav.hauptnavi a:hover {color:#fff; transition:all 1s; background:#333;}


#hamburgerback {
	position:fixed; top:50px; right:6px; width:40px; height:40px; overflow:hidden; z-index:10; background:#814c35;border: thin solid white;
}

#hamburger {

	margin:55px -8px 0 0;
  --s: 30px; /* control the size */
  --c: #fff; /* the color */

  z-index:101;
  height: var(--s);
  width:30px;
  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% 81%,
    41% 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 + nav.hauptnavi {
  transition: all 1s; top:142px; right:0vw;
}


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




}


/* ~~~~~ menü ~~~~~~~~ */





.menue{

	    box-sizing: border-box;
		    text-decoration: none;
    list-style: none;
    width: 280px;
    height: auto;
	position:sticky; top:10px;
	max-height:calc(100vh - 30px);
    border-radius: 4px;
    overflow-y: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	    
}


.menue a{display:block; border-bottom: solid 1px #232323; padding:3px; text-decoration:none; background:#fff; color:#814c35; transition:all 1s;}
.menue a:last-child{display:block; border-bottom: solid 0px #232323; padding:3px; }
.menue a:hover {transition:all 1s; background:#aaa; color:#fff; }
.menue a.aktu {color:#fff; background:#814c35;}