/* common */

:root {
	--header-height: 4rem;
	--footer-height: 4rem;
	--content-header-height: 6rem;
	--content-footer-height: 3rem;

	--page-bgr-color: #000000a0;
	
	--branding-color1-opaque: #d5374e;
	--branding-color1-transparent-low: #d5374ee0;
	--branding-color1-transparent-medium: #d5374ea0;
	--branding-color1-transparent-high: #d5374e40;
	
	--branding-color2-opaque: #ffffff;
	--branding-color2-transparent-low: #ffffffe0;
	--branding-color2-transparent-medium: #ffffffa0;
	--branding-color2-transparent-high: #ffffff40;
	
	--branding-color3-opaque: #000000;
	--branding-color3-transparent-low: #000000e0;
	--branding-color3-transparent-medium: #000000a0;
	--branding-color3-transparent-high: #00000040;
		
	--error-text-color: #fdda0d;
}

@font-face {
  font-family: banner;
  font-style: normal;
  font-weight: normal;
  src: url('fonts/CarterOne-Regular.ttf') format(truetype);
}

@font-face {
  font-family: heading;
  font-style: normal;
  font-weight: normal;
  src: url('fonts/CarterOne-Regular.ttf') format(truetype);
}

@font-face {
  font-family: text;
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format(truetype);
	font-weight: 100 1000;
}

html {
  font-size: 18px;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: text, sans-serif;
  font-weight: 300;
  color: var(--branding-color2-opaque);
}

body:after{
	content: "";
	position: fixed;
	top: 0;
	height: 100vh;
	left:0;
	right:0;
	z-index:-1;
	background-image: url(images/background.png);
  background-repeat: no-repeat;
  background-position: center center;
	background-size: cover;
}

h1, h2, h3, h4 {
  padding-bottom: 0.5rem;
}

h1 {
  font-size: 2.2rem;
  font-weight: 400;
}

h2 {
  font-size: 1.8rem;
  font-weight: 400;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

h4 {
  font-size: 1.2rem;
  font-weight: 600;
}

p {
  padding: 0.5rem 0;
  line-height: 1.4em;
  text-align: center;
}

ul {
  list-style: none;
}

ol {
  padding: 0 0 .8em 22px;
}

a {
  text-decoration: none;
}

fieldset {
  font-size: 1rem;
  font-weight: 500;
  padding-left: 1.6rem;
  padding-right: 1.6rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--branding-color1-opaque);
  background-color: var(--branding-color3-transparent-high);
  border: 1px solid var(--branding-color1-opaque);
	width: 100%;
	box-sizing: border-box;
}

legend {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

input:not([type="radio"]):not([type="checkbox"]), textarea {
  font-family: inherit;
  font-size: 1rem;
  padding-left: 1.6rem;
  padding-right: .5rem;
  color: var(--branding-color2-opaque);
  background-color: var(--branding-color3-transparent-high);
  background-size: 1rem;
  background-position: .3rem .5rem;
  background-repeat: no-repeat;
  border: 1px solid var(--branding-color1-opaque);
	width: 100%;
  height: 2rem;
	box-sizing: border-box;
}

input[type="radio"] {
  appearance: none;
	position: relative;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--branding-color1-opaque);
  border-radius: 0.4rem;
  cursor: pointer;
}

input[type="radio"]:checked::after {
  content: "\2717";
	position: absolute;
  font-size: 1.2rem;
	top: -12px;
	left: -4px;
  color: var(--branding-color2-opaque);
  border-radius: 2px;
}

input[type="checkbox"] {
  appearance: none;
	position: relative;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--branding-color1-opaque);
  border-radius: 4px;
  cursor: pointer;
}

input[type="checkbox"]:checked::after {
  content: "\2717";
	position: absolute;
  font-size: 1.2rem;
	top: -12px;
	left: -3px;
  color: var(--branding-color2-opaque);
  border-radius: 2px;
}

