:root {
	--col-bg-odd: rgb(221, 230, 240);
	--col-bg-even: white;
	--col-bg-no: rgb(255, 200, 200);
	--col-bg-yes: lightgreen;
	--col-hl-hard: rgb(255, 223, 59);
	--col-bg: white;
	--panel: white;
	--col-hl-soft: rgb(254, 240, 173);
	--col-yes: #086629;
    --col-no: #C00;
	--col-text: black;
	--col-text-faded: slategray;
	--col-res-ful: rgba(112, 199, 108, 0.5);
	--col-res-hlf: rgba(255, 220, 100, 0.5); 
	--col-res-nul: rgba(255, 100, 100, 0.5);
	--col-body-light: rgb(185, 209, 233);
	--col-body-dark: rgb(92, 126, 171);
}
@media (prefers-color-scheme: dark) {
:root {
    --col-bg-odd: #17181b;
    --col-bg-even: #4a4e59;
    --col-bg-no: rgb(98, 5, 5);
    --col-bg-yes: lightgreen;
    --col-hl-hard: rgb(0, 80, 176);
    --col-bg: #17181b;
    --panel: white;
    --col-hl-soft: rgb(64, 105, 153);
    --col-yes: #39e374;
	--col-no: #ff9595;
    --col-text: #EDEDED;
    --col-text-faded: #C0C0C0;
    --col-res-ful: rgba(112, 199, 108, 0.5);
    --col-res-hlf: rgba(255, 220, 100, 0.5);
    --col-res-nul: rgba(255, 100, 100, 0.5);
    --col-body-dark: rgb(21 35 55);
    --col-body-light: rgb(56 81 114);
}
}
html {
  font-size: 16px;
}

body {
  margin: 0;
	background: var(--col-body-light) linear-gradient(177deg, var(--col-body-light), var(--col-body-dark));
	min-height: 100dvh;
	font-family: "Noto sans", sans-serif;
}

*
{
	padding: 0px;
	margin: 0px;
	color: var(--col-text);	
	text-align: left;
	box-sizing: border-box;
}

table {
	border-collapse: collapse;
}

.container{
    display: grid;
	height: 100dvh;
    grid-template-columns: auto minmax(0, min(1000px, 100dvw - 35em)) auto;
    grid-template-rows: 3.5em auto auto 1fr auto;
	align-content: stretch;
	justify-content: center;
	gap: 0.5em;
	border-radius: 0.4em;
	padding: 0.5rem;
	grid-template-areas: "header header header"
						 "menu menu menu"
					     "left1 main right"
						 "left2 main right"
		                 "footer footer footer";
}

main{
	background-color: var(--col-bg);
	grid-area: main;
	/* max-width: 1400px; */
}
.container > main { padding: 0.2em;}
main:has(table.tables) {
	grid-column: main-start / right-end;
}
main.lonely{
	grid-area: menu;
	grid-row: 3 span;
}

aside{
	background: linear-gradient(177deg, var(--col-bg-even) 0, var(--col-bg-odd) 30em);
	border-left: 0.4em solid var(--col-hl-hard);
}
aside.tables { grid-area: right; padding-left: 0;  }
aside .tables { width: 100%; }

aside.standings{
	grid-area: left1;
	max-height: 50dvh;
	max-width: 15em;
}
aside.standings .hide { display: none; }

aside.standings td:nth-child(2) { text-align: left; }
aside.standings table { width: 100%; }
aside.standings td { 
	padding: 0 0.2em;
	text-align: right;
}
aside.standings tr.own td { font-weight: bold }
aside.standings tr.own { display: table-row !important }
aside.standings tr:nth-child(1n+15){ display: none }
aside.standings.exp tr:nth-child(1n+15){ display: table-row; }

aside.shoutbox{
	grid-area: left2;
	max-height: 80dvh;
	overflow-x: hidden;
	overflow-y: auto;
	max-width: 15em;
}
aside.shoutbox textarea {
	height: 3em;
	width: 100%;
	max-width: 100%;
	max-height: 10em;
	resize: none;
}
aside.shoutbox textarea.exp {
	height: 10em;
}
.shoutbox h2 {
	font-size: 100%;
}
.shoutbox span.date {
	font-size: 60%;
	color: var(--col-text-faded);
	margin-left: 1ex;
}


