:root {
	--bg: white;
	--bg2: #EEEEEE;
	--bg3: whitesmoke;
	--bg4: gainsboro;
	--bg-transparent: rgba(255, 255, 255, 0.8);
	--bg-transparent-doppelt: rgba(255, 255, 255, 0.5);
	--bg-transparent-halb: rgba(255, 255, 255, 0.9);
	--bg-transparent-komplett: rgba(255, 255, 255, 0.0);
	--bg-header: var(--bg);

	--fg: black;
	--fg2: grey;
	--fg3: dimgrey;

	--hl: #b3cb00;
	--hl2: #d3e35a;
	--hl3: #93ab00;
	--hl4: #435b00;
	--hl5: #a3bb00;

	--hl-knopf: var(--hl);

	--hlb:  hsl(37, 74%, 48%); /* Gold */
	--hlb2: #ffcc00; /* Gold */

	--link: #557700;
	--link-visited: #224400;

	--border: silver;
	--border2: lightgrey;

	--leer: silver;

	--schatten-stark: rgba(0, 0, 0, 1);
	--schatten: rgba(0, 0, 0, 0.118);
	--schatten-gradient-start: rgba(0, 0, 0, 0.1);
	--schatten-gradient-mitte: rgba(0, 0, 0, 0.04);
	--schatten-gradient-ende: rgba(0, 0, 0, 0);

	--warnung: red;

	--heute-bg: lavenderblush;
	--heute-fg: tomato;
}

@media (prefers-color-scheme: dark) {

:root {
		--bg: #181825;
		--bg2: #1e1e2e;
		--bg3: #313244;
		--bg4: #484b70;
		--bg-header: var(--bg2);
		--bg-transparent: rgba(18, 18, 25, 0.8);
		--bg-transparent-doppelt: rgba(18, 18, 25, 0.5);
		--bg-transparent-halb: rgba(18, 18, 25, 0.9);
		--bg-transparent-komplett: rgba(18, 18, 25, 0.0);

		--fg: white;
		--fg2: #CCCCCC;
		--fg3: dimgrey;
		--fg-farbe: black;

		--hl : #b3cb00;
		--hl2: #93ab00;
		--hl3: #d3e35a;
		--hl4: #435b00;
		--hl5: #a3bb00;

		--hl-knopf: var(--hl2);

		--hlb:  hsl(37, 74%, 48%); /* Gold */
		--hlb2: #ffcc00; /* Gold */

		--link: #99BB00;
		--link-visited: #668800;

		--border: #505050;
		--border2: var(--border);

		--leer: silver;

		--schatten-stark: rgba(0, 0, 0, 1);
		--schatten: rgba(0, 0, 0, 0.118);
		--schatten-gradient-start: rgba(0, 0, 0, 0.1);
		--schatten-gradient-mitte: rgba(0, 0, 0, 0.04);
		--schatten-gradient-ende: rgba(0, 0, 0, 0);

		--warnung: red;

		--heute-bg: #53102e;
		--heute-fg: tomato;

		/*
		 * Die im Dark Mode verwendeten Farben sind teilweise von
		 * https://catppuccin.com/palette#flavor-mocha inspiriert
		 * oder direkt übernommen. Dieses Color-Scheme wird unter
		 * der MIT-Lizenz verbreitet, die hier nur bezogen auf das
		 * Color-Scheme eingefügt ist. Die Lizenz gilt also ausdrücklich
		 * *nicht* für diese oder andere Dateien, sondern ist nach den
		 * Lizenzbedingungen von Catppuccin angefügt.
		 *
		 * MIT License
		 *
		 * Copyright (c) 2021 Catppuccin
		 *
		 * Permission is hereby granted, free of charge, to any person obtaining a copy
		 * of this software and associated documentation files (the "Software"), to deal
		 * in the Software without restriction, including without limitation the rights
		 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
		 * copies of the Software, and to permit persons to whom the Software is
		 * furnished to do so, subject to the following conditions:
		 *
		 * The above copyright notice and this permission notice shall be included in all
		 * copies or substantial portions of the Software.
		 *
		 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
		 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
		 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
		 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
		 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
		 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
		 * SOFTWARE.
		 */
}
	}

.vert-sep {
	width: 8px;
	border-color: #b3cb00;
	border-color: var(--hl);
	border-style: solid;
	border-width: 0 1px;
}

.vert-sep.inset {
		margin: 25px 0;
	}

.hori-sep {
	height: 8px;
	border-color: #b3cb00;
	border-color: var(--hl);
	border-style: solid;
	border-width: 1px 0;
}

.hori-sep.inset {
		margin: 0 25px;
	}

.thin-hori-sep {
	height: 1px;
	background-color: silver;
	background-color: var(--border);
}

body {
	background-color: white;
	background-color: var(--bg);
	margin: 0;

	font-family: arial, sans-serif;
	font-family: serif;
	font-size: 1.2em;
	color: black;
	color: var(--fg);
}

p {
	line-height: 1.5;
}

* {
	scroll-margin-top: 20vh;
}

.klebe-am-menu {
	position: sticky;
	z-index: 10;
	top: 0;
}

button {
	cursor: pointer;
}

a {
	color: #557700;
	color: var(--link);

	transition: text-decoration-thickness .2s ease-in-out;
	text-decoration-thickness: 1px;
}

a:hover {
		text-decoration-thickness: 2px;
	}

a:visited {
		color: #224400;
		color: var(--link-visited);
	}

button {
	background-color: #b3cb00;
	background-color: var(--hl-knopf);
	color: black;
	color: var(--fg);
	border: none;
	font-weight: bold;
	padding: 0.2em 0.6em;
}

