@charset "UTF-8";
:root {
  --col_youtube: rgba(230 0 53 / 20%);
}
/* Burger */
/*
	https://www.w3schools.com/howto/howto_css_menu_icon.asp
	<div class="toggle-site-nav">
  		<span></span>
  		<span></span>
  		<span></span>
	</div>
*/
.toggle-site-nav {
  display: block;
  position: absolute;
  right: 0;
  top: 16px;
  padding: 10px;
  cursor: pointer;
}
@media (min-width: 1493px) {
  .toggle-site-nav {
    display: none;
  }
}
.toggle-site-nav span {
  display: block;
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}
.toggle-site-nav:hover span {
  background-color: #e60035;
}
.toggle-site-nav.active span:nth-of-type(1) {
  transform: translate(0, 11px) rotate(-45deg);
}
.toggle-site-nav.active span:nth-of-type(2) {
  opacity: 0;
}
.toggle-site-nav.active span:nth-of-type(3) {
  transform: translate(0, -11px) rotate(45deg);
}
/*
	https://codepen.io/simonbreiter/pen/oLJrKy
	<span class="arrow">
		<span></span>
		<span></span>
	</span>
*/
.arrow {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  position: relative;
  margin: auto;
}
.arrow span {
  top: calc(1rem / 2.5rem * $size);
  position: absolute;
  width: calc(1.5rem / 2.5rem * $size);
  height: 0.1rem;
  background-color: #000;
  display: inline-block;
  transition: all 0.2s ease;
}
.arrow span:first-of-type {
  left: 0;
  transform: rotate(45deg);
}
.arrow span:last-of-type {
  right: 0;
  transform: rotate(-45deg);
}
.active > .arrow span:first-of-type {
  transform: rotate(-45deg);
}
.active > .arrow span:last-of-type {
  transform: rotate(45deg);
}
nav {
  display: flex;
  height: 82px;
  background-color: #F2F2F2;
}
nav [class^="level_"] {
  text-align: center;
}
nav [class^="level_"] a {
  display: inline-block;
  color: #fff;
  background-color: #729761;
  padding: 2px 5px;
  border-radius: 5px;
  margin: 2px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}
