:root {
   --bg-color-01: hsl(000 100% 50% / 0.5);
   --bg-color-02: hsl(020 100% 50% / 0.5);
   --bg-color-03: hsl(040 100% 50% / 0.5);
   --bg-color-04: hsl(060 100% 50% / 0.5);
   --bg-color-05: hsl(080 100% 50% / 0.5);
   --bg-color-06: hsl(100 100% 50% / 0.5);
   --bg-color-07: hsl(120 100% 50% / 0.5);
   --bg-color-08: hsl(140 100% 50% / 0.5);
   --bg-color-09: hsl(160 100% 50% / 0.5);
   --bg-color-10: hsl(180 100% 50% / 0.5);
   --bg-color-11: hsl(200 100% 50% / 0.5);
   --bg-color-12: hsl(220 100% 50% / 0.5);
   --bg-color-13: hsl(240 100% 50% / 0.5);
   --bg-color-14: hsl(260 100% 50% / 0.5);
   --bg-color-15: hsl(280 100% 50% / 0.5);
   --bg-color-16: hsl(300 100% 50% / 0.5);
   --bg-color-17: hsl(320 100% 50% / 0.5);
   --bg-color-18: hsl(340 100% 50% / 0.5);
   --tx-color-01: black;
   --tx-color-02: black;
   --tx-color-03: black;
   --tx-color-04: black;
   --tx-color-05: black;
   --tx-color-06: black;
   --tx-color-07: black;
   --tx-color-08: black;
   --tx-color-09: black;
   --tx-color-10: black;
   --tx-color-11: black;
   --tx-color-12: black;
   --tx-color-13: black;
   --tx-color-14: black;
   --tx-color-15: black;
   --tx-color-16: black;
   --tx-color-17: black;
   --tx-color-18: black;
}

@font-face {
   font-family: 'Pally-Regular';
   src: url('../fonts/Pally-Regular.woff2') format('woff2'),
        url('../fonts/Pally-Regular.woff') format('woff'),
        url('../fonts/Pally-Regular.ttf') format('truetype');
   font-weight: 400;
   font-display: swap;
   font-style: normal;
 }
 @font-face {
   font-family: 'Pally-Medium';
   src: url('../fonts/Pally-Medium.woff2') format('woff2'),
        url('../fonts/Pally-Medium.woff') format('woff'),
        url('../fonts/Pally-Medium.ttf') format('truetype');
   font-weight: 500;
   font-display: swap;
   font-style: normal;
 }
 @font-face {
   font-family: 'Pally-Bold';
   src: url('../fonts/Pally-Bold.woff2') format('woff2'),
        url('../fonts/Pally-Bold.woff') format('woff'),
        url('../fonts/Pally-Bold.ttf') format('truetype');
   font-weight: 700;
   font-display: swap;
   font-style: normal;
 }
 /**
 * This is a variable font
 * You can control variable axes as shown below:
 * font-variation-settings: wght 700.0;
 *
 * available axes:
 'wght' (range from 400.0 to 700.0
 */
 @font-face {
   font-family: 'Pally-Variable';
   src: url('../fonts/Pally-Variable.woff2') format('woff2'),
        url('../fonts/Pally-Variable.woff') format('woff'),
        url('../fonts/Pally-Variable.ttf') format('truetype');
   font-weight: 400 700;
   font-display: swap;
   font-style: normal;
 }