button:active {
		background-color: #d3e35a;
		background-color: var(--hl2);
	}

button.verschleiern.groß {
	font-size: 1.4em;
	padding: 0.4em 1em;
}

header #zu-inhalt-springen {
		position: absolute;
		top: 4px;
		left: 4px;
		z-index: 1000;
		border: #b3cb00 2px solid;
		border: var(--hl) 2px solid;
		background-color: white;
		background-color: var(--bg);
		box-shadow: rgba(0, 0, 0, 1) 0 0 12px;
		box-shadow: var(--schatten-stark) 0 0 12px;
		transform: translateX(-150%);
		transition: transform .2s ease-in-out;
	}

header #zu-inhalt-springen:focus {
			transform: translateX(0);
		}

header {

	box-shadow: rgba(0, 0, 0, 0.118) 0 2px 6px;

	box-shadow: var(--schatten) 0 2px 6px;
	z-index: 100;
	position: relative;
}

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

header {
		position: sticky;
		top: 0;
}
	}

header {

	height: 100px;
	height: min(max(5vw, 70px), 120px);

	font-weight: bold;

	font-size: min(max(1.5vw, 1.0em), 2em);
}

header  > nav {
		background-color: white;
		background-color: var(--bg-header);

		display: flex;
		flex-direction: row;
	}

@media screen and (max-width: 1200px) {

header  > nav {
			flex-direction: column;
	}
		}

header  > nav {

		height: 100%;

		padding: 0;
		margin: 0;
	}

header > nav  > div {
			display: flex;
			flex-direction: row;

			height: 100%;
		}

header > nav > div  > div {
				display: flex;
				flex-direction: row;
				
				height: 100%;
			}

@media screen and (max-width: 1200px) {

header > nav > div.ewige-leiste {
					justify-content: space-between;
			}
				}

header > nav > div.ewige-leiste {
				z-index: 95;
			}

header > nav > div.klapp-leiste {
				overflow: hidden;
			}

@media screen and (max-width: 1200px) {

header > nav > div.klapp-leiste {
					overflow: visible;

					flex-direction: column;
					align-items: stretch;
					/* max-height: 100%; */
					height: auto;
					width: auto;
					align-self:flex-start;
					/* align-self:left; */
					background-color: white;
					background-color: var(--bg-header);

					border: 2px #d3e35a solid;

					border: 2px var(--hl2) solid;
					border-top: none;
					border-left: none;
					z-index: 90;
					/* border-left: none; */
					transform: translateX(0);
					transition: transform .2s ease-in-out;
			}

					header > nav > div.klapp-leiste:not(.sichtbar) {
						transform: translateX(-150%);
					}

					header > nav > div.klapp-leiste::before {
						position: absolute;
						content: "";
						background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.04) 40%, rgba(0, 0, 0, 0) 100%);
						background: linear-gradient(180deg, var(--schatten-gradient-start) 0%, var(--schatten-gradient-mitte) 40%, var(--schatten-gradient-ende) 100%);
						width: calc(100% + 2px);
						height: 0.4em;
					}

					header > nav > div.klapp-leiste a {
						display: inline;
						text-align: center;

						height: auto;

						padding: 0.6em 2em;
						margin: 0;
						
						border: none;
						border-top: #b3cb00 1px solid;
						border-top: var(--hl) 1px solid;
					}
						header > nav > div.klapp-leiste a:first-child {
							border: none;
						}

					header > nav > div.klapp-leiste a {

						-webkit-text-decoration: underline;

						text-decoration: underline;
						text-decoration-thickness: 0.15em;
						text-decoration-color: white;
						text-decoration-color: var(--bg-header);
					}

						header > nav > div.klapp-leiste a:hover,header > nav > div.klapp-leiste a.active {
							text-decoration-color: #b3cb00;
							text-decoration-color: var(--hl);
						}
				}

header > nav a {
			color: inherit;
			text-decoration: inherit;
		}

header > nav a:visited {
				color: inherit;
			}

header > nav a {

			color: black;

			color: var(--fg);
			transition:         color .2s ease-in-out, border-color .2s ease-in-out, text-decoration-color .2s ease-in-out;
			border-color: white;
			border-color: var(--bg-header);
			border-style: solid;
			border-width: 0;
			border-top-width: 3px;
			margin: 0 20px;
			padding: 25px 0;
			padding-top: 22px;

			white-space: nowrap;

			box-sizing: border-box;
			height: 100%;

			display: flex;
			align-items: center;
			list-style: none;
		}

header > nav a:hover,header > nav a.active {
				color: #b3cb00;
				color: var(--hl);
				border-color: #b3cb00;
				border-color: var(--hl);
				text-decoration-color: #b3cb00;
				text-decoration-color: var(--hl);
			}

header > nav a:has( > img) {
				padding: 0;
				padding-top:    0px;
				padding-bottom: 4px;
			}

header > nav a:has( > img) img {
					height: 100%;
				}

header > nav a:has( > img) img.fachabteilungslogo {
						content: url("/static-res/Logo_Schach-SFD-dunkel.svg");
					}

@media (prefers-color-scheme: dark) {

header > nav a:has( > img) img.fachabteilungslogo {
							content: url("/static-res/Logo_Schach-SFD-hell.svg");
					}
						}

header > nav a.kleiner:has( > img) {
					padding-top:    0.3em;
					padding-bottom: calc(4px + 0.3em);

				}

header > nav button.hamburger {
			color: #b3cb00;
			color: var(--hl);
			border: none;
			/* font-size: 1.2em; */
			font-weight: bold;

			display: flex;
			align-items: stretch;
			padding: 10px 0;

			background: none;
		}