nav [class^="level_"] a.active {
  background-color: cadetblue;
}
nav ul {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
nav ul.level_1 {
  display: block;
}
nav ul li {
  display: inline-block;
}
nav ul li.active > a {
  background-color: #e60035;
}
nav ul li.active > ul {
  display: block;
}
@media (max-width: 1000px) {
  nav span.long {
    display: none;
  }
}
@media (min-width: 1000px) {
  nav span.short {
    display: none;
  }
}
subheader {
  display: block;
  min-height: 30px;
  text-align: center;
  background-color: #F2F2F2;
}
.start {
  width: 100%;
  padding-top: 10px;
}
@media only screen and (min-width: 645px) {
  .start {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
}
.start > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}
.start > div a {
  display: inline-block;
  min-width: 190px;
  color: #fff;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background: #729761;
  padding: 2px 5px;
}
.start > div a:hover {
  background-color: #e60035;
}
.start > div a span {
  display: block;
  font-size: 50px;
  font-weight: bold;
}
.start2 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.start2 .cols {
  max-width: 100%;
}
@media only screen and (min-width: 1300px) {
  .start2 .cols {
    display: flex;
    gap: 5px;
  }
}
.start2 .cols .scroll {
  max-width: 100%;
  overflow-x: auto;
  background-color: #F2F2F2;
}
.start2 .cols .scroll .col {
  display: grid;
  max-width: 100%;
  border-radius: 5px;
  padding: 5px;
}
.start2 .cols .scroll .col .row1 {
  flex-direction: column;
  padding-bottom: 5px;
}
.start2 .cols .scroll .col .row1 span {
  display: block;
  font-size: 50px;
  font-weight: bold;
}
.start2 .cols .scroll .col .row2 {
  min-height: 41px;
}
.start2 .cols .scroll .col a, .start2 .cols .scroll .col .blank, .start2 .cols .scroll .col .unknown {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  margin: 2.5px;
}
@media only screen and (min-width: 1300px) {
  .start2 .cols .scroll .col a, .start2 .cols .scroll .col .blank, .start2 .cols .scroll .col .unknown {
    min-width: 77px;
  }
}
.start2 .cols .scroll .col a {
  white-space: nowrap;
  color: #fff;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background: #729761;
}
.start2 .cols .scroll .col a.unknown {
  color: initial;
  background: #c9c9c9;
}
.start2 .cols .scroll .col a:hover {
  background-color: #e60035;
}
@media only screen and (min-width: 650px) {
  .start2 .cols .scroll .col a .short {
    display: none;
  }
}
@media only screen and (max-width: 649px) {
  .start2 .cols .scroll .col a .long {
    display: none;
  }
}
.start2 .cols .scroll .col div.unknown {
  white-space: nowrap;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background: #c9c9c9;
}
.start2 .cols .scroll .col .empty {
  padding: 2px 5px;
  margin: 2.5px;
}
@media only screen and (max-width: 1300px) {
  .start2 .cols .scroll .col .empty {
    display: none;
  }
}
scrolltotop {
  position: fixed;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 40px;
  height: 40px;
  z-index: 9999;
  cursor: pointer;
  background-color: #729761;
  border: none;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
}
scrolltotop:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iRWJlbmVfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNy4xOXB4IiBoZWlnaHQ9IjkuNnB4IiB2aWV3Qm94PSIwIDAgMTcuMTkgOS42IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNy4xOSA5LjY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWy5zdDB7Y2xpcC1wYXRoOnVybCgjU1ZHSURfMl8pO2ZpbGw6bm9uZTtzdHJva2U6I0ZGRkZGRjtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fV1dPjwvc3R5bGU+PGc+PGRlZnM+PHJlY3QgaWQ9IlNWR0lEXzFfIiB3aWR0aD0iMTcuMTkiIGhlaWdodD0iOS42Ii8+PC9kZWZzPjxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPjx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzFfIiAgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7Ii8+PC9jbGlwUGF0aD48cG9seWxpbmUgY2xhc3M9InN0MCIgcG9pbnRzPSIxLDguNiA4LjYsMSAxNi4xOSw4LjYgIi8+PC9nPjwvc3ZnPg==);
  background-repeat: no-repeat;
  background-position: center;
}
.select_styled {
  position: relative;
  margin-block: 2px;
}
.select_styled select {
  display: none;
}
.select-selected {
  background-color: #e60035;
  display: flex;
  justify-content: space-between;
  color: #fff;
  padding: 3px 5px 2px;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.01rem;
}
.select-selected::after {
  content: "";
  width: 14px;
  height: 8px;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Ebene_1' data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44.95 26.01'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='41.41 0 22.47 18.94 3.53 0 0 3.53 22.47 26.01 44.95 3.53 41.41 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  align-self: center;
  margin-left: 5px;
  transition: transform 0.2s;
}
.select-selected.select-arrow-active {
  border-radius: 5px 5px 0 0;
}
.select-selected.select-arrow-active::after {
  transform: rotate(180deg);
}
.select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  border-radius: 0 0 5px 5px;
  text-align: left;
  background-color: #729761;
}
.select-items div {
  padding: 2px 5px;
  color: #fff;
  cursor: pointer;
}
.select-items span {
  color: #729761;
  font-size: 12px;
  margin-left: 5px;
}
.select-items span:before {
  content: "(";
}
.select-items span:after {
  content: ")";
}
.select-hide {
  display: none;
}
*:has(> .tooltiptext) {
  cursor: help;
}
.tooltiptext {
  /* 1. KORREKTUREN FÜR FLOATING UI (Das JavaScript übernimmt das Einblenden) */
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: auto;
  cursor: initial;
  white-space: nowrap;
  background-color: #729761;
  color: #fff;
  font-weight: normal;
  text-align: center;
  border-radius: 6px;
  padding: 8px 12px;
  /* Etwas mehr Klickfläche für die Links */
  width: max-content;
  max-width: calc(100dvw - 50px);
  white-space: initial;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3);
  /* 3. DEINE VERSCHACHTELTEN LINKS & SPANS */
}
.tooltiptext::before {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: -12px;
  right: -12px;
  background: transparent;
  z-index: -1;
}
.tooltiptext .grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 5px;
}
.tooltiptext .grid > span:nth-of-type(odd) {
  color: #c9c9c9;
}
.tooltiptext .grid > span.video_wrap {
  justify-self: start;
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}
.tooltiptext a {
  display: block;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  /* Entfernt den Standard-Unterstrich */
  padding: 4px 0;
  transition: all 0.3s ease;
}
.tooltiptext a:hover {
  background-color: #E60035;
  transition: all 0.3s ease;
}
/* 4. DAS CSS FÜR DEN PFEIL (Bleibt eigenständig bestehen) */
.tooltip-arrow {
  position: absolute;
  background: #729761;
  width: 8px;
  /*height: 8px;*/
  aspect-ratio: 1;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: -1;
  /* Schiebt das Quadrat hinter den Tooltip-Körper, sodass nur die Spitze rausschaut */
}
/* Sonderfälle */
table.platzierung .tooltiptext span, table.sieger .tooltiptext span, table.tabelle .tooltiptext span {
  color: #c9c9c9;
}
html, body {
  max-width: 100%;
  min-height: 100vh;
}
html body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  display: grid;
  grid-template-rows: min-content min-content 1fr min-content;
  grid-template-columns: 100%;
  /*
		.pl1:hover .tooltiptext,
		.pl2:hover .tooltiptext,
		.pl3:hover .tooltiptext,
		.jahr:hover .tooltiptext,
		.spielnr:hover .tooltiptext {
			visibility: visible;
			opacity: 1;
		}
		*/
}
html body a {
  color: initial;
  text-decoration: none;
}
html body a:hover {
  text-decoration: none;
}
html body pre {
  text-align: left;
  font-size: 10px;
}
html body header {
  width: 100%;
  z-index: 1;
  align-items: center;
  background-color: #729761;
}
html body header .logo {
  display: inline-block;
  float: left;
  width: min(21vw, 89px);
  aspect-ratio: 1.1546677444;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='346.42' version='1.2' viewBox='0 0 300 259.815'%3E%3Cpath d='M300 0 150 259.815 0 0ZM75.019 43.3 150 173.178l75-129.88zm0 0' style='fill:%23e60035;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.77374'/%3E%3Cpath d='M300 64.856H0v64.967h300zm0 0' style='fill:%23000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.77374'/%3E%3Cpath d='m111.997 107.39 15.365-32.651h11.43l-21.052 45.22h-11.524l-20.382-45.22h11.04zM196.376 74.739H164.36v8.615h21.63v16.783c0 8.055-6.228 11.729-11.095 11.729-3.375 0-8.932-1.622-10.927-8.503l-8.727 2.126c1.398 6.675 8.447 15.552 20.14 15.552 12.232 0 20.996-7.758 20.996-24zM277.604 120.052V74.795h-9.845l-16.317 21.333-16.316-21.333h-9.846v45.257h10.405V90.925l14.116 18.405h3.282l14.135-18.405v29.127zM64.837 80.743c-4.792-4.923-11.841-7.57-19.58-7.57-14.06 0-25.882 8.67-25.882 24.148 0 15.496 11.84 24.148 25.882 24.148 8.41 0 16.018-3.114 20.774-8.913l-8.13-5.949c-2.854 3.693-7.497 5.67-12.644 5.67-8.466 0-15.608-5.353-15.608-14.956s7.142-14.955 15.608-14.955h.019-.019c4.755 0 9.082 1.678 11.972 4.848zm-19.58-7.57h.019zm0 0' style='fill:%23fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.77374'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin: 5px;
}
html body header .title {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;
  height: 86px;
}
html body header .title h1, html body header .title h2 {
  margin: 0;
  padding: 0;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}