div>label {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
	color: var(--branding-color1-opaque);
}

textarea {
  height: 8rem;
  padding-top: .3rem;
  overflow: auto; 
}

input:is([type="radio"], [type="checkbox"]) {
  xdisplay: none;
}

input#name {
  background-image: url(images/input_name.png);
}

input#email {
  background-image: url(images/input_email.png);
}

input#director {
  background-image: url(images/input_director.png);
}

input#address {
  background-image: url(images/input_address.png);
}

input#responsible {
  background-image: url(images/input_responsible.png);
}

input#phone {
  background-image: url(images/input_phone.png);
}

input#battlecry {
  background-image: url(images/input_battlecry.png);
}

input#participants {
  background-image: url(images/input_participants.png);
}

input#duration {
  background-image: url(images/input_duration.png);
}


textarea#message {
  background-image: url(images/input_message.png);
}
	
p#info_message {
  color: var(--error-text-color);
	font-weight: 800;
}


button {
  height: 2rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--branding-color2-opaque);
  background-color: var(--branding-color1-opaque);
  border: 2px solid var(--branding-color1-opaque);
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  width: 8rem;
}

button:hover {
  border: 2px solid var(--branding-color2-opaque);
}


/* framework basic layout classes */

.page {
  margin: 0 auto;
	height: 100vh;
}

.splash {
  position: fixed;
  z-index: 3;
  display: grid;
  grid-template-rows: 10vh 70vh 20vh;
  grid-template-columns: 1fr;
  grid-template-areas:
		"splashlink"
		"splashmessage"
		"splashclose";
	width: 100%;
	background-image: url(images/splash_soldout.png);
  background-repeat: no-repeat;
  background-position: center center;
	background-size: contain;
	background-color: var(--branding-color3-transparent-low);
}

@media only screen and (min-width: 1280px) {
	.splash {
		grid-template-rows: 10vh 80vh 10vh;
	}
}

.splashlink {
	grid-area: splashlink;
	text-align: center;
	align-self: center;
}

.splashmessage {
	grid-area: splashmessage;
}

.splashclose {
	grid-area: splashclose;
	text-align: center;
	align-self: top;
}

.header {
  position: fixed;
  z-index: 2;
  height: var(--header-height);
  min-height: var(--header-height);
  margin: 0 auto;
  width: 100%;
	padding: 0;
}

.content {
	position: relative;
  margin: 0 auto;
  width: 100%;
	padding-top: var(--header-height);
  display: grid;
  grid-template-rows: calc(100vh - var(--header-height)) auto;
  grid-template-columns: 1fr;
  grid-template-areas: 
		"homepage"
    "contentpages";
}

/* framework content layout classes */

.homepage {
	grid-area: homepage;
  display: grid;
  grid-template-rows: 40vh auto 20vh;
  grid-template-columns: 1fr;
  grid-template-areas:
		"news"
		"banner"
    "scrollhint";
}

.news {
	grid-area: news;
	justify-self: center;
	align-self: end;
	padding: 1vw;
}

.banner {
	grid-area: banner;
}