header > nav button.hamburger:active {
				color: hsl(37, 74%, 48%);
				color: var(--hlb);
			}

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

header > nav button.hamburger {
				display: none;
		}
			}

header > nav button.hamburger svg path {
					stroke: #b3cb00;
					stroke: var(--hl-knopf);
					stroke-width: 2px;
					stroke-linejoin: round;
					stroke-linecap: round;
					fill: none;

					--dauer: 0.5s;
				}

header > nav button.hamburger svg path.außen {
					stroke-dasharray: 16 100;
					stroke-dashoffset: 0;

					transition: stroke-dasharray  var(--dauer) ease-in-out, stroke-dashoffset var(--dauer) ease-in-out;
				}

header > nav button.hamburger svg.an path.außen {
					stroke-dasharray: 23 100;
					stroke-dashoffset: -46.8;
				}

header > nav button.hamburger svg path.mitte {
					stroke-dashoffset: 0;
					stroke-dasharray: 20 20;

					transition:
							transform var(--dauer) ease-in-out, stroke-dashoffset var(--dauer) ease-in-out;
				}

header > nav button.hamburger svg.an path.mitte {
					stroke-dashoffset: -8;
				}

#index .tabelleMannschaften {
		text-align: center;
	}

#index .tabelleMannschaften table {
			width: 30em;
			margin: 0 auto;
		}

#index .tabelleTermine {
		text-align: center;
	}

#index .tabelleTermine table {
			width: 40em;
			margin: 0 auto;
		}

#index .tabelleTermine .zeiten {
			font-size: 0.9em;
			font-style: italic;
		}

#index .tabelle {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

#index .tabelle table a {
				color: inherit;
				text-decoration: inherit;
			}

#index .tabelle table {

			border-collapse: collapse;
			table-layout: auto;
		}

#index .tabelle table th,#index .tabelle table td {
				padding: 0.1em 1em;
				width: auto;
			}

#index .tabelle table thead {
				background-color: #d3e35a;
				background-color: var(--hl2);
				box-shadow: rgba(0, 0, 0, 0.118) 0 2px 6px;
				box-shadow: var(--schatten) 0 2px 6px;
				z-index: 10;
			}

#index .tabelle table thead th {
					text-align: center;
				}

#index .tabelle table tbody tr {
					border-style: solid;
					border-color: silver;
					border-color: var(--border);
					border-width: 0 1px;
					border-bottom-width: 1px;
				}

#index .tabelle table tbody tr:first-child {
						border-top-width: 1px;
					}

#index .tabelle table tbody tr {

					background-color: white;

					background-color: var(--bg);
				}

#index .tabelle table tbody tr:nth-child(even) {
						background-color: whitesmoke;
						background-color: var(--bg3);
					}

#index .tabelle table tbody tr:has(:focus) {
						background-color: gainsboro;
						background-color: var(--bg4);
					}

#index .tabelle table tbody tr:hover {
						background-color: gainsboro;
						background-color: var(--bg4);
					}

#index .tabelle table tbody td {
					text-align: center;
				}

.news {
	--inset: 7px;
}

.news .title {
		background: rgba(255, 255, 255, 0.9);
		background: var(--bg-transparent-halb);

		--overset: min(0.5em, 2vw);

		padding: 0 min(0.5em, 2vw);

		padding: 0 var(--overset);
		margin: 0 calc(-1 * min(0.5em, 2vw));
		margin: 0 calc(-1 * var(--overset));
	}

.news .title div:has( > a) {
			margin: 0;
			padding: 0 var(--inset);

			display: flex;
			align-items: center;
			justify-content: space-between;
		}

.news .title a {
			color: inherit;
			text-decoration: inherit;
			
			font-size: min(max(1.5vw, 1.4em), 2em);
			font-weight: bold;
			margin: 0;
			padding: 10px 0;
			padding-top: 7px;
			border-width: 0;
			border-top-width: 3px;
			border-style: solid;
			border-color: rgba(255, 255, 255, 0.0);
			border-color: var(--bg-transparent-komplett);
			transition: all .2s ease-in-out;
		}

.news .title a:hover,.news .title a.active {
				color: #b3cb00;
				color: var(--hl);
				border-color: #b3cb00;
				border-color: var(--hl);
			}

.news .title button {
			display: contents;
		}

.news .title button svg {
				padding: 10px;
				margin: -10px;
			}

.news .title button:active {
				color: #b3cb00;
				color: var(--hl);
			}

.news  > .articles {
		padding: 0 var(--inset);
	}

.news > .articles  > a.neuigkeit {
			margin: 15px 0;
		}

.news .laden {
		text-align: center;
	}

.news .laden button {
			background-color: #b3cb00;
			background-color: var(--hl);
			color: black;
			color: var(--fg);
			border: none;
			font-size: 1.4em;
			font-weight: bold;
			padding: 0.4em 1em;
			margin-top: .6em;
			margin-bottom: 1em;
		}

.news .laden button:active {
				background-color: #d3e35a;
				background-color: var(--hl2);
			}

.termine {
	background-color: lightgrey;
	background-color: var(--border2);
	display: grid;
	grid-template-columns: repeat(7, auto);
	grid-auto-columns: min-content;
	grid-gap: 1px;
	gap: 1px;
	padding: 1px;
	font-size: 1.4em;
}

.termine a {
		color: inherit;
		text-decoration: inherit;
	}

