/*
	kszw.css  Definitions for kampfsportzentrum winterthur

	source_date = "2024-07-24T12:25:47.000Z"
	file_version = 351;

*/

@import url(../fonts/aptos/aptos.css); /* font declaration for pixelarity solid state template 

@font-face {
    font-family: 'Aptos Web';
    src: url('../fonts/aptos/aptos-light.ttf') format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Aptos Web';
    src: url('../fonts/aptos/aptos-light-talic.woff') format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
} /* */


:root {
	/* colors from Corporate_Design_KSZW_Stand_25.02.2024.pdf*/
	--lions-red: #BE1E2D;
	--lions-red-light-1: #cb3442;
	--lions-red-light-2: #d84553;
	--lions-red-light-3: #df5663;
	--sehr-black: #000000;
	--fifty-shades-of-grey: #595959;
	--background-grey-20: hsl(0deg 1.1% 17.84%);
	--header-grey: hsl(330deg 2% 20% / 90%);
	--white-sheets: #FFFFFF;


	--header-background: #BE1E2DDD; /* transparent red */
	––heading-font: Aptos, 'Aptos Display', 'Aptos Web', Calibri, Helvetica, sans-serif;
	--body-font: Aptos, 'Aptos Web', Calibri, Helvetica, sans-serif;
	--font-color: hsl(0 14% 93% / 1);

	/* url("data:image/svg+xml;utf8, ... "); */ 
	--icon-add: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white'><path d='M417-417H166v-126h251v-251h126v251h251v126H543v251H417v-251Z'/></svg>");;
	--icon-external-link: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' id='external'><g fill='none' fill-rule='evenodd' stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='M16 11v6a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6M13 1h6v6M8 12 19 1'></path></g></svg>");
	--icon-dot: url("data:image/svg+xml;utf8,<svg height='800px' width='800px' version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 31.955 31.955' xml:space='preserve'><g><path style='fill:black;' d='M27.25,4.655C20.996-1.571,10.88-1.546,4.656,4.706C-1.571,10.96-1.548,21.076,4.705,27.3 c6.256,6.226,16.374,6.203,22.597-0.051C33.526,20.995,33.505,10.878,27.25,4.655z'/><path style='fill:black;' d='M13.288,23.896l-1.768,5.207c2.567,0.829,5.331,0.886,7.926,0.17l-0.665-5.416 C17.01,24.487,15.067,24.5,13.288,23.896z M8.12,13.122l-5.645-0.859c-0.741,2.666-0.666,5.514,0.225,8.143l5.491-1.375 C7.452,17.138,7.426,15.029,8.12,13.122z M28.763,11.333l-4.965,1.675c0.798,2.106,0.716,4.468-0.247,6.522l5.351,0.672 C29.827,17.319,29.78,14.193,28.763,11.333z M11.394,2.883l1.018,5.528c2.027-0.954,4.356-1.05,6.442-0.288l1.583-5.137 C17.523,1.94,14.328,1.906,11.394,2.883z'/><circle style='fill:%2000000;' cx='15.979' cy='15.977' r='6.117'/></g></svg>");
	--icon-calendar: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23FFFFFF'><path d='M657-31v-120H537v-126h120v-120h126v120h120v126H783v120H657Zm-445-95q-53 0-89.5-36.5T86-252v-456q0-53 36.5-89.5T212-834h28v-80h103v80h194v-80h103v80h28q53 0 89.5 36.5T794-708v241q-32-9-63-9.5t-63 4.5v-88H212v308h247q-4 32-1 63t14 63H212Zm0-514h456v-68H212v68Zm0 0v-68 68Z'/></svg>");
	--icon-star-empty: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='red'><path d='m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm247-350Z'/></svg>");
	--icon-star-filled: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='red'><path d='m233-120 65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Z'/></svg>");
	--icon-filter: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='white'><path d='M440-126q-30 0-52-22t-22-52v-228L142-716q-29-37-9-77.5t67-40.5h560q47 0 67 40.5t-9 77.5L594-428v239q0 27-18 45t-45 18h-91Zm40-362 172-220H308l172 220Zm0 0Z'/></svg>");
}