.scrollhint {
	grid-area: scrollhint;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.contentpages {
	grid-area: contentpages;
	margin: 0 auto;
  background-color: var(--page-bgr-color);
}

@media only screen and (min-width: 1280px) {
	.contentpages {
		width: 85%
	}
}

@media only screen and (min-width: 1680px) {
	.contentpages {
		width: 75%
	}
}

.contentpage {
  display: grid;
  grid-template-rows: var(--content-header-height) auto var(--content-footer-height);
  grid-template-columns: 1fr;
  grid-template-areas: 
		"contentheader"
    "contentbody"
		"contentfooter";
}

.contentheader {
	grid-area: contentheader;
}

.contentbody {
	grid-area: contentbody;
}

.contentfooter {
	grid-area: contentfooter;
}

/* framework multi-column layout classes */

.row {
	display: grid;
}

.x-x, .x-xx, .xx-x, .x-x-x, .xx-x-x, .x-xx-x, .x-x-xx {
	grid-template-columns: auto;
}

.x-x, .x-xx, .xx-x {
	grid-template-areas:
	 "column1"
	 "column2"
}

.x-x-x, .xx-x-x, .x-xx-x, .x-x-xx {
	grid-template-areas:
	 "column1"
	 "column2"
	 "column3"
}

@media only all and (min-width: 760px) {
	.x-x {
		grid-template-columns: 50%  auto;
	}

	.x-xx {
		grid-template-columns: 33%  auto;
	}

	.xx-x {
		grid-template-columns: 66% auto;
	}

	.x-x, .x-xx, .xx-x {
		grid-template-areas:
		 "column1 column2"
	}
	
	.x-x-x {
		grid-template-columns: 33% 33% auto;
		grid-template-areas: 
			"column1 column2 column3";
	}
	
	.xx-x-x {
		grid-template-columns: 50% 25% auto;
	}
	
	.x-xx-x {
		grid-template-columns: 25% 50% auto;
	}
	
	.x-x-xx {
		grid-template-columns: 25% 25% auto;
	}

  .x-x-x, .xx-x-x, .x-xx-x, .x-x-xx {
		grid-template-areas: 
			"column1 column2 column3";
	}
}

.column1 {
	grid-area: column1;
	padding: 1vh 1vw 1vh 1vw;
}

.column2 {
	grid-area: column2;
	padding: 1vh 1vw 1vh 1vw;
}

.column3 {
	grid-area: column3;
	padding: 1vh 1vw 1vh 1vw;
}

/* framework card layout classes */

.cards { 
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch;
	grid-gap: 1rem;
}

.card {
  display: grid;
}

.card.imageortext {
  grid-template-rows: 2.5rem auto;
}

.card.imageandtext {
  grid-template-rows: 3rem auto 1fr;
}

.card.border {
  border: 2px solid var(--branding-color1-opaque);
}

.card.noborder {
  border: none;
}

.card.shadow {
  box-shadow: 2px 2px 8px 0px var(--branding-color2-transparent-medium);
}

.card.noshadow {
  box-shadow: none;
}

.card.color {
  background-color: var(--branding-color3-transparent-medium);
}

.card.nocolor {
  background-color: transparent;
}

.card.centered p {
	text-align: center;
}

.cardcaption {
	font-weight: 600;
	padding: 0 0.5rem;
	color: var(--branding-color2-opaque);
}

.cardcaption.color {
  background-color: var(--branding-color1-opaque);
}

.cardcaption.nocolor {
  background-color: transparent;
}

.cardcaption.border {
  border-bottom: 2px solid var(--branding-color1-opaque);
}

.cardcaption.noborder {
  border-bottom: none;
}

.cardimage img {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.cardtext {
	align-self: start;
	padding: 0.5rem;
	color: var(--branding-color2-opaque);
}

@media only screen and (min-width: 1280px) {
	.cardtext {
		font-size: 90%;
	}
}

/* framework table layout classes */
table.foldable {
	width: 100%;
}

table.foldable tr {
	display: table;
	width: 100%;
}

table.foldable tr.tableheader {
	display: none;
}

table.foldable td {
	display: table-row;
}

@media only all and (min-width: 640px) {
  table.foldable tr, table.foldable tr.tableheader {
		display: table-row;
	}

  table.foldable td {
		display: table-cell;
  }
}

/* framework header and menu classes */

.headeropaque {
  background-color: var(--branding-color3-opaque);
  border-bottom: 2px solid var(--branding-color2-opaque);
}

.headeropaque a {
  color: var(--branding-color2-opaque);
}

.impressum {
  text-align: right;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-right: 1vw;
}

.impressum a:hover {
  text-decoration: underline;
}

.menu {
	text-align: right;
}

.menubutton {
	position: fixed;
	top: 0;
	left: 0;
	display: inline;
}

.menubutton img {
	padding: 0.5rem;
	height: 3rem;
}

@media only all and (min-width: 760px) {
	.menubutton {
		display: none;
	}
}

.menuitems {
	position: fixed;
  display: none;
	top: var(--header-height);
	width: 100vw;
	background-color: var(--branding-color3-opaque);
	text-align: center;
	border-bottom: 2px solid var(--branding-color2-opaque);
	font-family: text, sans-serif;
	letter-spacing: 0.15rem;
	font-weight: 600;
  text-transform: uppercase;
}

.menuitems ul {
	list-style: none;
}

.menuitems ul li {
	display: block;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.menuitems  ul li > span {
	display: none;
}

.menuitems ul li a {
	margin-left: 2vw;
	margin-right: 2vw;
	padding-left: 0.5vw;
	padding-right: 0.5vw;
}

.menuitems ul li a:hover {
	border-bottom: 4px solid var(--branding-color2-opaque);
}
	
@media only all and (min-width: 760px) {
	.menuitems {
		position: static;
    display: inline-block;
		width: 85%;
		top: inherit;
		text-align: right;
  	border-bottom: none;
		vertical-align: top;
	}

	.menuitems ul li {
		display: inline;
	}
}

.socialmedia {
  padding-right: 1vw;
}

.socialmedia img {
	height: 1.8rem;
}

@media only all and (min-width: 760px) {
	.socialmedia {
		display: inline-block;
	}
}

/* framework button classes */

.scrollbutton {
  width: 30px;
  height: 30px;
	margin: auto;
  color: var(--branding-color2-opaque);
  border: 2px solid var(--branding-color2-opaque);
  border-radius: 50%;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: bounce;
}

.scrollbutton > div {
  width: 10px;
  height: 10px;
	margin: 8px auto;
  border: 2px solid var(--branding-color2-opaque);
	border-width: 0px 0px 2px 2px;
	transform: rotate(-45deg);
}

.foldbutton {
  width: 12px;
  height: 12px;
	margin: 8px auto;
  border: 2px solid var(--branding-color1-opaque);
	border-width: 0px 0px 2px 2px;
	transform: rotate(135deg);
}

.foldbutton.folded {
	transform: translateY(-6px) rotate(-45deg);
}
	
/* framework content styling classes */

.splashlink a {
  background-color: var(--branding-color1-transparent-low);
	color: var(--branding-color2-opaque);
  border: 2px solid var(--branding-color1-opaque);
	font-weight: 800;
}

.news {
	text-align: center;
  font-family: text, sans;
  color: var(--branding-color2-opaque);
	background-color: var(--branding-color1-transparent-medium);
}

.news h4 {
	text-decoration: underline;
}

.banner {
	text-align: center;
  font-family: banner, sans;
  color: var(--branding-color2-opaque);
  padding-top: 10vh;
}

.banner h1 {
	font-size: 2rem;
}

.banner h2 {
	font-size: 1.5rem;
}

@media only all and (min-width: 980px) {
	.banner h1 {
		font-size: 3rem;
	}

	.banner h2 {
		font-size: 2rem;
	}
}

@media only all and (min-width: 1280px) {
	.banner h1 {
		font-size: 4rem;
	}

	.banner h2 {
		font-size: 2.5rem;
	}
}

.scrollhint {
	text-align: center;
}

.homepage .scrollhint img {
	height: 4rem;
	width: auto;
}

.contentpage {
	padding: 0 2vw 0 2vw;
}

.contentpage a {
  color: var(--branding-color1-opaque);
	font-weight: 600;
}

.contentpage a:hover {
  text-decoration: underline;
}

.contentheader {
  text-align: center;
  color: var(--branding-color1-opaque);
	font-family: heading, serif;
	border-top: 2px solid var(--branding-color1-opaque);
	padding-top: calc(var(--content-header-height) / 3);
}

.contentpage.foldable > .contentheader {
	padding-top: calc(var(--content-header-height) / 8);
  cursor: pointer;
}

.contentfooter {
  text-align: center;
}

.contentbody .contentheader {
	border-top: 1px solid var(--branding-color1-opaque);
}

.contentbody p {
  text-align: justify;
}

.contentbody img {
	width: 100%;
}

.title {
  font-family: heading, sans;
  color: var(--branding-color1-opaque);
}

.strongprint {
	font-weight: 700;
}

.smallprint {
	font-size: 0.8rem;
}

.highlight {
	font-weight: 500;
  color: var(--branding-color1-opaque);
}

.protrude {
	font-weight: 500;
	background-color: var(--branding-color1-opaque);
  color: var(--branding-color2-opaque);;
}

.hidden {
  font-size:0rem;
  display: none;
}

/* timetable */

#content #timetable #contentbody table {
  border-collapse: separate;
	border-spacing: 0.5rem;
}

#content #timetable #contentbody table tr {
	border-top: 2px solid var(--branding-color1-opaque);
}

#content #timetable #contentbody table td {
	vertical-align: top;
	text-align: center;
}