aside.table{
	grid-area: right;
}
.container > header{
	background-color: var(--col-bg);
	grid-area: header;
	font-size: 1.5em;
	position: relative;
    overflow: visible;
}
.container > *{
	box-shadow: 0 3px 5px rgba(0,0,0,0.3);
	border-radius: 10px;
	padding: 0.4em;
	overflow-y: auto;
}
.container:has(main table.tables) aside.tables { display: none; }

.msg { grid-area: header; }
.msg.notice {
	background-color: var(--col-bg-yes);
	border-left: 0.4em solid green;
}
.msg.failure {
	background-color: var(--col-bg-no);
	border-left: 0.4em solid var(--col-no);
}

main .textsform {
	display: grid;
	grid-auto-rows: auto 1fr;
	height: 100%;
    padding: 0.2em;
}

main .textsform div {
	width: 100%;
	height: 100%;
}

main textarea {
	width: 100%;
	height: 100%;
	resize: none;
}

footer{
	grid-area: footer;
	background-color: var(--col-bg);
	text-align: center;
}
footer span{
	margin: 0 1em;
}

.userinfo{
	display: none;
	position: absolute;
	background-color: var(--col-bg);
	padding: 0.5em;
	right: 1em;
	z-index: 9000;
	box-shadow: 0 0 2em rgba(5,10,20,.5);
	font-size: initial;
	text-align: center;
	border-radius: 0.6em;
}
.seasonswitcher { text-align: center; margin-bottom: 0.2em; }
textarea { background-color: var(--col-bg-even); }
body.user-open .userinfo{
	display: block;
}
main .results { margin: 0 auto; }
main .results tr:nth-child(1) th span {
	display: block;
	padding-right: 1.2em;
	background-repeat: no-repeat;
	background-size: 1em;
	background-position: center right;
	margin: 0 0.3em;
}
main .results tr:nth-child(2) th {
text-align: center;
	background-color: var(--col-hl-hard);
}
main .results tr:nth-child(2n+3) td { background-color: var(--col-bg-even) !important; }
main .results tr:nth-child(2n+2) td { background-color: var(--col-bg-odd) !important; }
main .results tr:nth-child(1n+2) { border-top: 4px solid var(--col-bg); }
main .results tr:nth-child(1n+2) td { padding: 0.2em 0.4em; }
main .results tr.own td { font-weight: bold; }
main .results tr.own td:nth-child(1)::before { content: "\25B6"; padding-right: 1em; }
main .results tr:nth-child(1n+2) td:nth-child(1n+2) { text-align: center; }

main .results .p span {
	margin-left: 0.2em;
	font-size: 80%;
	color: var(--col-text-faded);
}
main .results .p span::before{ content: '('; }
main .results .p span::after{ content: ')'; }

main .results .p.fix {
    color:var(--col-text)
}

main .results .p.p3,
main .results .p.p8,
main .results .p.p7,
main .results .p.p40,
main .results .p.p35 {
	background-color: var(--col-res-ful) !important;
}
main .results .p.p1,
main .results .p.p4,
main .results .p.p5,
main .results .p.p6,
main .results .p.p20,
main .results .p.p25,
main .results .p.p30 {
	background-color: var(--col-res-hlf) !important;
}
main .results .p.p0 {
	background-color: var(--col-res-nul) !important;
}
section.round { overflow-x: auto }
section.round:only-child{
	overflow-y: auto;
	height: 100%;
}
main section.round .crosstable th{
	top: 0;
	position: sticky;
}
main section.round .crosstable td:first-child, 
main section.round .crosstable th:first-child{
	position: sticky;
	left: 0;
	min-width: 2.5em;
}
main section.round .crosstable tr:nth-child(odd) td:first-child
{ background-color: var(--col-bg-even); }
main section.round .crosstable th:first-child,
main section.round .crosstable th:nth-child(2)
{ background-color: var(--col-bg); }
main section.round .crosstable tr:nth-child(even) td:first-child{ background-color: var(--col-bg-odd); }
section.round:only-child h1 { display: none; }
section.round:only-child table caption { display: none; }

section.round .gamelist td { padding: 0.2em 0.4em }
section.round .gamelist tr:nth-child(even) { background-color: var(--col-bg-even); }
section.round .gamelist tr:nth-child(odd) { background-color: var(--col-bg-odd); }
section.round .gamelist td:nth-child(4) { padding-right: 2em; text-align: left; background-position: calc(100% - 0.2em) center; background-repeat: no-repeat; }
section.round .gamelist td:nth-child(3) { text-align: center; }
section.round .gamelist td:nth-child(2) { padding-left: 2em; text-align: right; background-position: 0.2em center; background-repeat: no-repeat;}