p, small, strike, strong, sub, sup, b, u, i, dl, dt, dd, ol, ul, li, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    letter-spacing: 0.015em;
}
body {
	background-color: var(--sehr-black);
	/* background-image: 
		linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
		url(images/bg.jpg); */
	background-image: none;
}
body.is-menu-visible #menu {
	margin-top: 0;
}
#menu .inner {
    background: var(--header-background);
}
body, input, select, textarea {
    color: var(--font-color);
}
p {
	margin: 2em 0 0 0;
}
strong, b {
    color: #ffffff;
    font-weight: 700;
}
/*a[href^="http"]:not(:has(img)):before {*/
/*    content: "link";*/
/*}*/
hr {
	border-color: var(--lions-red-light-3);
}
hr.wrapper {
	/* reset the extensive default for .wrapper defined in pixelarity solid state */
	margin: 2.5em 0;
}
hr.wrapper:before,
hr.wrapper:after {
	/* remove .wrapper extras defined in pixelarity solid state */
	content: none;
}

hr.wrapper + hr.wrapper {
    margin-top: calc(-2.5em + 3px);
}
table {
	margin-top: 2em;
}
table thead tr,
table tbody tr {
	border: solid 2px rgb(255 0 0 / 62%);
	border-left: 0;
	border-right: 0;
}
table th {
    padding-top: 0.75em;
    background-color: #be1e2d91;
}
th[style="text-align:left;"]:first-child,
td[style="text-align:left;"]:first-child {
	padding-left: 0em;
}
th[style="text-align:right;"]:last-child,
td[style="text-align:right;"]:last-child {
	padding-right: 0em;
}
main a:link {
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
}
main a:not(.special):not(.image):hover {
    background-color: var(--lions-red-light-2);
    text-decoration: none;
}
main a.external:not(.special):not(.image):hover {
    /* span athe red bar across following text*/ 
	padding-right: 1.2em;
    margin-right: -1.2em;
}
main a.external-link:not(:has(img)):after {
	/* had a hard time to overlap following text but keep height of the red bar. Now the element receives a negative margin-right. */
	content: 'X';
	color: transparent;
/*    display: inline-block;*/
    position: absolute;
    width: 1.2em;
    height: 1.2em;
    /* margin-left: 0.25em; */
    margin-top: 0.25em;
    background-image: var(--icon-external-link);
    background-repeat: no-repeat;
    background-position: 0.25em 0.25em;
    background-size: 0.7em;
	background-color: var(--lions-red);
	opacity: 0;
	transition: opacity 0 ease-in-out, background-color 0.2s ease-in-out;
}
main a.external-link:not(:has(img)):hover:after {
	opacity: 1;
	background-color: var(--lions-red-light-2);
	transition: opacity 0.2s 0.1s ease-in-out, background-color 0.2s ease-in-out;
}
main img {
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}
p > strong:first-child:last-child > a:first-child:last-child:link {
    display: inline-block;
    height: 3em;
    line-height: 3em;
    padding: 0 2em;
    border: none;
    background-color: var(--lions-red);
    transition: filter 0.5s 0.1s ease-out;
    border-radius: 0.3em;§
}
p > strong:first-child:last-child > a:first-child:last-child:link:hover {
	filter: brightness(1.1);
	transition: filter 0s;
}
ul li {
    padding-left: 0em; 
}
li > code:first-child {
    margin-left: 0;
}

body, input, select, textarea, 
#wrapper > header p {
	font-family: var(--body-font);