.termine .wtag {
		background-color: #d3e35a;
		background-color: var(--hl2);
		font-weight: bold;
		text-align: center;
		transition: font-size .2s ease-in-out;
		position: sticky;
		top: 0;
		box-shadow: rgba(0, 0, 0, 0.118) 0 2px 6px;
		box-shadow: var(--schatten) 0 2px 6px;
		z-index: 10;
	}

@media screen and (max-width: 1000px) {

.termine .wtag {
			font-size: 0.6em;
	}
		}

.termine .monat {
		grid-column: 1 / 8;
		font-weight: bold;
		background-color: #b3cb00;
		background-color: var(--hl);
		padding: 2px 10px;
	}

.termine .leer {
		background-color: gainsboro;
		background-color: var(--bg4);
	}

.termine .tag {
		background-color: white;
		background-color: var(--bg);
		/*max-width: 10em;*/
		min-height: 1em;
		position: relative;
	}

.termine .tag:has(#heute) {
			background: lavenderblush;
			background: var(--heute-bg);
		}

.termine .tag:has(#heute) span span {
					color: tomato;
					color: var(--heute-fg);
				}

.termine .tag:has(.termin) {
			min-width: min(10em, 20%);
		}

.termine .tag  > span {
			display: block;
			padding: 0 5px;
			margin: 2px 0;
			text-align: right;
			transition: all .2s ease-in-out;
			font-size: 0.8em;
			min-width: 1.1em;
		}

@media screen and (max-width: 1000px) {

.termine .tag  > span {
				font-size: 0.6em;
				padding: 0 2px;
		}
			}

.termine .tag .termin {
			color: black;
			color: var(--fg);
			font-size: 16px;
			display: block;
			background-color: #d3e35a;
			background-color: var(--hl2);
			margin: 4px;
			padding: 3px 3px;
			border-radius: 4px;
			overflow: hidden;
			transition: all .2s ease-in-out;
		}

@media screen and (max-width: 1000px) {

.termine .tag .termin {
				font-size: 12px;
		}
			}

.termine .tag .termin .kurz {
				display: flex;
				justify-content: space-between;

				flex-direction: column;
			}

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

.termine .tag .termin .kurz {
					flex-direction: row;
			}
				}

.termine .tag .termin .kurz span {
					transition: all .2s ease-in-out;

					word-wrap: break-word;
					hyphens: auto;
				}

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

.termine .tag .termin .kurz span {
						margin-right: 1em;
				}
					}

.termine .tag .termin .kurz time {
					white-space: nowrap;
					color: dimgrey;
					color: var(--fg3);
				}

.termine .tag .termin .details {
				text-align: left;
				max-height: 0;
				transition: all .2s ease-in-out;
				overflow: hidden;
				display: flex;
				flex-direction: column;
			}

.termine .tag .termin .details span {
					border-width: 0;
					border-top-width: 1px;
					border-color: grey;
					border-color: var(--fg2);
					border-style: solid;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

.termine .tag .termin:hover .details,.termine .tag .termin:focus .details,.termine .tag .termin.active .details {
					max-height: 1.3em;
				}

.mitglieder:not(.mitglieder.fixiert) {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

.mitglieder table {
		border-collapse: collapse;
		table-layout: auto;
		width: 100%;
	}

.mitglieder table th,.mitglieder table td {
			padding: 0.1em 1em;
			width: auto;
		}

.mitglieder table th:nth-child(2) {
				width: 100%;
			}

.mitglieder table td:nth-child(2) {
				width: 100%;
			}

.mitglieder table thead {
			background-color: #d3e35a;
			background-color: var(--hl2);
			box-shadow: rgba(0, 0, 0, 0.118) 0 2px 6px;
			box-shadow: var(--schatten) 0 2px 6px;
			z-index: 10;
		}

.mitglieder table thead th {
				font-size: 1.2em;
				white-space: nowrap;
			}

.mitglieder table tbody tr {
				border-style: solid;
				border-color: silver;
				border-color: var(--border);
				border-width: 0 1px;
				border-bottom-width: 1px;
			}

.mitglieder table tbody tr:first-child {
					border-top-width: 1px;
				}

.mitglieder table tbody tr {

				background-color: white;

				background-color: var(--bg);
			}

.mitglieder table tbody tr:nth-child(even) {
					background-color: whitesmoke;
					background-color: var(--bg3);
				}

.mitglieder table tbody tr:has(:focus) {
					background-color: gainsboro;
					background-color: var(--bg4);
				}

.mitglieder table tbody tr:hover {
					background-color: gainsboro;
					background-color: var(--bg4);
				}

.mitglieder table tbody td.zahl {
					text-align: right;
				}

.mitglieder table tbody td.name {
					text-align: left;
				}

.mitglieder table tbody td.name a {
						text-decoration: inherit;
						color: inherit;
						width: 100%;
						display: block;
					}

.mitglieder table tbody td.name.wichtig {
						font-weight: bold;
						color: hsl(37, 74%, 48%);
						color: var(--hlb);
					}

.mitglieder table tbody td.punkte {
					text-align: center;
				}

.mitglieder table tbody td.punkte.wichtig {
						font-weight: bold;
					}

a.name {
	text-decoration: inherit;
	color: inherit;
}

/* .vorname { */

/* font-style: italic; */

/* } */

.titel {
	font-style: italic;
	color: grey;
	color: var(--fg2);
}

.fideTitel {
	font-weight: bold;
	color: hsl(37, 74%, 48%);
	color: var(--hlb);
}

.turnierliste {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.turnierliste a {
		margin: 1em 1em;
		padding: 0.5em 1em;
		border-radius: 0.5em;

		max-width: 30em;

		font-style: inherit;
		color: inherit;
		text-decoration: inherit;
		background-color: #d3e35a;
		background-color: var(--hl2);
	}

.turnierliste a  > span {
			font-size: 1.2em;
			font-weight: bold;

			hyphens: auto;
		}

#turnier h1 {
		hyphens: auto;
	}

#turnier .zurückgezogen {
		opacity: 0.4;
	}

#turnier .zurückgezogen * {
			font-style: italic;

		}