section.round .gamelist td:nth-child(3) span:nth-child(1n+2){ margin-left: 0.1em; }
section.round .gamelist td:nth-child(3) span:nth-child(1n+2)::before { content: "("; }
section.round .gamelist td:nth-child(3) span:nth-child(1n+2)::after { content: ")"; }

section.round table.gamelist{
	width: calc(50% - 1em);
	float: left;
	margin: 0.5em;
}
section.round table.gamelist:only-child{
	width: 50%;
	float: none;
	margin: 0.5em auto;
}
section.round table:only-child caption, section.round h1{
	font-size: 1.4em;
	font-weight: normal;
}
section.round table.crosstable{ margin: 0 auto; }

.crosstable th span {
	display: flex;
	background-repeat: no-repeat;
	height: 4em;
	background-position: center 0.2em;
	background-position-x: center;
	background-position-y: calc(50% - 0.5em);
	background-size: 2em;
	font-size: 80%;
  	align-items: flex-end;
  	justify-content: center;
}
.crosstable .na { background-color: var(--col-body-light) }
.crosstable .date { font-size: 70%; color: var(--col-text-faded) }
.crosstable td { text-align: center; padding: 0.3em; }
.crosstable td:first-child {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1.5em;
}
.crosstable td:nth-child(2) {
	padding: 0.3em 0.2em 0.3em 0.2em;
	white-space: nowrap;
	text-align: right;
}
.crosstable tr:nth-child(even){	background-color: var(--col-bg-odd); }
.crosstable tr:nth-child(odd){	background-color: var(--col-bg-even); }
.crosstable th:nth-child(1n+3), .crosstable td:nth-child(1n+3) { border-left: 2px solid var(--col-hl-hard); }

section.round th { font-variant: small-caps; background-color: var(--col-hl-hard); }
section.round th:empty { background-color: transparent; }
section.round .tables td:nth-child(1) .rank { text-align: right; padding-left: 0.2em; display: inline-block; margin-right: 2em; }
section.round .tables:only-child td:nth-child(1) .rank { margin-right: 2.5em; }
section.round .tables:only-child td:nth-child(1) .rank { margin-right: 0; }
aside.tables { overflow-y: auto; }
aside section.round .tables:only-child td:nth-child(1) .rank { width: 1.5em; }
aside section.round .tables td:nth-child(1) .rank { width: 1em; }
aside section.round .tables td:nth-child(1) { background-position-x: 1.5em; }
aside section.round .tables:only-child td:nth-child(1) { background-position-x: 3.2em; }
aside section.round .tables td:nth-child(1n+2) { padding: 0.2em; }
aside section.round .tables tr.self { background-color: var(--col-hl-hard) !important; }
aside section.round .tables tr.opp { background-color: var(--col-hl-soft) !important; }
aside section.round .tables:nth-child(1n+2) { margin-top: 1em; }
section.round .tables caption { margin-bottom: -1em; }
main section.round .tables:only-child td:nth-child(1) .rank { width: 2em; }
main section.round .tables:only-child td:nth-child(1) .short { text-align: left; display: none; }
main section.round .tables td:nth-child(1) .short { text-align: left; display: inline-block; }
main section.round .tables:only-child td:nth-child(1) .long { text-align: left; display: inline-block; }
main section.round .tables td:nth-child(1) .long { text-align: left; display: none; }
main section.round .tables:only-child td:nth-child(1n+2) { padding: .2em 1em; }
section.round .tables td:nth-child(1) {
	background-repeat: no-repeat;
	background-size: 1.5em;
	background-position-x: 1.5em;
	background-position-y: center;
	padding-bottom: .2em; 
	padding-right: .4em;
	white-space: nowrap;
} 
main section.round .tables td:nth-child(1) { width: 55%; }
main section.round .tables:only-child td:nth-child(1) { background-position-x: 4em; } 
section.round .tables td:nth-child(1n+2),
section.round .tables th:nth-child(1n+2){ text-align: center; }
section.round .tables tbody tr:nth-child(odd){ background-color: var(--col-bg-odd); }
section.round .tables tbody tr:nth-child(even){ background-color: var(--col-bg-even); }
/* section.round .tables tr:nth-child(1) th:nth-child(1n+1) { border-right: 2px solid var(--col-hl-hard); }
section.round .tables tr:nth-child(1n+2) th:nth-child(1n+2),
section.round .tables td:nth-child(1n+2) { border-left: 2px solid var(--col-hl-hard); }
main section.round .tables thead tr:nth-child(2) th:nth-child(7n+1),
main section.round .tables td:nth-child(7n+8) { border-right: 2px solid var(--col-hl-hard); } */
main section.round .tables td:first-child { border: 2px solid transparent }
main section.round .tables { width: calc(50% - 2em); float: left; margin: 1em; }
main section.round .tables thead tr:nth-child(1){ display: none; }
main section.round .tables td:nth-child(1n+9),
main section.round .tables td:nth-child(1n+9),
main section.round .tables thead tr:nth-child(2) th:nth-child(1n+9),
main section.round .tables thead tr:nth-child(1) th:nth-child(1n+3){ display: none }
.tables .h,
.tables .g { display: none !important }