/*	font-family: Aptos, 'Aptos Web';*/
}
h1, h2, h3, h4, h5, h6 {
	margin: 2em 0 0 0;
	font-family: var(--heading-font);
	font-weight: 800;
	color: var(--font-color);
}
main:not(#home) h1.major, 
main:not(#home) h2.major, 
main:not(#home) h3.major, 
main:not(#home) h4.major, 
main:not(#home) h5.major, 
main:not(#home) h6.major {
    padding: none;
    padding-top: 2em;
    border: none;
    border-top: solid 3px rgba(255, 0, 0, 0.5);
    margin-top: 6em;
}
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
    background-color: var(--lions-red);
}
/* features article */
/* in solid state, articles are 2-row by default, like section.features.row article.col-6 */
.features article {
	padding: 0.1em 1.75em 1.75em 1.75em;
	margin-top: 2em !important;
}
.features article h2,
.features article h3
 {
	margin-bottom: -1em;
}
.features article h2 + ul,
.features article h3 + ul {
	margin-top: 1.5m;
}
.features article p, 
.features article button
 {
	font-size: 0.9em;
}
.features article.red {
	background-color: var(--header-background);
}
.features article h1, 
.features article h2, 
.features article h3 {
/*	margin-top: 0;*/
}
#home .spotlight h2 {
	border-width: 3px;
	border-color: rgb(221 188 195);
}
h2 { font-size: 1.2em; }
h3 { font-size: 0.9em; }
h4 { font-size: 0.7em; }
h5 { font-size: 0.7em; }
h6 { font-size: 0.7em; }

@media screen and (max-width: 736px) {
	h2 { font-size: 1.0em; }
	h3 { font-size: 0.8em; }
}

.hide {display: none;}
@media screen and (max-width:  480px) { .hide-below-xxsmall { display: none; } }
@media screen and (max-width:  568px) { .hide-below-xsmall  { display: none; } }
@media screen and (max-width:  736px) { .hide-below-small   { display: none; } }
@media screen and (max-width:  980px) { .hide-below-medium  { display: none; } }
@media screen and (max-width: 1280px) { .hide-below-large   { display: none; } }
@media screen and (max-width: 1680px) { .hide-below-xlarge  { display: none; } }

@media screen and (min-width:  480px) { .hide-above-xsmall  { display: none; } }
@media screen and (min-width:  568px) { .hide-above-small   { display: none; } }
@media screen and (min-width:  736px) { .hide-above-medium  { display: none; } }
@media screen and (min-width:  980px) { .hide-above-large   { display: none; } }
@media screen and (min-width: 1280px) { .hide-above-xlarge  { display: none; } }

#header {
	background-color: var(--header-background);
}
#header h1 {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
}
#header h1:before {
	content: "lion";
	color: transparent;
	display: inline-block;
	width: 3.5em;
	background-image: url(images/lion.svg);
	background-position: center;
	background-repeat: no-repeat;
	margin-right: 0.25em;
}
#header h1:hover:before {
	background-image: url(../../assets/img/wir%202-final-01.svg);
}
/*@media screen and (max-width: 736px) {
	#header h1 span {
		display: none;
	}
}*/
#header #schedule, 
#header nav a[href="#menu"] {
	font-size: 0.9rem;
    box-shadow: inset 0 0 0 2px transparent;
    border-radius: 5px;
}
#header nav a:first-child {
/*	margin-right: -1em;*/
	background-color: var(--sehr-black);
}
#header #schedule:hover, 
#header nav a[href="#menu"]:hover {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.125);
    background-color: var(--lions-red-light-1);
}
#header #schedule {
}
#header #schedule:before {
	content: "#";
	color: transparent;
	display: inline-block;
	width: 1.4em;
	background-image: var(--icon-calendar);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transform: translateX(0.25em);
}
#menu .inner {
	min-width: 18em;
	max-width: 90vw;
    width: auto;
    padding-top: 0;
}
@media screen and (max-width: 568px) {
	#header #schedule {
		display: inline-grid;
		width: 3em;
		color: transparent;
		overflow: hidden;
		background-color: transparent;
        margin-right: -0.5em;

	}
	#header #schedule:before {
		float: left;
		transform: translateX(-1em);
	}
}
#menu h1 {
 margin-top: 0.75em;
}


