:root {
	--background: white;
	--bg-content: #eeeeee;
	--accent-1: #c52f2b;
	--accent-2: white;
	--bg-head: var(--accent-1);
	--fg-head: var(--accent-2);
	--fg-text: black;
	--bg-platz: #bbbbbb;
	--fg-platz: var(--accent-2);
	--border-head: solid 1px color-mix(in srgb, var(--bg-head), white 20%);
	--bg-sub: color-mix(in srgb, var(--bg-head), gray 40%);
	--bg-sub2: color-mix(in srgb, var(--bg-alt), black 20%);
	--fg-sub: white;
	--bg-box: color-mix(in srgb, var(--bg-content) 50%, white);
	--bg-alt: color-mix(in srgb, var(--bg-box), black 15%);
	--bg-hover: color-mix(in srgb, var(--bg-head), black 40%);
}

body {
	margin-top: 0.5 ex;
	padding:0;
	font-family:Arial, Tahoma, sans-serif;
	font-size:13px;
	background: var(--background);
}

h1 {
	margin:0 0 10px 0;
}

ul {
	margin:0;
	padding:0;
	list-style:none;
}

a {
	color: var(--fg-text);
}

.topbox a {
	color: var(--fg-head);
	text-decoration: none;
}

img {
	border:0;
}

img.wettkampfort {
	background: lightblue;
}

.logo img {
	height: 40px;
	width: 250px;
	display: none;
}

.logo a {
	text-decoration: none;
}

.ttinhessen, .bundesliga {
	color: var(--accent-1);
	font-size: 250%;
	height: 100%;
	font-variant: small-caps;
}

.bundesliga {
	display: none;
}


.horizontal li {
	display:inline;
	margin:0 5px 0 5px;
}

.main {
	overflow:hidden;
	width: 1320px;
	margin:0 auto;
}

/*
.header {
	overflow:hidden;
	width:976px;
    display:inline;
}

.logo {
	padding: 5px 5px 0 0;
	float:left;
}

.seasonselect {
	text-align:right;
}*/

.header {  display: grid;
  grid-template-columns: 3fr 2fr 1fr;
  grid-template-rows: min-content;
  gap: 1px 1px;
  grid-auto-flow: row;
  grid-template-areas:
    "logo service-menu seasonselect";
}

.logo {
  justify-self: start;
  align-self: start;
  grid-area: logo;
}

.service-menu {
  justify-self: end;
  align-self: start;
  grid-area: service-menu;
}

.seasonselect {
  justify-self: end;
  align-self: start;
  grid-area: seasonselect;
  padding-top: 1ex;
}


.content_holder{
	overflow:hidden;
	y-width:978px;
}

.content {  display: grid;
  grid-template-columns: 1fr max-content;
  grid-template-rows: min-content min-content 1fr;
  gap: 1px 3em;
  grid-auto-flow: row;
  grid-template-areas:
    "breadcrumb breadcrumb"
    "mainarea sidebarright"
    "news sidebarright";
}


.mainarea { grid-area: mainarea; }

.sidebarright { grid-area: sidebarright; }

.news { grid-area: news; }

.content {
	overflow:hidden;
}

.breadcrumb {
	overflow:hidden;
    margin: 3px 0 10px 0;
    font-size:10px;
    font-weight:bold;
    grid-area: breadcrumb; 
    padding: 8px;
    background: var(--bg-head);
    display: none;

}

.breadcrumbitem {
	display:inline-block;
    vertical-align:middle;
}

.footer {
	overflow:hidden;
	x-width:976px;
	margin:20px 0 20px 0;
	font-size:10px;
}

.menu {
	overflow:hidden;
}

.menu ul {
	overflow:hidden;
	padding:0 0 0 0px;
}

.menu ul li {
	float:left;
	margin-right:3px;
	padding:0 3px 0 3px;
	
	font-weight:bold;
	
	width:125px;
	text-align:center;
	font-size:12px;
	line-height:30px;
		
	background-color: var(--bg-head);
	
	border: var(--border-head);
}