* {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
}
html {
   padding: 0;
   margin: 0;
   font-family: Pally-Regular;
}
body {
   padding: 0px;
   margin: 0px 10px 0px 10px;
   /* font-family: Pally-Regular; */
   font-size: 16px;
   line-height: 1.2;
   padding: 0 !important;
   border: 0;
   height: 100%;
   max-height: 100%;
   background-color: var(--std-bg-color);
   color: var(--std-text-color);
   text-wrap: pretty;
   overflow: auto;
}
.home-button {
   position: fixed; /* Bleibt an der gleichen Stelle, auch beim Scrollen */
   bottom: 20px; /* Positioniert den Button 20px vom unteren Rand */
   right: 20px; /* Positioniert den Button 20px vom rechten Rand */
   background-color: #007bff; /* Hintergrundfarbe des Buttons */
   color: white !important; /* Textfarbe */
   padding: 10px 20px; /* Innenabstand des Buttons */
   border-radius: 5px; /* Abgerundete Ecken */
   text-decoration: none; /* Unterstreichung entfernen */
   box-shadow: 2px 2px rgba(50, 50, 50, 0.5);
   transition: all 0.2s ease-in;
   z-index: 1000; /* Stellt sicher, dass der Button über anderen Elementen liegt */
 }
 
 /* Optional: Stil für den Hover-Effekt */
 .home-button:hover {
   font-size: 1.3rem;
   background-color: #0034b3; /* Etwas dunklere Hintergrundfarbe beim Darüberfahren */
 }
/* Style für die (sticky) Leiste on top  */
.consthead {
	position: sticky;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 80px;
	padding: 2px;
	background-color: var(--accent-bg-color);
	color: var(--accent-text-color);
   border: 2px solid white;
   border-radius: 10px;
   z-index: 10; /* Stellt sicher, dass der Header über anderen Elementen liegt */
 }
/* ... und für die dain platzierte Kopftabelle  */
table#headingclass {
   vertical-align:top; 
   border: none; 
   width:100%;
   border-collapse: collapse;  
}

table#headingclass tr,
table#headingclass td {
   padding: 3px; 
   border: none; 
   text-align: center;
}

/* Style für den Bottombereich (Copyright) der Webseite */
div.footer {
   position: fixed;
   left: 0px;
   bottom: 2px;
   clear: both;
   margin-left: 2px;
   right: 0;
   background: var(--accent-bg-color);
   color: var(--accent-text-color);
   font-size: 0.8rem;
   z-index: 901;
}
/* div-Klasse für sticky Control unterhalb der Topleiste */  
div.stickytopdiv {
   position: sticky;
   top:80px;
   background-color: var(--third-bg-color);
   color: var(--third-text-color);
   z-index: 2000;
}

/* Schriftstile für kleiner werdenden Viewport
   (je kleiner der Viewport, desto kleiner die Schrift */
.bigsmooth {
   font-size: clamp(1rem,2vw,2rem);
   font-weight: bold;
}
.smooth {
   font-size: clamp(.8rem,1.5vw,1.5rem);
}
/* Stile für die (Hauptmenü-)Buttons in der Kopfleiste */ 
.menubutton {
   margin-top: 0px;
   margin-left: 5px;
   text-align: center;
   box-shadow: 2px 2px rgba(250, 250, 250, 0.5);
   border-radius: 5px;
   text-decoration: none;
   display: inline-block;
   font-size: 10px;
   cursor: pointer;
   width: 80px;
   height: 35px;
}
.menubutton:hover {background-color: var(--third-bg-color);
   color: var(--third-text-color)}

.menubutton:active {
	transform: scale(0.6); /* Verkleinert die Schaltfläche */
  /* Optional: Schatten entfernen oder reduzieren */
  box-shadow: none;
  /* box-shadow: 6px 6px #666;
  transform: translateY(4px); */
}
/* Stil für die superkleinen Buttons (Spieltag oder Logout) */  
.smallbutton {
   margin-top: 2px;
   margin-left: 2px;
   padding: 3px;
   text-align: center;
   box-shadow: 1px 1px rgba(250, 250, 250, 0.5);
   border-radius: 3px;
   text-decoration: none;
   display: inline-block;
   font-size: 0.5rem;
   cursor: pointer;
   height: 20px;
}
.smallbutton:hover {background-color: var(--fourth-bg-color);
   color: var(--fourth-text-color)
}
.textl {
   text-align: left !important;
}
.textr {
   text-align: right !important;
}
.textc {
   text-align: center;
}
.smalltxt {
   font-size: 0.7rem;
}
/* Standard-Tabellenstil */
table {
   border-collapse: collapse; /* Vereint die Rahmenlinien */
 }
 table th, 
 table td {
   border: 1px solid grey; /* Standardrahmengröße und -farbe */
   font-size: clamp(0.5rem, 3vw, 1rem);
   text-align: center;
   padding: 0px 2px;
 }

 /* Style für die "Standardtabelle" */