#turnier .mitglieder.summentabelle td.summen {
		line-height: 0.9em;
	}

#turnier .mitglieder.summentabelle td.summen span {
			font-weight: normal;
			font-size: 0.9em;
		}

#neuigkeiten .liste {
		display: grid;
		grid-gap: 3em;
		gap: 3em;
		grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

		padding: 0 var(--inset);
	}

@container infos (max-width: 500px) {

#neuigkeiten .liste {
			display: flex;
			flex-direction: column;
			gap: 2em;

			margin-bottom: 2em;
	}
		}

#neuigkeiten .laden {
		text-align: center;
	}

#neuigkeiten .laden button {
			background-color: #b3cb00;
			background-color: var(--hl);
			color: black;
			color: var(--fg);
			border: none;
			font-size: 1.4em;
			font-weight: bold;
			padding: 0.4em 1em;
			margin-top: .6em;
			margin-bottom: 1em;
		}

#neuigkeiten .laden button:active {
				background-color: #d3e35a;
				background-color: var(--hl2);
			}

a.neuigkeit {
	color: inherit;
	text-decoration: inherit;

	display: flex;
	flex-direction: column;
}

a.neuigkeit img {
		width: 100%;
	}

a.neuigkeit h3 {
		text-align: center;
		margin: 0;
		padding: 5px 3px;
		padding-top: 0;
	}

a.neuigkeit article {
		background-color: #b3cb00;
		background-color: var(--hl);
		padding: 3px;
	}

a.neuigkeit article time {
			background-color: #d3e35a;
			background-color: var(--hl2);
			color: black;
			color: var(--fg);
			padding: 0px 5px;
			overflow: hidden;
			transition: all .2s ease-in-out;
			display: block;
			max-height: 0;
		}

a.neuigkeit article:has( > img) {
			position: relative;
		}

a.neuigkeit article:has( > img) time {
				display: inline;
				max-height: auto;
				position: absolute;
				top: 3px;
				opacity: 0;
			}

a.neuigkeit article .text {
			background-color: white;
			background-color: var(--bg);
			max-height: 0;
			transition: all .2s ease-in-out;
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}

a.neuigkeit article .text  > div {
				padding: 5px;
				border: 3px #d3e35a solid;
				border: 3px var(--hl2) solid;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 6;
				line-clamp: 6;
				text-overflow: ellipsis;
			}

a.neuigkeit article .text .autor {
				color: grey;
				color: var(--fg2);
				font-style: italic;
			}

a.neuigkeit article .text .autor::before {
					content: "von ";
				}

a.neuigkeit article .text .autor::after {
					content: "    ";
					white-space: pre;
				}

a.neuigkeit:has( > .anmerkung)  > .anmerkung {
			background-color: #ffcc00;
			background-color: var(--hlb2);
			padding: 0 0.6em;
			margin-left: 1em;
			border-top-left-radius: 0.7em;
			border-top-right-radius: 0.7em;
			align-self: flex-start;
		}

a.neuigkeit:has( > .anmerkung) > .anmerkung:has( > img) {
				padding-top: 0.2em;
				width: 1em;

				display: flex;
			}

a.neuigkeit:has( > .anmerkung) > .anmerkung:not(:has( > img)) {
				padding-top: 0.1em;
				font-weight: bold;
			}

a.neuigkeit:has( > .anmerkung)  > article {
			border: #ffcc00 2px solid;
			border: var(--hlb2) 2px solid;
			padding: 1px;
		}

a.neuigkeit:has( > .anmerkung) > article:has( > img) time {
				top: 1px;
			}

a.neuigkeit:hover
	article time,a.neuigkeit:focus
	article time,a.neuigkeit.active
	article time {
			max-height: 2em;
		}

a.neuigkeit:hover
	article:has( > img) time {
				max-height: auto;
				opacity: 1;
			}

a.neuigkeit:focus
	article:has( > img) time {
				max-height: auto;
				opacity: 1;
			}

a.neuigkeit.active
	article:has( > img) time {
				max-height: auto;
				opacity: 1;
			}

a.neuigkeit:hover
	article .text,a.neuigkeit:focus
	article .text,a.neuigkeit.active
	article .text {
			max-height: 140px;
		}

#saisonSeite div {
		text-align: center;
	}

#saisonSeite .knöpfe a {
		background-color: #b3cb00;
		background-color: var(--hl);
		color: black;
		color: var(--fg);
		text-decoration: inherit;
		border: none;
		font-size: 1.2em;
		font-weight: bold;
		padding: 0.4em 1em;
		margin: .5em .5em;
	}

#saisonSeite .knöpfe a:active {
			background-color: #d3e35a;
			background-color: var(--hl2);
		}

.mannschaftsführer {
	font-weight: bold;
}

.mannschaftsführer a {
		font-weight: normal;
		text-decoration: inherit;
		color: inherit;
	}

#beitreten .scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

#beitreten table {
		min-width: 800px;

		border-collapse: collapse;
		table-layout: auto;
		width: 100%;
	}

#beitreten table th,#beitreten table td {
			padding: 0.1em 1em;
			width: auto;
		}