/* Backend / No Page Header */
	main#generic.backend #wrapper header {
		padding-top: 5em;
		padding-bottom: 5em;
	}
	main#generic.backend #wrapper header h2 {
		font-size: 1.7em;
	}
	main#generic.backend #wrapper header p {
		margin-bottom: -1em;
	}
	main#generic.backend:has(#main .no-pageheader) .wrapper:nth-child(3) {
		margin-top: 0;
	}
	main#generic.backend:has(#main .no-pageheader) > #wrapper header,
	main#generic.backend:has(#main .no-pageheader) .wrapper:nth-child(3):before {
		display: none;
	}


/* banner  ================================================== */

#generic #banner {
	/* generic pages: hide banner (visible on home template only) */
	display: none;
}
#home #wrapper header {
	/* home page: hide header (visible on generic pages only) */
	display: none;
}
#banner {
	--margin-left: 17vw;
}
#banner .inner {
/*	height: 20em;*/
    height: 15vw;
    width: 65em;
}
#banner .logo {
	width: 20vw;
	float: left;
	margin-left: -6vw;
    margin-top: -2vw;
}
#banner h2 {
	margin-left: var(--margin-left);
    margin-top: 1em;
    padding-top: 0.3em;

	border-bottom: solid 5px var(--lions-red);
}
#banner p {
	margin-left: var(--margin-left);
    font-size: 1.3em;
    margin-top: 0;
}
@media screen and (max-width: 1280px) {
	#banner {
		background-color: var(--sehr-black);
		background-image: none;
		--margin-left: 20vw;
	}
	#banner .inner {
    	width: 60em;
	}
	#banner .logo {
    	margin-left: -2vw;
	}
	#banner h2 {
		font-size: 2.15em;
	}
}
#home section.spotlight .inner :not(.content) :not(.image) {
    margin-top: 1em;
}
#home section.spotlight .content h2 {
	margin-top: 0;
}
#home section.spotlight a.image:before {
    content: "⚫︎";
    color: transparent;
    display: block; 
    position: absolute;
	height: 100%;
    height: -moz-available;          /* WebKit-based browsers will ignore this. */
    height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    height: fill-available;
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    /* height: 100%; */
    background-image: var(--icon-dot);
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#home section.spotlight a.image {
	margin-bottom: 0;
}
#home section.spotlight a.image img {
	position: relative;
    z-index: 2;
}
#home section.spotlight:has(#krav_maga) .image,
#home section.spotlight:has(#fitness) .image,
#home section.spotlight:has(#kampf) .image {
	overflow: visible;
}
#home section.spotlight:has(#krav_maga) a.image img,
#home section.spotlight:has(#fitness) a.image img,
#home section.spotlight:has(#kampf) a.image img {
    transform: translateY(-1.1em) scale(1.15);
}
#home section.spotlight:hover a.special:before, 
a.special:not(.button):hover:before {
	background-color: #ffffff;
    border-color: rgb(255 255 255 / 35%);
	color: var(--lions-red-light-3);
}
.wrapper.spotlight.style1:before {
    box-shadow: inset 0 -1px 0 0 #b65555, 0 2px 0 0 #b65555;
}
.wrapper.spotlight.style2:before {
    box-shadow: inset 0 -1px 0 0 #b24a4a, 0 2px 0 0 #b24a4a;
}
.wrapper.spotlight.style3:before {
    box-shadow: inset 0 -1px 0 0 #a94343, 0 2px 0 0 #a94343;
}

main header h1, 
main header h2 {
	line-height: 1.2em;
}
.wrapper {
	background-color: var(--background-grey-20);
}
.wrapper:before, 
.wrapper:after {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:hsl(0deg 1.1% 17.84%)%3B' /%3E%3C/svg%3E");
}
.wrapper:before {
    box-shadow: inset 0 -1px 0 0 var(--background-grey-20), 0 1px 0 0 var(--background-grey-20);
}
.wrapper:after {
    box-shadow: inset 0 -1px 1px 0 var(--background-grey-20), 0 1px 0 0 var(--background-grey-20);
}

.wrapper .inner {
    padding: 1em 0 0em 0;
}
	@media screen and (max-width: 980px) {
	    .wrapper .inner {
	        padding: 1em 2em 3em 2em;
	        width: 100%;
	    }
	}