table .standardtbl {
   background-color: var(--accent-bg-color);
   color: var(--accent-text-color);
	border-collapse:collapse;
	border: 2px solid white; 
	margin: auto; 
	border-spacing:3px;
}
table .standardtbl tr,
.standardtbl td {
	border:1px solid white;
}


 .bigger {
   /* font-family: Pally-Regular; */
   font-size: clamp(0.8rem, 4vw, 1.8rem) !important;
}
.big {
   /* font-family: Pally-Regular; */
   font-size: 1.5rem !important;
}
.huge {
   font-size: clamp(1rem, 5vw, 2rem) !important;
   font-weight: bold;
}
.bold {
   font-weight: bold;
}
.textcolor { color: var(--std-text-color) }
.accentcolor { background-color: var(--accent-bg-color); color: var(--accent-text-color) }
.secondcolor { background-color: var(--second-bg-color); color: var(--second-text-color) }
.thirdcolor { background-color: var(--third-bg-color); color: var(--third-text-color) }
.fourthcolor { background-color: var(--fourth-bg-color); color: var(--fourth-text-color) }
.highlight { color: var(--highlight-color) !important; }

.ergebsieg {
 background-color: green;
 color: white;
}
.ergebunen {
 background-color: cyan;
 color: black;
}
.ergebnied {
 background-color: red;
 color: white;
}

.navbutton {
   box-shadow: 2px 2px rgba(250, 250, 250, 0.5);
   border-radius: 5px;
   text-decoration: none;
   display: inline-block;
   font-size: 10px;
   cursor: pointer;
   height: 45px;
   margin-top: 5px;
   margin-left: 5px;
   text-align: center;
   width: 90px;  
}

.navbutton>img {
 height: 24px;
 width: 24px;
}
.navbutton:hover {
   background-color: var(--third-bg-color);
   color: var(--third-text-color);
}

.navbutton:active {
	transform: scale(0.6); 
   box-shadow: none;
}
.navbuttsmall {
   box-shadow: 2px 2px rgba(250, 250, 250, 0.5);
   border-radius: 5px;
   text-decoration: none;
   display: inline-block;
   font-size: 10px;
   cursor: pointer;
   height: 30px;
   margin-top: 2px;
   margin-left: 2px;
   text-align: center;
}

.navbuttsmall:hover {
   background-color: var(--third-bg-color);
   color: var(--third-text-color);
}

.navbuttsmall:active {
	transform: scale(0.6); 
   box-shadow: none;
}

.pic30 {
   height: 30px;
   width: 30px;
}
.pic64 {
 height: 64px;
 width: 64px;
 vertical-align: baseline;
}
.pic90 {
   height: 90px;
   width: 90px;
  }
.rund {
 border-radius: 100%;
 -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
}

h1 {
   font-size: clamp(1rem, 4vw, 2rem);
   box-shadow: 0 0.1em 0 0 hsl(0, 0%, 50%);
   line-height: 100%;
   margin: 10px;
 }
 h1>img {
 height: 30px; width: 30px;
 display: inline;
 vertical-align: middle;
}
h1>span {
 display: inline;
 vertical-align: middle;
}
h2 {
   font-size: clamp(1rem,1.8vw,1.8rem);
   text-align: center;
}
.nobr {
 white-space: nowrap;
}

/* "Medaillenplaetze", bevorzugt bei WM-Tipps eingesetzt */

.MED1 {
 background-color: #C9B037;
 color: #303030;
 /*Goldmedaille                     */
}

.MED2 {
 background-color: #B4B4B4;
 color: #303030;
 /*Silbermedaille                   */
}