#beitreten table thead {
			background-color: #d3e35a;
			background-color: var(--hl2);
			box-shadow: rgba(0,0,0,.117647) 0 2px 6px;
			z-index: 10;
		}

#beitreten table thead th {
				text-align: right;
			}

#beitreten table tbody tr {
				border-style: solid;
				border-color: silver;
				border-color: var(--border);
				border-width: 0 1px;
				border-bottom-width: 1px;
			}

#beitreten table tbody tr:first-child {
					border-top-width: 1px;
					/*border-top-color: white;*/
				}

#beitreten table tbody tr {

				background-color: white;

				background-color: var(--bg);
			}

#beitreten table tbody tr:nth-child(even) {
					background-color: whitesmoke;
					background-color: var(--bg3);
				}

#beitreten table tbody tr:has(:focus) {
					background-color: gainsboro;
					background-color: var(--bg4);
				}

#beitreten table tbody tr:hover {
					background-color: gainsboro;
					background-color: var(--bg4);
				}

#beitreten table tbody td {
				text-align: right;
			}

#beitreten table tbody td:first-child {
					font-weight: bold;
				}

.personen {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;

	font-size: max(min(2em, 1vw), 1em);
	/* font-size: 1em; */
}

.personen:has(button) {
		font-size: 1em;
	}

.personen  > div {
		margin: 1em;
		padding: 0.1em;
		background-color: #b3cb00;
		background-color: var(--hl);
		padding-bottom: 0.2em;

		display: flex;
		flex-direction: column;
	}

.personen > div  > span,.personen > div  > a,.personen > div  > h3 {
			margin: 0em 0.4em;
		}

.personen > div a {
			color: black;
			color: var(--fg);
		}

.personen > div a:visited {
				color: dimgrey;
				color: var(--fg3);
			}

.personen > div img {
			width: 12em;
			padding-bottom: 0.2em;
		}

article {
	/* text-align: justify; */
	word-wrap: break-word;
	/* hyphens: auto; */
}

#artikel img {
		width:100%;
	}

#artikel h1 {
		width: -moz-fit-content;
		width: fit-content;
	}

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

#artikel div.datum-aligner {
			display: flex;
	}
		}

#artikel div.datum-aligner time {
			display: block;
			text-align: right;
			margin-left: auto;
			margin-top: 1em;
		}

#artikel .autor {
		color: grey;
		color: var(--fg2);
		font-style: italic;
	}

#artikel .autor::before {
			content: "von ";
		}

#artikel .autor::after {
			content: "    ";
			white-space: pre;
		}

.kollabierbar {
	background-color: #EEEEEE;
	background-color: var(--bg2);
	border: 1px silver solid;
	border: 1px var(--border) solid;
	border-bottom-width: 0;
}

.kollabierbar input {
		display: none;
	}

.kollabierbar label {
		display: flex;
		align-items: center;
	}

.kollabierbar label img {
			height: 0.8em;
			margin: 0 0.3em;
			transition: all .2s ease-in-out;
			rotate: 90deg;
		}

.kollabierbar:has( > input:checked) img {
		rotate: 180deg;
		/*transform: rotate(90);*/
	}

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

.einstellungen  > div {
		overflow: hidden;
		max-height: 0;
		border: 1px silver solid;
		border: 1px var(--border) solid;
	}

.einstellungen:has( > .kollabierbar > input:checked) > div {
		max-height: 100%;
	}

.einstellungen  > div {
		display: flex;
		flex-direction: column;
	}

.einstellungen > div h3 {
			margin: 0 0.3em;
		}

.einstellungen > div .einstellung {
			background-color: #d3e35a;
			background-color: var(--hl2);
			padding: 1px 0.3em;
			padding-right: 0.6em;
			border-radius: 1em;
			border: 1px #b3cb00 solid;
			border: 1px var(--hl) solid;
			font-size: 1em;
		}

.einstellungen > div a.einstellung {
				text-decoration: inherit;
				border-radius: 0;
				padding-right: 0.3em;
				color: black;
				color: var(--fg);
			}

.einstellungen > div a.einstellung:active {
					background-color: #b3cb00;
					background-color: var(--hl);
					border-color: #d3e35a;
					border-color: var(--hl2);
				}

.einstellungen > div .liste {
			display: flex;
			flex-wrap: wrap;
			gap: 1em;
			margin: 5px 0.5em;
		}

.einstellungen > div .gruppen {
			display: flex;
			flex-wrap: wrap;
		}

.einstellungen > div .gruppen  > div {
				display: flex;
				align-items: center;
				gap: 0.5em;

				background-color: #d3e35a;

				background-color: var(--hl2);

				padding: 3px 0.6em;
				border-radius: 2em;
				margin: 2px 0.3em;
			}

.einstellungen > div .gruppen > div span {
					font-weight: bold;
				}

.einstellungen > div .gruppen > div button {
					display: flex;
					align-items: center;
					padding: 0;

					background-color: transparent;
					border: none;
					font-size: inherit;
				}

.einstellungen > div .gruppen > div button:active img {
						filter: invert(1);
					}

.einstellungen > div .typen {
			overflow: hidden;
			max-height: 0;
			/*transition: all .2s ease-in-out;*/
			border: 1px silver solid;
			border: 1px var(--border) solid;
		}

.einstellungen > div:has( > .kollabierbar > input:checked) > .typen {
			max-height: 100%;
		}

.einstellungen > div .typen  > div {
				display: none;
			}

.einstellungen > div .typen > div:has(button) {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
				}

.einstellungen > div .typen > div  > h4 {
					margin: 0;
					margin-right: 1em;

					display: flex;
					align-items: center;
				}