html body header .title h1 a, html body header .title h2 a {
  color: #fff;
  padding: 0;
  margin: 0;
}
html body header .title h1 {
  font-size: min(6vw, 1.5rem);
  line-height: min(6vw, 1.5rem);
  text-wrap: balance;
}
html body header .title h2 {
  font-size: min(6vw, 1rem);
  line-height: min(6vw, 1rem);
}
html body .content {
  text-align: center;
  margin: 0px 0 50px;
  padding: 20px 5px 0 3px;
}
html body .content .hinweis {
  display: inline-block;
  color: #e60035;
  background-color: rgba(230, 0, 53, 0.1);
  padding: 10px;
  border: 1px solid #e60035;
  border-radius: 6px;
  margin: 0 auto 50px;
}
html body .content .wrap-column {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 488px;
  max-width: 100%;
  margin-bottom: 5px;
}
html body .content .wrap-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
@media (min-width: 1493px) {
  html body .content .wrap-row {
    flex-direction: row;
    align-items: flex-start;
  }
}
html body .content .location {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 37px;
  font-weight: bold;
  color: #729761;
  background-color: #CDD9C5;
  padding: 2px 4px;
  margin-bottom: 5px;
}
html body .content .location .ort {
  text-align: left;
  font-size: 1.5rem;
}
html body .content .location .date {
  text-align: right;
}
html body .content .turnier_bemerkung {
  text-align: left;
  font-size: 0.75rem;
  background-color: #F2F2F2;
}
html body .content .block {
  display: inline-block;
  width: 488px;
  max-width: 100%;
  vertical-align: top;
  font-size: 0.85rem;
  padding: 0 0px;
  margin-bottom: 5px;
}
html body .content .block .title {
  color: #729761;
  font-size: 1rem;
  font-weight: bold;
  background-color: rgba(114, 151, 97, 0.2);
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
html body .content .block .title span {
  color: initial;
  font-size: 0.85rem;
  font-weight: normal;
}
html body .content .block .location {
  display: grid;
  grid-template-columns: 52% 48%;
  grid-template-rows: 50% 50%;
  padding: 2px 4px;
}
html body .content .block .location .ort {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 2;
  text-align: left;
  font-size: 1.5rem;
  font-weight: bold;
}
html body .content .block .location .bez {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 1;
  align-self: flex-start;
  text-align: right;
}
html body .content .block .location .date {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 2;
  grid-row-end: span 2;
  align-self: flex-end;
  text-align: right;
}
html body .scroll {
  max-width: 100%;
}
html body table {
  width: 100%;
  border-collapse: collapse;
}
html body table.tabelle .platz, html body table.tabelle .landesverband, html body table.tabelle .spiele, html body table.tabelle .siege, html body table.tabelle .unentschieden, html body table.tabelle .niederlagen, html body table.tabelle .baelle, html body table.tabelle .balldifferenz, html body table.tabelle .punkteprospiel {
  text-align: center;
}
html body table tr.spiel_bemerkung {
  display: none;
}
html body table tr.spiel_bemerkung.open {
  display: table-row;
}
html body table tr.spiel_bemerkung.open td {
  white-space: initial;
}
html body table tr.spiel_bemerkung td {
  font-size: 0.75rem;
  background-color: #fff;
}
html body table th {
  border: 1px solid #fff;
  font-size: 0.85rem;
  font-weight: bold;
  background-color: #F2F2F2;
  padding: 0 2px;
}
html body table th.mannschaft {
  /*&.platz1,
				&.platz2,
				&.platz3*/
  text-align: left;
}
html body table td {
  position: relative;
  border: 1px solid #fff;
  font-size: 0.85rem;
  white-space: nowrap;
  background-color: #F2F2F2;
  padding: 1px 2px;
}
html body table td.sp, html body table td.lv, html body table td.s, html body table td.u, html body table td.n, html body table td.punkte, html body table td.saetze, html body table td.baelle, html body table td.satz {
  width: 36px;
  text-align: center;
}
html body table td.sp .tooltiptext, html body table td.lv .tooltiptext, html body table td.s .tooltiptext, html body table td.u .tooltiptext, html body table td.n .tooltiptext, html body table td.punkte .tooltiptext, html body table td.saetze .tooltiptext, html body table td.baelle .tooltiptext, html body table td.satz .tooltiptext {
  text-align: left;
}
html body table td.jahr {
  position: relative;
  text-align: center;
}
html body table td.pl {
  width: 22px;
  text-align: center;
}
html body table td.pl1, html body table td.pl2, html body table td.pl3, html body table td.gesamt {
  position: relative;
  text-align: center;
}
html body table td.pl1 dialog, html body table td.pl2 dialog, html body table td.pl3 dialog, html body table td.gesamt dialog {
  padding: 0;
}
html body table td.pl1 dialog inner, html body table td.pl2 dialog inner, html body table td.pl3 dialog inner, html body table td.gesamt dialog inner {
  display: block;
  padding: 20px;
  background: red;
}
html body table td.spielnr {
  width: 22px;
  text-align: center;
  color: #c9c9c9;
}
html body table td.spielnr.bemerkung {
  cursor: pointer;
  color: #fff;
  background-color: rgba(114, 151, 97, 0.2);
}
html body table td.spielnr .tooltiptext {
  text-align: left;
}
html body table td.spielpaarung {
  width: auto;
  white-space: nowrap;
  text-align: left;
}
html body table td.mannschaft {
  white-space: nowrap;
  text-align: left;
}
html body table td.hover {
  cursor: pointer;
  background-color: #ccc;
}
html body table td.active {
  color: red;
  background-color: #ccc;
}
html body table td[colspan="4"] {
  white-space: initial;
}
html body table td.video {
  position: relative;
}
html body table td.video:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  background-color: var(--col_youtube);
  /* Schneidet das Quadrat diagonal zu einem Dreieck oben rechts zurecht */
  /* Die Punkte sind: oben-links (100% 0), oben-rechts (100% 100%) und unten-rechts (0 0) */
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
html body table td.video .tooltiptext {
  text-align: left;
}
html body .footer {
  background-color: rgba(114, 151, 97, 0.2);
  text-align: center;
  font-size: 0.75rem;
  padding: 5px;
}
html body .comment {
  font-size: 0.75rem;
  background-color: #fff;
  text-align: left;
}
a.youtube {
  display: inline-block;
  width: 25px;
  height: auto;
  aspect-ratio: 1.4301675978;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='external-icon' style='pointer-events:none;display:block;width:100%25;height:100%25' viewBox='0 0 28.57 20'%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28.57 20'%3E%3Cpath fill='red' d='M27.973 3.123A3.58 3.58 0 0 0 25.447.597C23.22 0 14.285 0 14.285 0S5.35 0 3.123.597A3.58 3.58 0 0 0 .597 3.123C0 5.35 0 10 0 10s0 4.65.597 6.877a3.58 3.58 0 0 0 2.526 2.526C5.35 20 14.285 20 14.285 20s8.935 0 11.162-.597a3.58 3.58 0 0 0 2.526-2.526C28.57 14.65 28.57 10 28.57 10s-.002-4.65-.597-6.877'/%3E%3Cpath fill='%23fff' d='M11.425 14.285 18.848 10l-7.423-4.285z'/%3E%3C/svg%3E%3C/svg%3E");
  padding: initial;
}
a.youtube:hover {
  background-color: initial;
}