main section.round .tables:only-child { width: auto; float: none; margin: 0 auto; }
main section.round .tables:only-child thead tr:nth-child(1){ display: table-row; }
main section.round .tables:only-child td:nth-child(1n+9),
main section.round .tables:only-child td:nth-child(1n+9),
main section.round .tables:only-child thead tr:nth-child(2) th:nth-child(1n+9),
main section.round .tables:only-child thead tr:nth-child(1) th:nth-child(1n+3){ display: table-cell }

.po_g { border-right-color: darkgreen !important }
.po_lg { border-right-color: lightgreen !important }
.po_y { border-right-color: #f5ff00 !important }
.po_o { border-right-color: orange !important }
.po_r { border-right-color: red !important }

section.round .tables .prank { display: none }
section.round .tables:only-child .prank { 
	font-size: 80%;
	margin-right: 2.5em;
	width: 1.5em;
	text-align: center;
	display: inline-block;
} 
section.round .tables .prank.na { display: none; }
section.round .tables .prank.eq { color: var(--col-text); }
section.round .tables .prank.dn { color: var(--col-no); }
section.round .tables .prank.up { color: var(--col-yes); }
section.round .tables .prank.eq::before { content: '='; }
section.round .tables .prank.dn::before { content: '\25BC'; }
section.round .tables .prank.up::before { content: '\25B2'; }


.plain { white-space: pre-wrap; padding: 0.2em; }
.wrapper { 
	max-width: 1000px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}
.sbets { width: 100% }
.sbets .sbname { text-align: center }
.sbets th {
	text-align: center;
	position: sticky;
	top: 0;
	background-color: var(--col-bg);
}
.sbets .sum {
	grid-column: 2;
	padding: 0 0.3em;
	text-align: center;
    position: sticky;
    bottom: 0;
    background-color: var(--col-bg);
}
main table tr:first-child th:first-child {
    z-index: 1000;
}
.sbets .sum span { white-space: nowrap; display: inline-block; }
.sbets .sum span.fix { margin-left: 0.2em; }

.sbets .team { display: inline; margin-right: 0.3em;}
.sbets .active { text-align: center; } 

.sbets .yes .points::before { content: "("; }
.sbets .yes .points::after { content: ")"; }

.sbets li{ list-style-type: none; }

.sbets .yes .team { color: var(--col-yes); }
.sbets .no .team { color: var(--col-no); }

.sbets .sum > * { text-align: center; }
.sbets .sum .all:has(+ span)::before { content: "zurzeit "; }
.sbets .sum .all:has(+ span)::after { content: ", "; }
.sbets .sum .all:only-child::after { content: " Punkte"; }
.sbets .sum .fix::before { content: "davon "; }
.sbets .sum .fix::after { content: " fix"; }

.sbets li.fix .team, .sbets td:first-child li.fix{
	font-weight: bold;
}
.sbets .sbname, .sbets .sbname td:first-child { background-color: var(--col-hl-hard); padding: 0 0.2em; }
.sbets .sbname > * { text-align: center; }
.sbets td:first-child, .sbets th:first-child {
	position: sticky;
	left: 0;
	background-color: var(--col-bg);
}
.sbets th:nth-child(1n+2), td:nth-child(1n+2){ scroll-snap-align: center; }
.sbets .own { background-color: var(--col-hl-soft); }

.sbets .team, .sbets td:first-child { white-space: nowrap; }
.sbets li{
	list-style-type: none;	
	text-align: center;
	padding: 0.1em 0.2em;
}
.sbets li.yes {
	color: var(--col-yes);
}
.sbets li.no {
	color: var(--col-no);
}
.sbets li.fix .team{
	font-weight: bold;
}

.gdshift {
	text-align: center;
	margin-bottom: 0.2em;
}
.gdshift form {
	display: inline;
	margin: 0 1em;
}
.gameform table { margin: 0 auto; }

.gameform tr:nth-child(1n+2){
	border-top: 4px solid var(--col-bg);
}
.gameform tr td:nth-child(1){
    padding: 0 1em;
}
.gameform td:nth-child(5){ display: table-cell; }
.gameform td:nth-child(6){ display: none; }
.gameform tr:nth-child(even) { background-color: var(--col-bg-even); }
.gameform tr:nth-child(odd) { background-color: var(--col-bg-odd); }
.gameform tr td:nth-child(1):empty{ background-color: var(--col-bg);}
.gameform td {
    height: 40px;
    background-clip: padding-box;
    background-size: 3em;
    background-repeat: no-repeat;
	/* padding: 4px 0; */
	text-wrap: nowrap;
}
.gameform td:nth-child(4) { text-align: left; background-position-x: calc(100% - 1em); background-position-y: center; }
.gameform td:nth-child(3) { text-align: center; }
.gameform td:nth-child(2) { text-align: right; background-position-x: 1em; background-position-y: center;}

.gameform td:nth-child(2) span, .gameform td:nth-child(4) span{
    background-color: transparent;
    display: block;
	font-size: 1.2em;
}

.gameform td:nth-child(4) span { padding-right: 0; margin: 0 5em 0 1em; border-radius: 0px 20px 20px 0px; text-align: left; }
.gameform td:nth-child(2) span { padding-left: 0; margin: 0 1em 0 5em; border-radius: 20px 0px 0px 20px; text-align: right; }

.gameform tr.fix input[type="tel"]{
    background-color: var(--col-bg-no);
	border: 4px solid var(--col-bg-no);
}
.gameform span.up, .gameform span.down {
	user-select: none;
	-webkit-user-select: none;
	cursor: pointer;
	font-size: 1.5em;
}
.gameform span.up { margin-right: -0.1em; }
.gameform span.down { margin-left: -0.1em; }
.gameform span.sep {
	padding-left: 0.2em; 
	padding-right: 0.2em;
	font-size: 1.8em;
	font-weight: bold;
}

.gameform input[type="tel"]:focus{
    border-color: var(--col-text-faded);
}
.gameform input[type="tel"]{
    border: 4px solid var(--col-hl-soft);
	font-family: "Google Code Sans", monospace;
    background-color: var(--col-bg);
    color: var(--col-text);
    display: inline-block;
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
	width: 1em;
}
input { outline: none; }
input[type="submit"], button[type="submit"], .btn {
	border-radius: 0.5em;
	border: none;
	font-size: 1em;
	padding: 0.3em 1em;
	background: linear-gradient( 180deg, var(--col-bg-even) 45%, var(--col-bg-odd) 70%);
	margin: 0.5em auto;
	display:block;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 0.2em 0.4em rgba(0,0,0,0.4);
	width: max-content;
}
input[type="submit"]:hover, button[type="submit"]:hover, .btn:hover {
    box-shadow: 0 0.1em 0.5em rgba(0,0,0,0.4);
    translate: 0 0.1em;
}
input[type="text"],input[type="email"],input[type="password"]{
	font-size: 1em;
	border: none;
	border-bottom: 0.2em solid slategray;
	margin: 0.2em;
	padding: 0.5em 1em 0 1em;
	background-color: var(--col-hl-soft);
	border-radius: 0.4em;
}
input[type="text"]:focus,input[type="email"]:focus,input[type="password"]:focus{
	border-color: var(--col-hl-hard);
}
input[type="text"]:has(+ul),input[type="email"]:has(+ul),input[type="password"]:has(+ul){
	border-color: var(--col-no);
}
.profile form, .lonely form{
	display: grid;
	grid-template-columns: [lbl] auto [inp] auto;
	justify-content: center;
}
.profile label, .lonely label {
	grid-column: lbl;
	white-space: nowrap; 
	text-align: right;
	padding-top: 0.4em;
	margin-right: 1em;
}
.profile input, .lonely input { grid-column: inp; }
.profile input[type="submit"], .lonely button[type="submit"], .lonely input[type="submit"] { grid-column: span 2; }
.profile ul, .lonely ul { grid-column: inp; }
.profile li, .lonely li {
	color: var(--col-no);
	list-style: none;
}
main:has(form.confirm){
	grid-area: menu;
}
input[type="submit"], button[type="submit"]{
	font-weight: bold;
}
label[for="remember_me"]{
	grid-column: span 2;
	margin: 0.2em auto;
}
select { font-size: 1em; background-color: var(--col-bg-even); }

.gameform .final, .gameform { text-align: center; }

/* Punktestand */
main table.standings { margin: 0 auto; }
main .standings tr:nth-child(even) { background-color: var(--col-bg-even); }
main .standings tr:nth-child(odd) { background-color: var(--col-bg-odd); }
main .standings tr.own { background-color: var(--col-hl-soft); }
main .standings tr.own td { font-weight: bold; }
main .standings tr.own td:nth-child(1)::before { content: "\25B6"; padding-right: 1em; }
main .standings tr td:nth-child(1):empty{ background-color: var(--col-bg);}
main .standings.man_sort tr > :nth-child(1) { display: none;}
main .standings.man_sort tr > :nth-child(9) { display: none;}
main .standings td, .standings th{
    padding: 0.2em 0.5em;
	white-space: nowrap;
}
main .standings th a { text-decoration: none; }
main .standings td:nth-child(1) { text-align: right; }
main .standings td:nth-child(2) { text-align: left; }
main .standings td:nth-child(1n+3) { text-align: center; }
main .standings td:nth-child(9) { text-align: right; }

main .standings td:nth-child(2),
main .standings td:nth-child(4),
main .standings td:nth-child(5),
main .standings td:nth-child(8)
{ border-right: 2px solid var(--col-hl-hard); }

main .standings th:empty {
    background-color: var(--col-bg);
}

main .standings th { background-color: var(--col-hl-hard); text-align: center; font-variant: all-small-caps; line-height: 0.6;}
main .standings th.down a::after { content: "\25BC"; padding-left: 1em; text-decoration: none; }
main .standings th.up a::after { content: "\25B2"; padding-left: 1em; text-decoration: none; }

.standings td:first-child:not(:empty)::after { content: '.'; }

.user-btn {
	float: right;
}
.user-btn span {
	display: inline-block;
	width: 2.5em;
	height: 2.5em;
	cursor: pointer;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23333'>\
        <circle cx='32' cy='20' r='12'/>\
        <path d='M32 36c-14 0-24 8-24 18v10h48V54c0-10-10-18-24-18z'/>\
      </svg>");
}

/* CSS */
/* 1) Verstecke die native Checkbox visuell, aber behalte sie fokusierbar/bedienbar */
.real-checkbox {
  /*position: absolute;
  left: -9999px;  */  /* außerhalb des Layouts; bleibt fokusierbar */
  /* alternativ: clip/clip-path für bessere a11y: */
  position:absolute;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
  
}

/* 2) Label als sichtbare "Checkbox" mit Grafik */
.real-checkbox + label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Pseudo-Box links vom Text */
.real-checkbox + label::before{
  content: "";
  display: inline-block;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform .12s ease, opacity .12s ease;
  /* Default (unchecked) Grafik: z.B. ein leeres Kästchen PNG/SVG */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><rect x='2' y='2' width='24' height='24' rx='4' stroke='%23888' stroke-width='2' fill='none'/></svg>");
}

/* 3) Wenn das Input checked ist: geänderte Grafik (Haken, farbig etc.) */
.real-checkbox:checked + label::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><rect x='0' y='0' width='28' height='28' rx='6' fill='%23007bff'/><path d='M7 15 L12 20 L21 9' stroke='%23fff' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  transform: scale(1.02);
}