.menu ul li:hover {
	background-color:var(--bg-hover);
}

.menu ul li a {
	color: var(--fg-head);
	text-decoration:none;
}

.topbox {
	font-variant: small-caps;
	padding:5px;
	background-color: var(--accent-1);
	color: var(--fg-head);
	font-weight:bold;
}

.topbox.sidehead {
	font-size: 150%;
	opacity: 0.85;
	text-align: center;
}


.bottombox a {
	text-decoration: none;
	color: var(--fg-text);
}

.bottombox.sidebottom .textright a{
	color: var(--fg-head);
}

.bottombox.mainleft .textright a{
	color: var(--fg-text);
}

.mainright {
	margin-left:225px;
}

/* 
.mainleft {
	margin-right:225px;
}
*/


.sidebarleft {
	x-float:left;
	x-width:200px;
}

.sidebarright {
	x-float:right;
	x-margin-right:15px;
	x-width:200px;
}

.sidebottom {
	padding:5px 10px 5px 10px ;
	y-width:200px;
	background: var(--accent-1);
}

.textright {
	text-align:right;
}

.textcenter {
	text-align:center;
}

.padding5 {
	padding:5px;
}

.verbandbox {
	display:inline-block;
	vertical-align:top;
	y-width:226px;
	margin-right:9px;
	margin-bottom:10px;
}

.verbandbottom {
	padding:5px;
	y-width:214px;
}

.sportler {
	display:inline-block;
	vertical-align:top;
	border:1px solid #ff6600;
	width:225px;
/*	height:100px; */
	margin-bottom:3px;
	padding:5px;
}

.sportler img {
	width: 37px;
	height: 50px;
}

.team {
	border:1px solid #ff6600;
	width:707px;
	margin-bottom:3px;
	padding:5px;
}

.fleft {
	float:left;
}



.tramptable {
	border:0;
	width: 100%;
	border-spacing: 0 6px;
	margin-left: 0px;
}

.tramptable tr.tramphead1  {
	background-color: var(--bg-sub);
	color: var(--fg-sub);
}

.tramptable:not(.pokal):not(.wkplan) tr.tramphead1  {
	display: none;
}
.tramptable.pokal tr.tramphead1  {
	background: var(--bg-sub);
}

.tramptable.wkplan tr.tramphead1 {
	background: var(--bg-sub);
}
.pokal {
	margin-top: 0.75em;
}
tr.tramphead2 {
	background-color: var(--bg-sub2);
	font-weight:bold
}

.tramptable tr:not(.tramphead2) {
	background: var(--bg-content);
}

.tramptable tr .platz {
	background: var(--bg-platz);
	text-align: center;
	color: var(--fg-platz);
}

.tramptable tr .name {
	display: none;
}

.tramptable td.vereinslogo {
	text-align: center;
}

.tramptable img.vereinslogo {
        height: 22px;
}


.tramptable td {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 4px;
	padding-right: 4px;
}

.tramptable td.durchgang {
	color: var(--accent-1);
}

.button {
	border:1px solid #ff6600;
	background-color:#FFE48D;
	font-weight:bold;
}

.textleft {
    text-align:left;
}

/**************************************/
/***	start new stuff 04.02.19	***/
/**************************************/

/* Service Menu */

/*.service-menu {
	float:left;
	width:300px;
	margin: 0px 0px 0px 200px;
}*/

.service-menu ul {
	list-style-type:none;
}

.service {
	float:left;
	font-size:14px;
}

.service a {
	display:block;
	padding:5px;
	text-decoration: none;
	color: var(--accent-1);
}

* {
	outline:none;
}

/*
.seasonselect {
	float:right;
	margin:4px 0px 0px 0px;
}
*/

.menu a {
	display:block;
}

/**************************************/
/***	end new stuff 04.02.19		***/
/**************************************/


.chessboard tr:nth-child(odd) td:nth-child(odd),
.chessboard tr:nth-child(even) td:nth-child(even) {
	  background-color: #ffe48d; 
}

