.headermeldung{
	width:100%;
	display: flex;
	flex-direction: column;
	gap:5px;
	margin-bottom: 50px;
}

.desktop-break {
    display: inline;
  }

.headerbar{
	width: 100%; 
	background: var(--tb-bg);
	position: fixed;
	top: 0;
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
	z-index: 10;
	border-bottom: 1px solid var(--tb-hl1);
}


.headermenu{
	display: flex;
	flex-direction:column;
	width: 20%;
    box-sizing: border-box;
 	position: sticky;
    height: 100vh;
    min-width: 300px;
	gap: 5px;
	margin-left: 5px;
	margin-right:5px
}

.headermenuwrap, .headermenudrop input{
display: none;
}

.headermenudrop label {
  position: relative;
  display: block;
  cursor: pointer;
	position: sticky;
    display: block;
    cursor: pointer;
    z-index: 9;
    color: var(--tb-hl1);
    writing-mode: sideways-lr;
    padding: 5px;
	font-size: 13px;
	background: var(--tb-bg);
}

/*show the submenu when input is checked*/
.headermenudrop input:checked~.headermenuwrap {
  display: block;
}


.headermenudrop{
    z-index: 9;
    display: flex;
    height: 100vh;
    /* padding-top: 100px; */
    /* writing-mode: sideways-lr; */
    flex-direction: row;
    position: sticky;
    top: 0PX;
}


.headermenutop{
	height: 42%;
	box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 38px;
    background-color: var(--tb-hl1);
}

.headeravatardiv{
	box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: var(--tb-bg);
}


.headeravatarwrap{
    outline: 1px solid var(--tb-hl1);
}

.headeravatar{
    height: 32.50270855904659vh;
	max-height: 350px;
    filter: grayscale(1);
}

.headeravatar:hover{
	filter: grayscale(0);
	 -webkit-transition: all 1s ease;
  	transition: all 1s ease;
}

.headermenubottom{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
	height: 54%;
    gap: 5px;
    line-height: 1.8em;
}

.bottombreak{
	display:flex;
	flex-direction: column;
	gap:5px;
}

.headermenubottomtab{
	padding: 20px;
	background: var(--tb-bg);
}
	
.welcomewrap {
	width: 100%; 
	box-sizing:border-box; 
	display:flex; 
	flex-direction:row;     
	justify-content: flex-start; 
	align-items: center;
	gap: 10px;
	color: var(--tb-txt);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.welcomewrap1 {
	width: 100%; 
	box-sizing:border-box; 
	display:flex; 
	flex-direction:row;     
	justify-content: flex-start; 
	align-items: center;
	gap: 10px;
	color: var(--tb-txt);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}


.welcomewrap a:link,
.welcomewrap a:visited{
	color: var(--tb-txt);
	text-decoration: none;}

.welcomewrap a:hover,
.welcomewrap a:active {
	color: var(--tb-hl1);
	text-decoration: none;
	-webkit-transition: all 1s ease;
  	transition: all 1s ease;
}

.welcomedivider {border-top: 1px solid var(--tb-txt2); flex:1}

.headerwrap{width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    gap: 20px;
	margin-bottom: 75px;
	background: var(--tb-bg);
}

.headerleft{
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    gap: 10px;
    color: var(--tb-txt);
    font-size: 13px;
    text-transform: uppercase;
    width: 100%;
    border-bottom: 1px solid var(--tb-hl1);
    flex-wrap: wrap;
}

.headerdivider{border-top: 1px solid var(--tb-txt2); flex:1}

.headerleftbar1{
	background: var(--tb-hl1);
    width: 100%;
    height: 40px;
    background-size: cover;
    background-position: center;
}


.headerright{
    width: 25%;
    box-sizing: border-box;
}

.headerpic{
    height: 25px;
}