/* 4) Fokus sichtbar machen (wichtig für Tastaturbenutzer) */
.real-checkbox:focus + label::before,
.real-checkbox:focus-visible + label::before {
  outline: 3px solid rgba(0,123,255,.25);
  outline-offset: 3px;
  border-radius: 6px;
}

/* optional: disabled */
.real-checkbox:disabled + label {
  opacity: .5;
  cursor: not-allowed;
}

  /* button */
  .menu-btn{
    width:44px;height:40px;border:0;background:transparent;color:inherit; cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
  }
  .menu-btn:focus{ outline:3px solid rgba(255,255,255,.14); border-radius:8px; }

  .burger-lines{ position:relative; width:3em; height:0.5em; background:var(--col-text); transition:transform .25s ease; }
  .burger-lines::before, .burger-lines::after{ content:""; position:absolute; left:0; width:100%; height:100%; background:inherit; transition:transform .25s ease, top .25s ease, opacity .2s; }
  .burger-lines::before{ top:-1em; }
  .burger-lines::after{ top:1em; }

  /* open state class */
  .menu-btn[aria-expanded="true"] .burger-lines{ transform:rotate(45deg); }
  .menu-btn[aria-expanded="true"] .burger-lines::before{ transform:rotate(90deg); top:0; }
  .menu-btn[aria-expanded="true"] .burger-lines::after{ opacity:0; transform:translateX(10px); }

  /* offcanvas panel */