#content #timetable #contentbody table td:first-child {
	font-weight: 500;
}

#content #timetable .contentfooter p {
	text-align: center;
}

#content #timetable .contentfooter span {
	padding-left: 1rem;
	padding-right: 1rem;
}

@media only all and (min-width: 640px) {
	#content #timetable #contentbody table tr.tableheader {
		border-bottom: 2px solid var(--branding-color1-opaque);
		white-space: nowrap;
	}
	
	#content #timetable #contentbody table tr {
		border: none;
	}

	#content #timetable #contentbody table td {
		text-align: left;
	}
	
	#content #timetable #contentbody table tr:first-child td {
		font-weight: 600;
	}

	#content #timetable #contentbody table td:first-child {
		font-weight: 300;
		text-align: right;
		padding-right: 1vw;
	}
	
	#content #timetable .contentfooter p {
		text-align: right;
	}
}

/* contact */

@media only screen and (min-width: 1280px) {
	#content #contact .contentbody {
			padding-left: 5vw;
			padding-right: 5vw;
		}
}

#content #contact .contentbody .cards  p {
	padding: 0;
}

#content #contact #contentbody #email  h3, 
#content #contact #contentbody #registration h3,
#content #contact #contentbody #registration h4 {
  text-align: center;
}

#content #contact #contentbody #registration h3 {
  margin-top: 3rem;
}

#content #contact #contentbody #email .email_contact ul, 
#content #contact #contentbody #registration .registration_contact ul {
  list-style-type: none;
}

#content #contact #contentbody #email .email_contact li,
#content #contact #contentbody #registration .registration_contact li {
  padding-top: 1rem;
  width: 100%;
	text-align: center;
}

#content #contact #contentbody #email .email_contact label:not(div > label),
#content #contact #contentbody #registration .registration_contact label:not(div > label) {
  display: none;
}

#content #contact #contentbody #registration .registration_contact fieldset > div {
  padding-bottom: 0.5rem;
	text-align: left;
}

#content #contact #contentbody #email .email_contact p#info_message, 
#content #contact #contentbody #registration .registration_contact p#info_message {
	text-align: center;
}

/* impressum */

#content #impressum {
  display: none;
}

@media only screen and (min-width: 1280px) {
	#content #impressum .contentbody {
		padding-left: 5vw;
		padding-right: 5vw;
	}
}

#content #impressum  #address {
	padding: 1rem 0 2rem 0;
}

#content #impressum  #address  div {
	padding-top: 1rem;
}

#content #impressum   #address  #logo {
  height: 9rem;
  width: auto;
}  

#content #impressum #address p {
  padding: 0;
	text-align: left;
}