.MED3 {
 background-color: #AD8A56;
 color: #FFFFFF;
 /*Bronzemedaille                   */
}

.MED4 {
 background-color: #205020;
 color: #FFFFFF;
 /*schlechter als Platz 3 aber mit Auszahlung */
}

/* sortierbare Tabelle "foobar" */

table#sorttable {
 margin-left: 10px;
}

/* Tabellenkopf festsetzen */
table#sorttable thead {
 position: sticky;
 inset-block-start: 0;
 user-select: none;
}

/* Hintergrund Tabellenkopf */
table#sorttable>thead>tr {
 background-color: rgba(255, 174, 94, 0.8);
}

table#sorttable>thead>tr>th:hover {
 background-color: #FFAE5E;
 cursor: pointer;
}

/* Die Spalten der Tabelle anpassen */
table#sorttable,
table#sorttable>thead>tr>th,
table#sorttable>tbody>tr>td {
 border: Solid 1px #888888;
 padding: 5px 8px 5px 8px;
 color: #000000;
}

/* Spalte in der Tabelle von der Sortierung ausschließen */
table#sorttable>thead>tr>td {
 border: Solid 1px #888888;
 padding: 5px 8px 5px 8px;
 color: #000000;
 font-weight: bold;
 text-align: center;
}

/* Den Hintergrund zeilenweise einfärben */
table#sorttable>tbody>tr:nth-child(even) {
 background-color: #FFFFFF;
}

table#sorttable>tbody>tr:nth-child(odd) {
 background-color: #FFD2A6;
}

/* Pfeil nach oben */
.upArrow::after {
 content: "\2191";
 color: #FFFFFF;
 text-shadow: 1px 1px 0px #000000;
 position: absolute;
}

/* Pfeil nach unten */
.dnArrow::after {
 content: "\2193";
 color: #FFFFFF;
 text-shadow: 1px 1px 0px #000000;
 position: absolute;
}

.blackHeader {
   background: #000;
   font-size: 0.7rem;
   padding: 6px;
   color: white;
  }
thead.blackHeader tr,
thead.blackHeader th {
 background: #000;
 font-size: 11px;
 padding: 6px;
 color: white;
}

/* Bundesligapunkte */
.bgjokerimage {
   background-image: url("../media/jokergood50.png");
   background-repeat: no-repeat;
   background-position: top left;
   background-size: 20px 20px;
}
.bgcolorpunkt { 
   background-color: #00E5BA; 
   color: black; 
}
.bgcolorpunkt >span {
   color: red; 
   font-size: 1rem;
   font-weight: bold;
   margin-bottom: 0px; 
}
.bgjokerimage >span {
   color: rgb(0, 122, 0); 
   font-size: 1rem;
   font-weight: bold;
   margin-bottom: 0px; 
}
.bgjokerimage >span::before,
.bgcolorpunkt >span::before { 
   content: '\A';
   white-space: pre-wrap; 
}

/* selbiges für die schmale Zeile */
.bgsmallpunkt {
   background-color: #00E5BA; 
   color: black;
   padding-left: 3px; 
   padding-right: 3px; 
   width:70px;
}
.bgsmallpunkt >span {
   color: red; 
   font-size: 1rem;
   font-weight: bold;
   padding-left: 3px; 
}
.bgsmalljoker {
   background-image: url("../media/jokergood50.png");
   background-repeat: no-repeat;
   background-position: center left;
   background-size: 18px 18px;
}

/* Vereinslogos in Auswertungen */
.flagimage { 
   width:21px; 
   height:17px;
   vertical-align: middle;
}

.GA, .GB, .GC, .GD, .GE, .GF, .GG, .GH, .GI, .GJ, .GK, .GL, .GSF, .GAF, .GVF, .GHF, .GS3, 
.PBG0, .PBG1, .PBG2, .PBG3, .PBG4, .PBG5, .PBG6, .PBG7, .PBG8, .PBG9, .PBG10, .PBG15
 {
   white-space: nowrap;
   text-align: center;
   font: 80% Helvetica;
   color: #000000;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"] {
   font-size: 0.75rem;
   border-radius: 7px;
   height: 30px;
}
input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled {
   background-color:grey;
   color:#333;
}