@media(max-width:767px){
  .nav-panel{ display:none; position:fixed; top:0; right:-400px; width:320px; height:100dvh; background:var(--col-bg); box-shadow:-18px 0 40px rgba(5,10,20,.2) !important;
    padding:20px 20px; transition:right .35s cubic-bezier(.2,.9,.2,1); display:flex; flex-direction:column; gap:6px; z-index:1000;
  }
}
  .nav-panel a{
	  text-decoration:none;
	  color: var(--col-text);
	  font-weight:600;
	  padding:10px 8px;å
	  border-radius:0;
	  white-space: nowrap;
	  line-height: 1.2em;
  }
  .nav-panel a.active { background-color: var(--col-hl-hard); }
  .nav-panel .close-hint{ margin-top:8px; font-size:13px; color:var(--col-text-faded); }
.nav-panel a:hover { background-color: var(--col-hl-soft); }

  .nav-open .nav-panel{ right:0; }

  @media(min-width:767px){
    .menu-btn{ display:none; }
    .nav-panel{ background-color: var(--col-bg);
	grid-area: menu;
	padding: 0.4em;
	line-height: 1.8em;
}
    .nav-panel a{ color:var(--col-text); padding:6px 6px; }
  }

@media (max-width: 1400px) {
.container{
	grid-template-columns: auto 1fr;
	grid-template-areas: "header header"
						 "menu menu"
					     "left1 main"
						 "left2 main"
		                 "footer footer";
}
	aside.shoutbox { display: none; }
	aside.standings { display: none; }
	aside.tables { grid-area: left1; grid-row: 2 span; }
	.container:has(main table.tables) aside.shoutbox { display: block; grid-area: left2; }
	.container:has(main table.tables) aside.standings { display: block; grid-area: left1; }
	main:has(table.tables) { grid-column: 2; }
}
@media (max-width: 1179px) {
.container{
	grid-template-columns: 100%;
    grid-template-rows: 3.5em auto 1fr auto;
	grid-template-areas: "header"
						 "menu"
					     "main"
		                 "footer";
}
	aside.shoutbox { display: none !important;}
	aside.standings { display: none !important; }
	aside.tables { display: none !important; }
	main.lonely { grid-row: 2 span; }
	main:has(table.tables) { grid-column: 1; }
}
@media (max-width: 767px) {
.container{
	grid-template-columns: 100%;
    grid-template-rows: 3.5em 1fr auto;
	grid-template-areas: "header"
					     "main"
		                 "footer";
}

}

