@charset "UTF-8";
:root { --theme:'teasernav';
	
/* colors and text/alink */
 --tnav-ani: .4s;
  --tnav-w: var(--w, #fff);
 --tnav-g-ltestt: var(--g-ltestt, #efefef);
 --tnav-g-ltest: var(--g-ltest, #e4e4e4);
 --tnav-c: var(--c, #2b6f98);
 --tnav-c-dk: var(--c-dk, #296589);
 --tnav-c-dkest: var(--c-dkest, #202020);
 --tnav-txt-bg-c: var(--w, #fff);
 --tnav-txt-bg-c-alink: var(--w, #fff);
 --tnav-txt-bg-c-ahover: var(--g-ltestt, #efefef);
 --h123: var(--w, #fff);
 --h456: var(--g-ltestt, #efefef);
}
.tnav-bg-c {
	background: var(--tnav-c)
}
.tnav-bg-c-dk {
	background: var(--tnav-c-dk)
}
.tnav-bg-c-dker {
	background: var(--tnav-c-dker)
}
.tnav-bg-c-dkest {
	background: var(--tnav-c-dkest)
}
.tnav-txt-bg-c {
	color: var(--tnav-txt-bg-c)!important
}
.tnav-txt-bg-c a {
	color: var(--tnav-txt-bg-c-alink)!important
}
.tnav-txt-bg-c :is(a:hover, a.aktiv, a.aktiv:hover) {
	color: var(--tnav-txt-bg-c-ahover)!important
}
.tnav-txt-bg-c :is(h1, h2, h3, h4, h5, h6) {
	color: var(--tnav-txt-bg-c)!important;
	font-weight: normal;
}

.teaser-navi {
	position:relative;
	display:inline-flex;
	width: auto;
	max-width: 100%;
	z-index: 3;
	min-width: 16rem;
}
.teaser-navi.tnav-right {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0;
	padding: 0;
}
.teaser-navi.tnav-right:before {
	content: "" / "";
	speak: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 11px;
	height: 0;
	border-left: 11px dashed transparent;
	border-top: 11px solid var(--tnav-c-dkest);
	box-shadow: -2px 2px 4px rgba(0,0,0,.3);
	z-index: 3;
}
.teaser-navi .tnav-btn {
	position: relative;
	width: auto;
	flex: 1 1 auto;
	height: 2rem;
	line-height: 2rem;
	font-size:.9rem;
	padding: 0 2rem 0 .8rem;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
	cursor: pointer;
	z-index:3;
}
.teaser-navi .tnav-btn:focus-visible {
	outline-offset: -3px; 
}
.teaser-navi .tnav-btn ~ .tnav-btn:before {
	content: "\2758" / "";
	speak: none;
	position: absolute;
	left: 0;
}
.tnav-btn:after {
	content: '\25bc' / "";
	speak: none;
	position: absolute;
	right: .5rem;
	top: 50%;
	transform: translateY(-50%);
	transition: transform .2s ease-out;
}
.tnav-btn.handleTnavBtn:after {
	content: '\25bc' / "";
	speak: none;
	transform: translateY(-50%) rotate(180deg);
}
.tnav-btn > .tnav-header {
	height: 100%;
	font-size:1.05rem;
}
.teaser-navi .tnav-content-header {
	font-size: 1.2rem;
}
.teaser-navi .tnav-tab {
	position:absolute;
	top:100%;
	right:0;
	width: 100%;
	max-width: 100%;
	display:grid; 
	grid-template-rows: 0fr; 
	overflow:hidden; 
	visibility: hidden;
	opacity:0;
	transition: grid-template-rows var(--tnav-ani) ease-out, opacity var(--tnav-ani) ease-out, visibility var(--tnav-ani) ease-out;
}
.teaser-navi .tnav-tab-content {
	min-height:0;
	padding: 0 1rem 0 1rem;
	transition: padding var(--tnav-ani) ease-out;
}
.teaser-navi .tnav-tab-content p:last-child {
	margin:0;
}
.teaser-navi .tnav-btn.handleTnavBtn+.tnav-tab {
	grid-template-rows: 1fr;
	visibility: visible;
	opacity:1;
}
.teaser-navi .tnav-btn.handleTnavBtn+.tnav-tab>.tnav-tab-content {
	padding: 1.2rem 1rem .5rem 1rem;
}
@media screen and (min-width:768px) {
.teaser-navi.tnav-right {
	top: -15px;
	right: 12px;
}
.teaser-navi.tnav-right:before {
	border-top: 0;
	border-left: 0;
	box-shadow: 0 0 0
}
.teaser-navi.tnav-right:after {
	border-bottom: 15px solid var(--tnav-c-dkest);
}
.teaser-navi.tnav-right:after {
	content: "" / "";
	speak: none;
	border-right: 12px dashed transparent;
	position: absolute;
	right: -12px;
	top: 0;
	width: 12px
}
}