.einstellungen > div .typen > div > h4 img {
						margin-left: 0.5em;
						margin-right: 1px;
					}

.einstellungen > div .typen > div button {
					border: none;
					padding: 1px 0.6em;
					border-radius: 1em;
					margin: 2px 0.3em;
					font-size: 1em;
					background-color: #d3e35a;
					background-color: var(--hl2);
					color: black;
					color: var(--fg);
				}

.runden {
	display: flex;
	flex-wrap: wrap;
}

.runden .runde {
		overflow-x:hidden;
	}

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

.runden .runde {
			margin: 1em;
	}
		}

.runden .runde > h3  > span {
				display: inline-block;
				margin-left: 1em;
				font-weight: normal;
			}

.runden .runde > h3 > span  > span {
					font-style: italic;
				}

.runden .runde  > h3 {

			display: block;
		}

.runden .runde > h3::before {
				content: none;
			}

.runden .runde > h3::after {
				content: none;
			}

.spiele {
	border-collapse: collapse;
	table-layout: auto;
}

.spiele .freilos:empty::after {
		content: "—";
	}

.spiele .freilos:not(:empty) {
		font-style: italic;
		color: dimgrey;
		color: var(--fg3);
		font-size: 0.9em;
		vertical-align: center;
	}

.spiele th,.spiele td {
		padding: 0.1em 1em;
		width: auto;
	}

.spiele thead {
		background-color: #d3e35a;
		background-color: var(--hl2);
		box-shadow: rgba(0, 0, 0, 0.118) 0 2px 6px;
		box-shadow: var(--schatten) 0 2px 6px;
		z-index: 10;
	}

.spiele thead th:empty {
			padding: 0;
		}

.spiele tbody tr {
			border-style: solid;
			border-color: silver;
			border-color: var(--border);
			border-width: 0 1px;
			border-bottom-width: 1px;
		}

.spiele tbody tr:first-child {
				border-top-width: 1px;
			}

.spiele tbody tr {

			background-color: white;

			background-color: var(--bg);
		}

.spiele tbody tr:nth-child(even) {
				background-color: whitesmoke;
				background-color: var(--bg3);
			}

.spiele tbody tr:has(:focus) {
				background-color: gainsboro;
				background-color: var(--bg4);
			}

.spiele tbody tr:hover {
				background-color: gainsboro;
				background-color: var(--bg4);
			}

.spiele tbody td {
			border-style: solid;
			border-width: 0;
			border-left-width: 1px;
			border-color: silver;
			border-color: var(--border);
		}

.spiele tbody td.zahl,.spiele tbody td.name {
				text-align: inherit;
				font-weight: inherit;
			}

.spiele tbody td.zahl {
				text-align: right;
				white-space: nowrap;
			}

.spiele tbody td.name {
				text-align: center;
			}

.spiele tbody td.name a {
					color: inherit;
					text-decoration: inherit;
					text-align: left;
					width: 100%;
				}

.spiele tbody td.name.wichtig {
					color: hsl(37, 74%, 48%);
					color: var(--hlb);
					font-weight: bold;
				}

.spiele tbody td.punkte {
				text-align: center;
			}

.spiele tbody td.punkte.wichtig {
					font-weight: bold;
				}

.spiele tbody td.punkte {

				white-space: nowrap;
			}

.spiele tbody td.bemerkung {
				border: none;
				font-style: italic;
				text-align: left;
				font-size: 0.9em;
			}

.spiele tbody td.bemerkung:empty {
					padding: 0;
				}

.spiele tbody td.ergebnis span {
					padding: 0 0.2em;
				}

.spiele tbody td.ergebnis .bemerkung {
					font-style: italic;
					font-weight: lighter;
					font-size: 0.9em;
					margin-top: -0.3em;
					display: block;
				}

.spiele tbody td.ergebnis.zeige-balken:empty::after {
							content: "—";
							color: silver;
							color: var(--leer);
						}

.scrollbox {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.kachel {
	background-color: rgba(255, 255, 255, 0.5);
	background-color: var(--bg-transparent-doppelt);

	padding: 1em;
	border-radius: 1em;

	overflow: auto;

	align-self: start;

	border: rgba(0, 0, 0, 0) 2px solid;

	border: var(--schatten-gradient-ende) 2px solid;
}

.kachel.ohne-top-bottom {
		padding-top: 0;
		padding-bottom: 0;
	}

.kachel-liste  > a {
		color: inherit;
		text-decoration: inherit;
	}

.kachel-liste > a:hover .kachel {
				border-color: #b3cb00;
				border-color: var(--hl);
			}

.kachel-liste.jugend-training .kachel {
		padding-top: 0;
		padding-bottom: 0;
	}

@container infos (max-width: 700px) {

.kachel-liste.jugend-training {
		display: flex;
		flex-direction: column;

		gap: 1em;
}
	}

@container infos not (max-width: 700px) {

.kachel-liste.jugend-training {
		display: grid;

		grid-template-columns: repeat(2, 1fr);

		grid-gap: 1em;

		gap: 1em;
}

		.kachel-liste.jugend-training  > a:last-child {
			grid-row: 2 / span 1;
			grid-column: 1 / span 2;
		}
	}

.kachel-liste.training-jugend .kachel {
		padding-top: 0;
		padding-bottom: 0;
	}

@container infos (max-width: 700px) {

.kachel-liste.training-jugend {
		display: flex;
		flex-direction: column;

		gap: 1em;
}
	}

@container infos not (max-width: 700px) {

.kachel-liste.training-jugend {
		display: grid;

		grid-template-columns: repeat(2, 1fr);

		grid-gap: 1em;

		gap: 1em;
}

		.kachel-liste.training-jugend .kachel:first-child {
			grid-row: 1 / 3;
			grid-column: 1 / 2;
		}
	}

main {
	margin-left: 10%;
	margin-right: 10%;
	transition: all .2s ease-in-out;
}

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

main:has( > div.vert-sep) {
			display: grid;
			grid-template-columns: 1fr auto 30%;
			grid-gap: 40px;
			gap: 40px;
	}
		}

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