.chessboard tr:nth-child(odd) td:nth-child(even),
.chessboard tr:nth-child(even) td:nth-child(odd) {
	  background-color: #ffffd0;
}

.chessboard .tramphead1 td,
.chessboard td.tramphead1 {
	background-color: #ff6600 !important;
}

.welcome {
	display: none;
}

.article {
     width: 100% !important;
     border-bottom: none !important;
     padding:5px;
     background: var(--bg-content);
     margin-top: 1em;
}

.article h3 {
    margin-top: 2px;
}

div.wettkampfort {
  position: relative;
  display: inline-block;
}

.tooltip-text {
  visibility: hidden;
  background-color: var(--fg-text);
  color: var(--background);
  text-align: center;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
  bottom: 100%; /* Position above the image */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

div.wettkampfort:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}


ul.statistiken li {
	background: var(--bg-content);
	padding: 5px;
	margin-bottom: 3px;
}

.pokalwertung table tr td:nth-child(1) {
	background: var(--bg-platz);
	color: var(--fg-platz);
	text-align: center;
}

.tabelle .tramptable .name {
	display: table-cell;
}

.seite {
	background: var(--bg-content);
	padding: 4px;
}

/* Hamburger Icon */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 15px 15px 15px 10px;
    gap: 5px;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: var(--fg-text);
    border-radius: 2px;
}
/* Responsive Menu */
#menu-toggle {
    display: none;
}


.neueste-ergebnisse .container {  
  display: grid;
  background: var(--bg-content);
  margin-top: 6px;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 4px;

  grid-template-columns: 6em 9em 1fr 13em;
  grid-template-rows: min-content;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "datum liga verein punkte";
}

.neueste-ergebnisse .datum { grid-area: datum; }

.neueste-ergebnisse .liga { grid-area: liga; }

.neueste-ergebnisse .verein { grid-area: verein; }

.neueste-ergebnisse .punkte {
	grid-area: punkte;
	justify-self: center;
}

li.dtb {
	display: none;
}

@media (max-width: 730px) {
    .neueste-ergebnisse .container {  
	  grid-template-columns: 5em 1fr 13em;
	  grid-template-rows: min-content min-content;
	  grid-template-areas:
	    "datum  liga   punkte"
	    "verein verein verein";
    }
    .neueste-ergebnisse .verein {
	    font-weight: bold;
	    padding-top: 5px;
	    padding-bottom: 5px;
    }
}

@media (max-width: 430px) {
	.tramptable td.vereinslogo {
		display: none;
	}
}

@media (max-width: 350px) {
    .neueste-ergebnisse .container {  
	  grid-template-columns: 5em 1fr;
	  grid-template-rows: min-content min-content min-content;
	  grid-template-areas:
	    "datum  liga  "
	    "verein verein"
	    "punkte punkte";
    }
    .neueste-ergebnisse .punkte {
	    justify-self: start;
    }
}



@media (max-width: 1000px) {

	.header {
		padding-left: 50px;
	}

	.content {
		grid-template-columns: 1fr;
		grid-template-rows: min-content min-content min-content min-content;
		gap: 1px 3em;
		grid-auto-flow: row;
		grid-template-areas:
		    "breadcrumb"
		    "mainarea"
		    "sidebarright"
		    "news";
	}
	.header {
  		grid-template-columns: 1fr ;
  		grid-template-rows: min-content min-content min-content;
  		grid-template-areas:
    		    "logo"
		    "service-menu" "seasonselect";
	}

	nav.menu {
		position: absolute;
		top: 2px;
		left: 2px;
	}

            nav.menu ul {
                display: none;
                flex-direction: column;
		padding: 20px;
		background: #ffffffdd;
            }


            nav.menu li {
                border-top: 1px solid #444;
		font-size: 150%;
		width: 100%;
		padding: 0.7em;
            }

            .hamburger {
                display: flex;
            }

            #menu-toggle:checked ~ #menu-list {
                display: flex;
            }

	.seasonselect {
		padding-top: 1px;
		padding-bottom: 3px;
	}


}


@media (max-width: 1320px) {
	.main {
		width: 98%;
	}
}