/* Select */
select {
   /* remove standard-styles */
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   /* new styles */
   width: calc-size(fit-content, max(100px, size + 20px));
   height: 30px;
   border: solid;
   font-size: 0.75rem;
   box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
   padding: 3px;
   background-color: white;
   background-image: url(../media/selectarrow.png);
   background-size: 21px 14px;
   background-position: right;
   background-repeat: no-repeat;
   border-radius: 7px;
}

a.tooltip {
 background-color: rgba(255, 255, 255, 0);
 position: relative;
 color: black;
 cursor: help;
 text-decoration: none;
}

a.tooltip span {
 display: none;
}

a.tooltip:hover {
 z-index: 1111;
}

a.tooltip:hover span {
   position: absolute;
   display: block;
   top: 0;
   left: 0;
   /* top: -2em;
            left: 4em;
   */
   border: 1px solid white;
   font-weight: normal;
   background-color: #FFFF90;
   color: black;
   padding: 0.2em;
   white-space: nowrap;
}

/* Spezielle Tooltip-Klassen für Menüs (Links, die anstatt "Title" das Attribut "myttip" verwenden) */ 
a[myttip] {
   position: relative;
}
a[myttip]::after {
   content: attr(myttip);
   display: block;
   position: absolute;
   background-color: #404040;
   color: white;
   padding: 1em 2em;
   border-radius: 7px;
   font-size: .75em;
   bottom: 20px;
   left: 80px;
   text-wrap: pretty;
   /* white-space: nowrap; */
   transform: scale(0);
   transition: transform ease-out 250ms,
   bottom ease-out 250ms;
}
a[myttip]:hover::after { 
   transform: scale(1);
   bottom: 100%;
}

/* Klassen für die Farbgestaltung der BL-Tabellenplätze */

.bo1 {
 color: #FFFFFF;
 background: #08645F;
}

.bo2 {
 color: #FFFFFF;
 background: #195B03;
}

.bo3 {
 color: #FFFFFF;
 background: #207b01;
}

.bo4 {
 color: #FFFFFF;
 background: #195B03;
}

.bo5 {
 color: #FFFFFF;
 background: #25A711;
}

.bo6 {
 color: #FFFFFF;
 background: #25A711;
}

.bo7 {
 color: #FFFFFF;
 background: #0FB084;
}

.bo8 {
 background-color: #000000;
 color: #FFFFFF;
}

.bo16 {
 color: #FFFFFF;
 background: #BC8000;
}

.bo17 {
 color: #FFFFFF;
 background: #A02A02;
}

.bo18 {
 color: #FFFFFF;
 background: #A53503;
}

/*und die Formatierung fuerdie Link-Klasse "button-link"*/

.button-link {
   display: inline-block;
   height:fit-content;
   font-size: 0.75rem;
   padding: 6px 3px 3px 3px;
   margin: 5px 0 0 0;
   background-color: var(--fourth-bg-color);
   color: var(--fourth-text-color);
   border:2px solid var(--third-bg-color);
   text-align: center;
   text-decoration: none;
   border-radius: 7px;
}
.button-link:hover {background-color: var(--third-bg-color);
   color: var(--third-text-color);
}

.blink {
 animation-name: animation_blink;
 animation-timing-function: ease-in;
 animation-duration: 1s; 
 animation-iteration-count: infinite;            
}

@keyframes animation_blink {
 0% { opacity: 0; }
 100% { opacity: 1; }    
}

/* Responsive Styling */

@media (max-width: 400px) {
   #headingclass td:nth-child(2) { display: none; } 
}
@media (max-width: 520px) {
   #headingclass td:nth-child(3) { display: none; } 
}