@media screen and (max-width: 736px) {
	#wrapper {
		
	}
}

@media screen and (max-width: 1280px) {
    #wrapper > header, 
    #footer {
    	background-color: transparent;
    	background-image: none;
    }
}
#wrapper > header h2 {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0.5em;
	margin-top: 2em;
	letter-spacing: 0.15em;
}
#wrapper > header p {
	line-height: 1.5em;
	margin-bottom: 6em;
	letter-spacing: 0.15em;
}
.wrapper.spotlight {
    margin-top: -1px; /* remove grey gap */
    cursor: pointer;
}
.wrapper .spotlight:before {
	margin-top: -1px;
}
.wrapper .spotlight:after {
	margin-bottom: 1px;
}
#menu {
	background: rgb(9 7 7 / 80%);
}

.content-hidden-until-rendered  > main {
	display: none !important;
}

.box {
	margin-top: 2em;
	margin-bottom: 0em;
}

#generic header .inner:has(.lion),
#generic header .inner:has(.boxing),
#generic header .inner:has(.kravmaga),
#generic header .inner:has(.bjj) {
    text-align: center;
    padding: 0em 5em;
}
.kampfsport header  {
	--lion-position: 55%;
	--lion-position-inverted: calc( -1 * var(--lion-position) );
	--lion-max-height: 30em;
	min-height: 20em;
}
.kampfsport header:before,
.kampfsport header:after {
	content: "image";
	display: none;
	pointer-events: none;
	position: fixed;
	color: transparent;
	top: 3.3em;
	left: 0;
    width: 100vw;
	height: min(calc(100vh - 4em), var(--lion-max-height));
	transform: translateX( var(--lion-position-inverted) );
	overflow: visible;
    z-index: -1;
	background-image: url(images/bg-lion-generic.svg);
	background-repeat: no-repeat;
	background-position: center 1em;
/*	background-color: red;*/
}
.kampfsport header:after {
	transform: translateX(var(--lion-position));
}
.kampfsport header:has(.lion) {
	--lion-position: 57%;
    --lion-max-height: 25em;
	--lion-position-inverted: calc( -1 * var(--lion-position) );
}
.kampfsport header:has(.lion):before,
.kampfsport header:has(.lion):after {
	display: block;
	background-image: url(images/bg-lion-generic.svg);
}
.kampfsport header:has(.boxing):before,
.kampfsport header:has(.boxing):after {
	display: block;
	--lion-position: 47%;
	--lion-position-inverted: calc( -1 * var(--lion-position) );
	background-image: url(images/bg-lion-boxing.svg);
}
.kampfsport header:has(.kravmaga):before,
.kampfsport header:has(.kravmaga):after {
	display: block;
	--lion-position: 47%;
	--lion-position-inverted: calc( -1 * var(--lion-position) );
	background-image: url(images/bg-lion-kravmaga.svg);
}
.kampfsport header:has(.bjj):before,
.kampfsport header:has(.bjj):after {
	display: block;
	--lion-position: 47%;
	--lion-position-inverted: calc( -1 * var(--lion-position) );
	background-image: url(images/bg-lion-bjj.svg);
}
.kampfsport:has(header .lion) + #footer .inner,
.kampfsport:has(header .boxing) + #footer .inner,
.kampfsport:has(header .kravmaga) + #footer .inner,
.kampfsport:has(header .bjj) + #footer .inner {
    padding: 3em 7vw 3em 7vw;
}
.kampfsport:has(header .lion) + #footer .inner h2,
.kampfsport:has(header .lion) + #footer .inner p,
.kampfsport:has(header .boxing) + #footer .inner h2,
.kampfsport:has(header .boxing) + #footer .inner p,
.kampfsport:has(header .kravmaga) + #footer .inner h2,
.kampfsport:has(header .kravmaga) + #footer .inner p,
.kampfsport:has(header .bjj) + #footer .inner h2,
.kampfsport:has(header .bjj) + #footer .inner p  {
    text-align: center;
}