main:has( > div.vert-sep) {
			display: flex;
			flex-direction: column;
	}
		}

@media screen and (max-width: 1000px) {

main {
		margin-left: 3%;
		margin-right: 3%;
}
	}

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

main {
		margin-left: 2%;
		margin-right: 2%;
}
	}

main .infos {
		min-width: 0;
	}

main .infos
	/* .news */
	{
		container-type: inline-size;
		container-name: infos;

		backdrop-filter: blur(5px);
		background: rgba(255, 255, 255, 0.8);
		background: var(--bg-transparent);

		padding: 0 0.5em;
		padding-bottom: 1em;
	}

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

main .infos
	/* .news */
	{
			margin: -1em;
			padding: 1em;
	}
		}

main .infos h1,main .infos h2,main .infos h3 {
			hyphens: auto;
		}

main .infos h1:not(.simpel),main .infos h2:not(.simpel),main .infos h3:not(.simpel) {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				gap: 1rem; /* Abstand zwischen Text und Linien */
			}

main .infos h1:not(.simpel)::before {
					content: "";
					flex: 1;              /* füllt den restlichen Platz */

					border-color: #a3bb00;

					border-color: var(--hl5);
					border-style: solid;
					border-width: 1px 0;
				}

main .infos h2:not(.simpel)::before {
					content: "";
					flex: 1;              /* füllt den restlichen Platz */

					border-color: #a3bb00;

					border-color: var(--hl5);
					border-style: solid;
					border-width: 1px 0;
				}

main .infos h3:not(.simpel)::before {
					content: "";
					flex: 1;              /* füllt den restlichen Platz */

					border-color: #a3bb00;

					border-color: var(--hl5);
					border-style: solid;
					border-width: 1px 0;
				}

main .infos h1:not(.simpel)::after {
					content: "";
					flex: 1;              /* füllt den restlichen Platz */

					border-color: #a3bb00;

					border-color: var(--hl5);
					border-style: solid;
					border-width: 1px 0;
				}

main .infos h2:not(.simpel)::after {
					content: "";
					flex: 1;              /* füllt den restlichen Platz */

					border-color: #a3bb00;

					border-color: var(--hl5);
					border-style: solid;
					border-width: 1px 0;
				}

main .infos h3:not(.simpel)::after {
					content: "";
					flex: 1;              /* füllt den restlichen Platz */

					border-color: #a3bb00;

					border-color: var(--hl5);
					border-style: solid;
					border-width: 1px 0;
				}

main .infos h1::before {
			height: 10px;
		}

main .infos h1::after {
			height: 10px;
		}

main .infos h2::before {
			height: 8px;
		}

main .infos h2::after {
			height: 8px;
		}

main .infos h3::before {
			height: 5px;
		}

main .infos h3::after {
			height: 5px;
		}

@container infos (max-width: 700px) {

main .infos .lang {
				display: none;
		}
			}

@container infos not (max-width: 700px) {

main .infos .abk {
				display: none;
		}
			}

@container infos (max-width: 1100px) {

main .infos .llang {
				display: none;
		}
			}

@container infos not (max-width: 1100px) {

main .infos .labk {
				display: none;
		}
			}

footer {
	padding-top: 2em;

}

footer p {
		text-align: center;
	}

@media screen and (max-width: 700px) {

footer p {
			backdrop-filter: blur(5px);
			background: rgba(255, 255, 255, 0.8);
			background: var(--bg-transparent);
			padding: 0.2em 0.5em;
	}
		}

@media screen and (min-width: 701px) {
			footer p span {
				backdrop-filter: blur(5px);
				background: rgba(255, 255, 255, 0.8);
				background: var(--bg-transparent);
				padding: 0.2em 0.5em;
			}
		}

#hintergrund {
	position: fixed;
	width: 100vw;
	height: 100vh;
	-o-object-fit: cover;
	   object-fit: cover;
	z-index: -10;
	pointer-events: none; /* verhindert versehentliche Klicks */
}

#saison {
	position:fixed;
	bottom: 0;
	right: 0;
	padding: 0.2em 0.6em;
	color: grey;
	color: var(--fg2);
	font-size: 1.4em;
	backdrop-filter: blur(5px);
	background: rgba(255, 255, 255, 0.8);
	background: var(--bg-transparent);

	transition: transform .2s ease-in-out, right .2s ease-in-out, color .2s ease-in-out, border-color .2s ease-in-out;
}

#saison:hover,#saison.active {
		color: #b3cb00;
		color: var(--hl);
		border-color: #b3cb00;
		border-color: var(--hl);
	}

@media screen and (max-width: 1200px) {

#saison {
		right: 50%;
		transform: translateX(50%);
		font-size: 1.0em;
}
	}

#testumgebung {
	position:fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	color: red;
	color: var(--warnung);
	font-size: min(20vh, 13vw);

	z-index: 200;

	pointer-events: none; /* verhindert versehentliche Klicks */

	opacity: 0.3;
}

@media (hover:none) {

#testumgebung {
		opacity: 0.2;
}
	}

*:has(:hover) #testumgebung {
	opacity: 0.08;
}