@charset "utf-8";
/* ================================================== */
body {
    width: 85vw;
    max-width: 100%;
    overflow: hidden;
    background: transparent;
    margin: 0 auto;
	min-height: 100vh;
	z-index: 1;
}
/* ================================================== */
/* ================================================== */.
main {
	width: 85vw;
    max-width: 100%;
    overflow: hidden;
    background: transparent;
    margin: 0 auto;
	min-height: 100vh;
	display: grid;
	z-index: 2;
	grid-template-columns: auto;
	grid-template-rows: 3vh 12vh 40rem 2rem;
	grid-row-gap: .25vmin;
    grid-template-areas:
    "nav"
    "header"
    "section"
    "form";
}
/* ================================================== */
/* ================================================== */
header {
	grid-area: header;
	width: 85vw;
	max-width: 100%;
	height: 12vh;
    margin: -1rem auto 0;
    padding: 1rem;
    text-align: center;
    z-index: 3;
}
.Three-Dee, a h1.Three-Dee {
    padding: 0;
    border: 0;
    background: transparent;
    font-weight: bold;
    font-size: 5rem;
	text-align: center;
    text-shadow: 0px 0px 0 rgb(1,231,231),1px 1px 0 rgb(6,216,216),
    2px 2px 0 rgb(2,20,2),3px 3px 0 rgb(7,18,8),
    4px 4px 0 rgb(3,173,173),5px 5px 0 rgb(18,158,158), 
    6px 6px 0 rgb(144,144,144),7px 7px 6px rgba(0,0,0,0.6),
    7px 7px 1px rgba(0,0,0,0.5),0px 0px 6px rgba(0,0,0,.2),
    -2px -2px 0 #000, -3px -3px 0 rgba(9,0,253,.8);
    text-decoration: none;
}
.Three-Dee:hover, a h1.Three-Dee:hover {
	text-shadow: 0px 0px 0 rgb(233,213,29),1px 1px 0 rgb(231,216,2),
    2px 2px 0 rgb(230,203,2),3px 3px 0 rgb(217,238,2),
    4px 4px 0 rgb(172,133,17),5px 5px 0 rgb(8,183,16), 
    6px 6px 0 rgb(14,44,4),7px 7px 6px rgba(255,0,0,0.6),
    7px 7px 1px rgba(0,0,255,0.5),0px 0px 6px rgba(0,0,250,.2),
    -2px -2px 0 #000, -3px -3px 0 rgba(2,2,60,.8);
    text-decoration: none;
}
/* ================================================== */
#freitag {
	position: absolute;
	top: -1000rem;
	left: 0;
	right: 0;
	background-color: transparent;
	color: transparent;
	visibility: hidden;
	opacity: 0;
	z-index: -100;
}
/* ================================================== */
section {
	grid-area: section;
	max-width: 100%;
	height: 40rem;
	margin: -2rem auto 0;
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: repeat(4, 8.5rem);
	grid-row-gap: .5vh;
    grid-template-areas:
      "eins"
      "zwei"
      "drei"
      "vier";
}
/* ================================================== */
/* ================================================== */
article {
	max-width: 100%;
    margin: .1vh auto;
    padding: 2vmin;
    height: 20vh;
    box-shadow: 1rem 1rem 1.5rem 1.5rem #000;
/*
    border: 1rem solid #000;
    border-radius: .85rem;
*/
	outline: .1vmin solid #F03;
	outline-offset: .2vmin;
	overflow: hidden;
}
article:after {
	content: "";
    box-shadow: inset 0 0 2rem #000;
}
article > p {
	padding: 0 .85rem;
	margin: 0 .85rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/*
article:nth-of-type(2) > p {
	padding: 0 .85rem;
	margin: 0 .85rem;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
*/
article:hover {
    box-shadow: inset 0 0 1.5vmin #2F2, inset 0 0 2.5vmin #F0F;
/*
    border: .1vmin inset #003, .15vmin outset #9C0;;
*/
	outline: .05vmin solid #000;
}
article h2 {
    display: block;
    text-align: center;
    height: 2.5rem;
    max-width: 100%;
    padding: 1rem;
    margin: -2vh auto 0;
    font-size: 2.25rem;
    font-family: belligerent, serif;
    color: #C54;
    text-shadow: .15rem .15rem 0 #FFF, .1rem .1rem 0 #000, .3rem .3rem 0 #F0C, .45rem .45rem 0 #0CF;
    z-index: 3;
}
/*
article:nth-of-type(3) h2 {
    margin: -2.5rem auto 0;
    font-size: 2.2rem;
}
article:nth-of-type(4) h2 {
    margin: -6rem auto 0;
    font-size: 2.2rem;
}
*/
article h2:hover {
    cursor: pointer;
    color: #CDC;
    text-shadow: .15vmin .15vmin 0 #000, .1vmin .1vmin 0 #FFF, .3vmin .3vmin 0 #00A, .45vmin .45vmin 0 #FFC,
                 -.15vmin -.15vmin 0 #0CF, -.3vmin -.3vmin 0 #CFF, -.45vmin -.45vmin 0 #600;
}
#eins {
	grid-area: eins;
}
#zwei {
	grid-area: zwei;
}
#drei {
	grid-area: drei;
}
#vier {
	grid-area: vier;
}
.danger {
    background-color: #E55;
    color: #137;
    box-shadow: 1px 1px 0 0 #1CC, -1px -1px 0 0 #3CE,
              2px 2px 0 0 #992, -2px -2px 0 0 #984;
    border-radius: .3rem;
}
.message {
    border: .25rem inset #FC370A;
    border-radius: .5rem;
    padding: .5rem;
    background-color: linear-gradient(to right, #FC3, #35F);
    color: #FFF;
    text-shadow: 1px 1px 1px #000, -1px -1px 1px #000.
                 2px 2px 1px #0FC, -2px -2px 1px #0FC;
    position: relative;
    max-width: 80%;
    margin: 1rem auto;
}
.errors {
    background: #0CF;
    color: #F20;
    margin: 0 auto;
    padding: .5rem;
    border: 1px solid #2F2;
    border-radius: .5rem;
}
form, form fieldset, form select, form [submit] {
    z-index: 2;
}
footer {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0;
}
.flexx {
	grid-area: form;
	width: 85vw;
	max-width: 100%;
    background: #33A;
    margin: 0 auto;
    padding: 1.5rem;
    border: .1rem solid #FF3;
    position: fixed;
    right: 0;
    left: 0;
    bottom: -1rem;
    font-size: 1.25rem;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
    z-index: 2;
}
.flexx fieldset, .flexx label, .flexx select {
    border: 0;
}
.flexx label {
  color: #F0C;
  text-shadow: 1px 1px 0 #0CF, -1px -1px 0 #0CF,
               2px 2px 0 #CC5, -2ps -2ps 0 #CC6;
}
#base {
    margin-bottom: 4rem;
}
/************************************************************  1440  *******************************************************************/