/* =====================================
   📱 Smartphones (alle modernen Geräte)
   ===================================== */
/* Target Samsung Galaxy M51 and similar devices */
@media only screen 
  and (max-width: 767px){
	
  body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
	  height: 100dvh;
	  font-size: 18px;
  }
	  /* body:has(.gameform){ touch-action: none; } */
	.container > header{ display: block; border-radius: 0;}
	header > span { display: none; }
	footer{ display: none; grid-area: none; border-radius: 0;}
.container{
	display: block;
	padding: 0;
	height: 100dvh;
}
	.container > * { box-shadow: none; border-radius: 0 !important; }
	.user-btn span { height: 3em; width: 3em; }
	.container > main{
		padding: 0 !important;
		padding-bottom: 0.2em !important;
		border: none;
		width: 100dvw;
	}
	
	aside { display: none }
  .gameform table {
    width: 100dvw;
  }
.gameform tr td:nth-child(1){
    display:none;
}
.gameform td:nth-child(4) { text-align: left; background-position-x: calc(100% + 1em); background-position-y: center; padding-right: 1em; }
.gameform td:nth-child(3) { text-align: center; }
.gameform td:nth-child(2) { text-align: right; background-position-x: -1em; background-position-y: center; padding-left: 1em; }

.gameform td {
    background-size: 3em;
	padding: 0.1em 0;
}
.gameform td:nth-child(2) span, .gameform td:nth-child(4) span{
    padding: 0.2em 0;
	font-size: 1em;
}
.gameform td:nth-child(4) span {
	padding-right: 0; margin: 0; border-radius: 0; text-align: left;
	/*background: linear-gradient(270deg,rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);*/
}
.gameform td:nth-child(2) span {
	padding-left: 0; margin: 0; border-radius: 0; text-align: right; 
	/*background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0) 100%);*/
}
	  .gameform td:nth-child(5){ display: none; }
	  .gameform td:nth-child(6){ display: table-cell; }
