@charset "UTF-8";
/* CSS Document */
* {
margin:0;
padding:0;
font-family: "skolar-sans-latin-extended", sans-serif;
}
html {
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(215,215,215,1) 78%, rgba(154,154,154,1) 100%);
font-size: 100%;
}
.grid-container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: auto auto auto auto;
}
.grid-item{
display: grid;
}
.flex-container	{
display: flex;
}
.flex-item	{
display: flex;
}
header { 
display:grid;
grid-column:1 / 5; 
grid-row:1 / 2; 
background-image:url(images/header-rechts.svg);
background-repeat:no-repeat;
background-position:top right;
background-size:contain;
background-color: white;
padding:1.5rem;
align-content: center;
}
main { 
grid-column:1 / 5; 
grid-row:3 / 4; 
z-index:1;
padding:1.5rem;
background-color: white;
} 
nav { 
grid-column:1 / 5; 
grid-row:2 / 3; 
z-index:4;
background-color: white;
}  
#hamnav{
z-index:2;
border-radius:3% 56% 39% 4% / 5% 0% 25% 5% ;
border-bottom: thick solid rgb(0,145,175);
padding:0 1.5rem 0 1.5rem;
background-color:rgb(33,34,78);
}
/* Show Hamburger Icon */
#hamnav label{
display:grid;
justify-content:start;
align-items:center;
height:2.3rem;
cursor:pointer;
}
/* Break down menu items into vertical */
#hamitems a{
box-sizing:border-box;
display:grid;
justify-content:flex-start;
align-items:center;
height:3rem;
color:white;
text-decoration:none;
cursor:pointer;
z-index:3;
font-weight: 300;
font-size:1rem;
background-color:rgb(33,34,78);
}
/* Toggle Show/Hide Menu */
#hamitems{
display:none;
}
input[type=checkbox] {
display:none;
}
#hamnav input:checked ~ #hamitems {
display:block;
}
footer{ 
grid-column:1 / 5;
grid-row:4 / 5;
background-color: white;
box-shadow:0.1rem 0.25rem 0.65em -0.125rem #555555;
z-index:1;
padding:0.25rem 1.5rem 0.25rem 1.5rem;
}
footer a{ 
font-size:0.8rem;
font-weight:300;
text-decoration:none;
text-align:left;
color:rgb(33,34,78);
padding-bottom: 0.25rem;
}
h1 {
color: rgb(33,34,78);
font-size: 1.5rem;
font-weight:300;
line-height:1.6;
}
h2{
color: rgb(0,145,175);
font-size: 4rem;
font-weight: 300;
padding-left: 1rem;
}
p{
color: #666;
font-size: 0.9rem;
font-weight:400;
line-height:1.5;
hyphens: auto;
}
strong{
font-weight:600;
}
blockquote{
display: grid;
overflow: hidden;
grid-column: 1/5;
grid-row: 1/5;
}
blockquote:before,
blockquote:after {
color: rgb(33,34,78);
font-family: "bookman-jf-pro", serif;
font-weight: 400;
font-size:12rem;
}
blockquote p {
color: rgb(33,34,78);
min-width:10rem;
padding-left:1.5rem;
padding-right: 1.5rem;
}
blockquote:before {
content:'”' ;
height:5rem;
line-height: 1.2;
}
blockquote:after {
content: '“';
text-align:right;
height: 4rem;
line-height: 1.0;
}
#signet{
min-width: 10%;
cursor: pointer;
padding-top: 0.5rem;
}
#intro{
display:grid;
align-content: center;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: auto;
box-shadow:0.063rem 0 0.375rem -0.125rem #333333;
padding: 1.5rem;
background-color:white;
}
.link-assym {
display: flex;
justify-content: center;
margin-top: 1rem;
margin-bottom: 3rem;
padding: 0.3rem;
padding-left: 1rem;
padding-right:1rem;
padding-bottom:0.5rem;
text-transform: uppercase;
text-decoration: none;
text-align: center;
white-space: nowrap;
font-weight:300;
font-size:0.9rem;
color: white;
background-color: rgb(33,34,78);
border-radius:1rem 0.5rem 3rem 3rem / 2rem 1rem 1rem 9rem;
border-bottom: thick solid rgb(0,145,175);
border-left:hidden;
border-top: hidden;
border-right: hidden;
min-width:max-content;
cursor: pointer;
}
#avatar-small{
filter:drop-shadow(0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.5));
padding:2rem 0 2rem 0;
margin-top:-2.5rem;
margin-bottom:-10rem;
margin-right:-1rem;
width:8.5rem;
justify-self:right;
}
#avatar-big{
display:none;
}
#rahmenbox {
grid-column: 1/5;
}
#initiale{
color: rgb(0,145,175);
font-size: 6rem;
font-weight:400;
margin-left:-0.5rem;
padding-right:1.5rem;
line-height: 0.75;
}
.spots{
background-image: url(images/play.svg);
}
#werbespots {
white-space:nowrap;
padding:0;
margin:0;
line-height:0.5rem;
}
#galleriecontainer {
box-shadow:0.063rem 0 0.375rem -0.125rem #333333;
z-index:0;
padding:1rem 1rem 0 1rem;
}
#filmklappe {
display: flex;
}
#filmstreifen{
display: flex;
justify-content: space-around;
}
#form {
background-color: white;
grid-column: 1/5;
padding: 1.5rem;
border:none;
box-shadow:0.063rem 0 0.375rem -0.125rem #333333;
overflow-y:auto;
margin:0;
}
form-group{
grid-column: 1/5;
border:none;
margin:0;
width: 100%;
display:block;
}
label{
color: #666;
font-size: 0.9rem;
font-weight:400;
display:block;
padding-top: 0.3rem;
padding-bottom: 0.1rem;
margin:0;
}
input{
border: 0.05rem solid #8c8c8c;
display:block;
padding: 0.15rem;
line-height:1.5rem;
margin:0;
}
input:focus {
border-color: rgb(33,34,78);
outline: none;
}
textarea{
border: 0.05rem solid #8c8c8c;
display:block;
padding: 0.15rem;
margin:0;
}
textarea:focus {
border-color: rgb(33,34,78);
outline: none;
}
.absender{
width: 100%;
background-color:rgb(33,34,78);
margin-bottom: 0.8rem;
padding:0;
line-height:1.5rem;
border-radius: 0;
color:white;
border: none;
cursor:pointer;
}
.absender:hover {
  background-color: rgb(0,145,175); 
}
.g-recaptcha{
padding-top: 1rem;
}
#kontaktgrafik{
display:none;
}
@media screen and (min-width: 380px){
#avatar-small{
margin-bottom:-12rem;
width:10rem;
}
}
@media screen and (min-width: 510px){
header{
padding:2.5rem;
}
#hamnav{
padding:0 2.5rem 0 2.5rem;
}
main{
padding:2.5rem;
}
#form {
box-shadow:-0.875rem 0 0.5rem -0.125rem #999999;
}
blockquote p {
padding: 5.5rem;
padding-top:0;
padding-bottom: 1.5rem;
}
blockquote:before {
height:2rem;
}
blockquote:after {
line-height: 0.75;
height: 3rem;
}
blockquote:before,
blockquote:after {
font-size:15rem;
}
#rahmenbox {
display:inline-grid;
grid-column: 1/5;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 25% auto auto 25%;
}
#rahmen2{
grid-column: 1/4;
grid-row: 2/5;
border-left: rgb(33,34,78) medium dotted;
border-bottom: rgb(33,34,78) medium dotted;
margin-left:2.5rem;
margin-bottom:2.5rem;
border-radius: 0 0 0 0.5rem;
}
h2{
padding-left:5rem;
padding-top:1.5rem;
}
}
@media screen and (min-width: 620px){
#avatar-small{
margin-right:2rem;
margin-top: -4rem;
width:11.5rem;
justify-self:right;
}
h2{
padding-left:5.5rem;
}
}
@media screen and (min-width: 680px){
blockquote p {
padding-left: 8rem;
padding-right: 8rem;
}
h2{
padding-left:7.5rem;
}
#intro{
padding:2.5rem;
}
}
@media screen and (min-width: 768px){
.grid-container {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
grid-template-columns: 6% 22% 22% 22% 22% 6% ;
}
header {
grid-column:2/ 6;
box-shadow:0.063rem 0 0.375rem -0.125rem #333333;
padding:2.5rem;
} 
main {
box-shadow:0.063rem 0 0.375rem -0.125rem #333333;
grid-column:2 / 6;
}
nav {
grid-column:2 / 6;
} 
#hamnav{
z-index:2;
border-radius:0% 56% 49% 28% / 55% 0% 35% 30% ;
}
/* Hide Hamburger */
#hamnav label, #hamburger {
display:none;
}
/* Horizontal Menu Items */
#hamitems {
display:flex;
justify-content: space-evenly;
}
#hamitems a {
padding-left:0;
border:none;
height:2.5rem;
padding-bottom: 0.15rem;
text-transform: uppercase;
font-size: 0.9rem;
background-color: transparent;
}
#hamitems a:hover {
font-weight:600;
}
/* Add an active class to highlight the current page */
#hamitems a.active {
font-weight: 600;
}
h2{
padding-left:2rem;
padding-top:1.5rem;
}
#intro{
box-shadow:0.875rem 0 0.5rem -0.125rem #999999;
grid-template-columns:8% 24% 20% 20% 20% 8%;
grid-template-rows: 25% auto auto 25%;
border:0 solid rgb(33,34,78);
border-left:transparent;
height: min-content;
padding:1rem;
margin:0;
}
.link-assym {
margin-bottom: 1rem;
}
#rahmen1{
grid-column: 4/5;
grid-row: 1;
border-top: rgb(33,34,78) thin solid;
border-right: rgb(33,34,78) thin solid;
}
#rahmen2{
grid-column: 1/2;
grid-row: 4;
border-left: rgb(33,34,78) thin solid;
border-bottom: rgb(33,34,78) thin solid;
margin-left:0;
margin-bottom:0;
border-radius:0;
}
#signet{
margin:0;
min-width: 15rem;
}
blockquote p {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-bottom: 2.5rem;
}
blockquote:before,
blockquote:after {
font-size:12rem;
}
#rahmenbox {
grid-column: 3/6;
grid-row: 3/4;
align-content: center;
margin-left:2rem;
}
#avatar-small{
display:none;
}
#avatar-big{
display:grid;
grid-column:1 / 3;
grid-row: 3/4;
align-self:center;
filter:drop-shadow(-0.1rem 0.2rem 0.1rem rgba(0, 0, 0, 0.2));
}
#initiale{
font-size: 10rem;
padding-right:2.5rem;
line-height: 0.65;
}
footer{ 
grid-column:2 / 6;
box-shadow:0.1rem 0.25rem 0.25rem -0.125rem #555555;
padding:0;
}
footer a{ 
border-radius:80% 86% 20% 0% / 35% 90% 0% 90% ;
border-top: thick solid rgb(0,145,175);
background:rgb(33,34,78);
color:white;
padding:0.25rem 2.5rem 0.4rem 2.5rem;
}
#form {
grid-column: 2/6;
overflow-x: hidden;
height: max-content;
}	
}
@media screen and (min-width: 970px){
.grid-container {
grid-template-columns: 12% 19% 19% 19% 19% 12% ;
}
html{
font-size:110%;
}
#form {
grid-column: 1/5;
}
#kontaktgrafik{
display: grid;
grid-column: 5/7;
object-fit:contain;
align-self: center;
}
}
@media screen and (min-width: 1200px){
html{
font-size:115%;
}
.grid-container {
grid-template-columns: 18% 16% 16% 16% 16% 18% ;
}
}
@media screen and (min-width: 1440px){
html{
font-size:120%;
}
.grid-container {
grid-template-columns: 22% 14% 14% 14% 14% 22% ;
}
}
@media screen and (min-width: 1700px){
html{
font-size:125%;
}
.grid-container {
grid-template-columns: 24% 12% 12% 12% 12% 24% ;
}
}