@media screen and (max-width: 736px) {
	#wrapper > header h2 {
		margin-top: 0em;
	}
	.kampfsport header  {
		--lion-max-height: 15em;
	}
	#generic header .inner:has(.boxing),
	#generic header .inner:has(.kravmaga),
	#generic header .inner:has(.bjj) {
/*		height: min(calc(100vh - 4em), 15em);*/
		--lion-position: 50%;
	}
	.kampfsport header:has(.lion) {
		--lion-position: 68%;
	    --lion-max-height: 25em;
		--lion-position-inverted: calc( -1 * var(--lion-position) );
	}
}


@media screen and (max-width: 736px) {
	main header .inner {
		padding: 0em 1em;
	}
	main.kampfsport header .inner {
		padding: 0em 2em;
	}
}
#footer {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(46, 45, 45, 0.45) 50%);
}

/*  action-tab */

	features article.red {
		background-color: var(--header-background);
	}
	main a.button.external-link:not(:has(img)):hover:after {
		width: 1.5em;
	    height: 1.5em;
        background-size: 1.1em;
        margin-left: 0.5em;
        margin-top: 0.9em;
	}

	.features article.filterlist h3 {
		margin-top: 1em;
	}
	.features article.filterlist h3:after {
		content: "☆";
		color: transparent;
		display: inline-block;
		float: right;
		width: 2em;
	    margin-right: -1em;
		background-image: var(--icon-star-empty);
		background-repeat: no-repeat;
	    background-position: center;
	    background-size: 2em;
        filter: grayscale(1) invert(1) contrast(0) brightness(4);
    	opacity: 0.2;
    	cursor: pointer;
	}
	.features article.filterlist h3.fav:after {
		background-image: var(--icon-star-filled);
		filter: hue-rotate(73deg) brightness(3);
		opacity: 1;
	}
	.features article.filterlist p {
    	margin: 1.5em 0 1em;
	}
	.features article.filterlist ul.actions.fit {
		margin-bottom: 0;
	}
/*	.features article:not(.training):not(.course) ul.actions.fit:after {
		content: "line";
		display: block;
		width: 100%;
		border-bottom: 2px solid yellow;
	}*/
	.features article.filterlist .actions a.button.tab {
		border-radius: 0.75em;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
/*		margin-right: calc(-0.25em - 2px);*/
		/* box-shadow: 0 0 0 2px #403838; */
		box-shadow: none;
		border: 2px solid #ffd7db26;
/*		border: none;*/
	    font-size: 0.7em;
		line-height: 3.5em;
	    letter-spacing: 0.15em;
/*	    background-color: var(--fifty-shades-of-grey)*/
	}
	.features article.filterlist.training .actions a.button.tab[data-target~="training"],
	.features article.filterlist.courses .actions a.button.tab[data-target~="courses"] {
		background-color: var(--lions-red-light-3);
		border-color: transparent;
	}
	.features article.filterlist .actions a.button.nude {
		box-shadow: none;
		border: none;
	    font-size: 0.7em;
	    letter-spacing: 0.15em;
	}
	.features article.filterlist .actions li:not(:last-child) {
		margin-right: calc(-1em + 3px);
	}
	.features:has(article.filterlist.training) {
		align-items: start;
	}
	table.filterlist tbody tr:nth-child(2n + 1) {
	    background-color: rgba(255, 255, 255, 0.1);
	}
	table.filterlist {
		margin-top: -2px;
		margin-bottom: 0;
		font-size: 0.7em;
		white-space: nowrap;
		position: relative; /* show top border in front of a.button.tab */
	}
	table.filterlist thead tr,
	table.filterlist tbody tr {
	 	border-color: rgba(255, 255, 255, 0.125); /* grey */
	 }
	.red table.filterlist thead tr,
	.red table.filterlist tbody tr {
	 	border-color: #b9404c; /* red */
	 }
	table.filterlist td:last-child {
		padding-right: 0.75em;
    	text-align: right;
	}
	table.filterlist td:has(a.button) {
		vertical-align: middle;
	}
	table.filterlist td a.button {
		background-color: #454545; /* var(--fifty-shades-of-grey); */
		border: none;
		box-shadow: none;
	}
	table.filterlist td a.button:hover {
/*		background-color: white;*/
		background-color: var(--sehr-black);
/*		color: black !important;*/
		color: var(--lion-red-light-3);
	}
	table.filterlist tr:has(td:nth-child(2) a[href]) {
		cursor: pointer;
	}
	table.filterlist tr:hover:not(:has(td:last-child:hover)) td:nth-child(2) a[href] {
		background-color: black;
	}