.gameform span.up { display: none; }
.gameform span.down { display: none; }
.gameform span:nth-child(3) { padding-left: 0; padding-right: 0; }
.gameform span.sep {
	padding-left: 0; 
	padding-right: 0;
}

	  /*
.gameform td:nth-child(4) span { padding-right: 2em; margin: 0 1em 0 0.5em; border-radius: 0px 20px 20px 0px; text-align: left; }
.gameform td:nth-child(2) span { padding-left: 2em; margin: 0 0.5em 0 1em; border-radius: 20px 0px 0px 20px; text-align: right; }
*/
	.gameform tr:nth-child(1n+2){
		border-top: 0;
	}
	.sbets .shrink { display: none; }

	main .standings { width: 100dvw; }
	main .standings th { display: none; }

	main .standings td:nth-child(1),
	main .standings td:nth-child(2),
	main .standings td:nth-child(4){ border-right: none; }

	main .standings td:nth-child(3),
	main .standings td:nth-child(5),
	main .standings td:nth-child(6),
	main .standings td:nth-child(7),
	main .standings td:nth-child(8){ display: none; }
	
	main .results { min-width: 100dvw; }
	main .results tr:nth-child(1) th:nth-child(1),
	main .results td:nth-child(1){ position: sticky; left: 0; }
	main section.round { width: 100dvw; }
	main section.round { overflow-x: auto }
	main section.round h1, main section.round caption { text-align: center }
	main section.round .gamelist, main section.round .gamelist:only-child { margin: 1em 0; width: 100%; }
	main section.round .gamelist td:first-child{ display: none }

	
	main section.round .tables {
		width: 100dvw !important;
		background-color: var(--col-bg);
		margin: 0;
		margin-bottom: 1em;
	}
	main section.round .tables:only-child td:nth-child(1) .short { display: inline-block }
	main section.round .tables:only-child td:nth-child(1) .long { display: none }

main section.round .tables:only-child td:nth-child(1n+9),
main section.round .tables:only-child td:nth-child(3),
main section.round .tables:only-child td:nth-child(4),
main section.round .tables:only-child td:nth-child(5),
main section.round .tables:only-child td:nth-child(6),
main section.round .tables:only-child td:nth-child(7),
main section.round .tables:only-child thead tr:nth-child(2) th:nth-child(1n+9),
main section.round .tables:only-child thead tr:nth-child(2) th:nth-child(3),
main section.round .tables:only-child thead tr:nth-child(2) th:nth-child(4),
main section.round .tables:only-child thead tr:nth-child(2) th:nth-child(5),
main section.round .tables:only-child thead tr:nth-child(2) th:nth-child(6),
main section.round .tables:only-child thead tr:nth-child(2) th:nth-child(7),
main section.round .tables:only-child thead tr:nth-child(1) { display: none }

	main .results tr:nth-child(1n+2) td {
		padding: 0.2em 0.4em;
		font-size: 90%;
	}
main .results tr.own td:nth-child(1)::before { content: ""; padding-right: 0;  !important }
.profile form, .lonely form{
	grid-template-columns: [inp] auto;
}
	.profile label, .lonely label{ grid-column: inp; text-align: left; }
	.msg { border-radius: 0; }
	.plain { padding: 0.2em; }
}

    .unsaved-modal.hidden {
        display: none;
    }
    .unsaved-modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
    }
    .unsaved-modal-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
    }
    .unsaved-modal-dialog {
        position: relative;
        max-width: 420px;
        margin: 10% auto;
        padding: 20px;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        z-index: 10000;
    }
    .unsaved-modal-actions {
        margin-top: 15px;
        text-align: center;
    }
    .unsaved-modal-actions button {
        margin-left: 10px;
		display: inline;
    }