/*	table.filterlist tr:hover td:nth-child(3):before {
		content: "filter";
		display: inline-block;
		width: 3em;
		background-color: var(--sehr-black);
		transform: translateX(-3em);
	}*/
	table.filterlist tr:hover td:nth-child(3):before {
	    content: "filter";
	    color: transparent;
	    overflow: hidden;
	    position: absolute;
/*	    display: inline-block;*/
	    transform: translateX(-3.6em) translateY(1em);
	    width: 3em;
	    height: 3em;
	    margin-top: -1em;
	    border-radius: 5px;
	    /* margin-right: -3em; */
	    background-color: black;
	    background-image: var(--icon-filter);
		background-repeat: no-repeat;
	    background-position: center;
	    background-size: 1.6em;
/*        filter: grayscale(1) contrast(0) brightness(4);*/
/*    	opacity: 0.2;
    	cursor: pointer;*/
	}
	table.filterlist tr:hover:has(td:last-child a:hover) td:nth-child(3):before {
/*		display: none;*/
/*		background-color: #454545;*/
		visibility: hidden;
	}

	.filterlist-wrapper {
		max-height: calc((3.5em* 5) + 1em);
		overflow-y: scroll;
		overflow-x: visible;
		margin: 0em -1em;
/*		margin-top: calc(-1.5em - 2px);*/
		margin-top: -2px;
/*		padding: calc(var(--filterlist-extension)* -1);*/
		border-top: 2px solid #b9404c;	
	}
	article.training .filterlist-wrapper:has(table.training),
	article.courses .filterlist-wrapper:has(table.courses), {
		border-top: 2px solid #585361;
	}
	article.red.training .filterlist-wrapper:has(table.training),
	article.red.courses .filterlist-wrapper:has(table.courses) {
/*		border-top: 2px solid #b9404c;*/
		border-top: 2px solid var(--lions-red-light-3);
		position: relative;
	}

	article.training table.filterlist.training,
	article.courses table.filterlist.courses {
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	table.filterlist {
		display: none;
	}
	article.filterlist {
		--filterlist-extension: -1.5em;
	}
	article.filterlist div.idle {
		margin: 0 var(--filterlist-extension);
/*		width: calc( 100% - 2 * var(--filterlist-extension) );*/
	}
	article.filterlist div.idle {
	    border-top: 2px solid #585361; /* light blueish grey from tab borders */
	    margin-top: -2px;
	    position: relative;
	    --filterlist-extension: -1em;  /* same as tables, but must be rduced for some reason */
	}
	article.filterlist.red div.idle {
	    border-top: 2px solid #b9404c; /* light red from tab borders */
	}
	article.filterlist.training div.idle {
		display: none;
	}
	table.filterlist td a:not(.button) {
		margin-left: -2px;
	}
	@media screen and (max-width:  980px) { 
		.filterlist td:last-child a.button  { 
			/* show plus-icon only, not text */
			color: transparent !important;
			width: 2.5em;
			padding: 0em 1.9em;
			float: right;
			margin-right: 1em;
			background-image: var(--icon-add);
			background-repeat: no-repeat;
		    background-position: center;
		    background-size: 2em;
		} 
	}

	.features article.filterlist:not(.red) {
		display: flex;
		flex-flow: column;
		justify-content: space-between;
	}
	.features article.filterlist p:has(a.fit:first-child:last-child) {
		margin: 0;
		margin-bottom: -0.5em;
	}
	table.filterlist td.date {
		width: 10em;
/*		max-width: 28%;*/
	}