@charset "UTF-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
html{
font-family: 'Maven Pro', sans-serif;
height:100%;
font-size:100%;
}
header {
grid-column:1 / 5;
grid-row:1 / 1;
background-color: white;
}
#logo {
padding:1rem;
width:90%;
}
nav {
grid-column:1 / 5;
grid-row:2 / 2;
}
main {
grid-column:1 / 5;
grid-row:3 / 3; 
background-color: white;
}
.grid-container {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: auto auto auto auto auto;
max-height:100vh;
}
.grid-item{
display: grid;
}
.flex-container	{
display: flex;
}
.flex-item#introlinks{
align-items: center;
flex-direction:column;
gap: 1rem;
}
.introlink {
display:flex;
padding: 0.4rem;
text-decoration: none;
color: #56227D;
white-space: nowrap;
font-weight:600;
background-color:rgba(77,19,117,0.3);
align-items: center;
justify-content: center;
height: 3rem;
width: 8rem;
}
#business{
align-self: end;
grid-row:4 / 4;
grid-column:1 / 5;
flex-direction:column;
}
.flex-container#mitte{
justify-content: center;
align-items: center;
padding: 0 0 1rem 1rem;
align-content: center;
}
.flex-item {
display: flex;
align-items:start;
}
#slogan{
display:flex;
justify-content: center;
}
a{
font-size:0.95rem;
hyphens: none;
}
#hamnav{
background:#56227D;
}
#hamnav label{
display:grid;
justify-content:start;
align-items:center;
background:#56227D;
color: white;
height:2.3rem;
padding-left:1.5rem;
cursor:pointer;
}
/* Break down menu items into vertical */
#hamitems a{
box-sizing:border-box;
display:grid;
justify-content:flex-start;
align-items:center;
border-top:0.1rem solid rgb(175,154,198);;
height:3rem;
padding-left:1.5rem;
color: white;
text-decoration:none;
text-align:left;
text-transform:uppercase;
cursor:pointer;
font-weight:400;
}
/* Toggle Show/Hide Menu */
#hamitems{
display:none;
}

input[type=checkbox] {
display:none;
}
#hamnav input:checked ~ #hamitems {
display:block;
}
.kaesten {
color:white;
padding-top:1.5rem;
padding-bottom:1.5rem;
height: 100%;
}

article {
padding:2rem;
}
h1{
color: #56227D;
font-weight:800;
line-height:3;
font-size: 4.8vw;
}
h2 {
font-size: 1.3rem;
font-weight:600;
line-height:1.5;
}
h3 {
font-size: 1.1rem;
font-weight:500;
line-height:1.5;
padding-bottom:0.5rem;
}
h4 {
font-size: 0.95rem;
font-weight:800;
line-height:1.5;
color: #56227D;
padding:0.45rem 0 0.25rem 0;

}
.violett {
color:#56227D;
}
.grey {
color:#68757E;
}
p{
color: #68757E;
font-size: 0.95rem;
line-height:1.55;
font-weight:400;
hyphens: auto;
}
p a{
color:#56227D;
font-weight:400;
text-decoration:none;
}
strong{
font-weight:500;
}
span{
color: #56227D;
}
a[href^="tel"]{
color:inherit;
text-decoration:none;
}
#initiale{
color: #56227D;
font-size: 6rem;
font-weight:400;
margin:0;
padding: 0 0 0 1rem;
line-height:1.4;

}
ul{
font-size: 0.95rem;
line-height:1.55;
font-weight:400;
hyphens:none;
}
ul a{
color:#56227D;
font-weight:400;
text-decoration:none;
}
.aufzaehlungszeichen{
list-style-type: disc;
list-style-position:outside;
padding-left: 1rem;
}
.aufzaehlungszeichen-grey{
list-style-type: disc;
list-style-position:outside;
padding-left: 1rem;
color:#68757E;
}
.aufzaehlung{
list-style-type: none;
}
#startzahn{
object-fit:contain;
object-position: center;
max-width:100%;
border:none;
padding:0;
height: 20rem;
}
footer {
grid-column:1 / 5;
grid-row:5 / 5;
padding:0;
background-color:#56227D;
color:rgb(175,154,198);
}
.footerlink {
color:rgb(175,154,198);
line-height:2.5rem;
padding: 1rem;
font-size: 0.8rem;
text-decoration: none;
white-space: nowrap;
font-weight:400;
}
@media screen and (min-width: 520px){
.introlink {
width: 10rem;
font-size:1.1rem;
}
h1{
font-size: 4vw;
}
#logo {
width:50%;
}
#startzahn{
height:25rem;
}
}
@media screen and (min-width: 768px){
html{
font-size:110%;
}
#logo {
padding:1.5rem;
}
#hamnav{
background-color:#56227D;
}
/* Hide Hamburger */
#hamnav label, #hamburger {
display:none;
}
/* Horizontal Menu Items */
#hamitems {
display:flex;
align-items: center;
}
#hamitems a {
width: 20%; /* 100% / 5 tabs = 20% */
padding-left:0;
border-left:0.1rem solid rgb(175,154,198);
border-right:0rem ;
border-top:0rem ;
border-bottom:0;
justify-content:center;
height:2.5rem;
color:white;
font-size:0.9rem;
}
a{
font-weight:400;
}
#hamitems a:hover {
color: white;
font-weight:600;
}
/* Add an active class to highlight the current page */
#hamitems a.active {
color: white;
font-weight:600;
}
.flex-container#mitte{
justify-content: center;
align-items: center;
margin-left:2.5rem;
margin-right:2.5rem;
}

#initiale{
font-size: 7rem;
line-height:1.1;
padding:1rem 1rem 2rem 2rem;

}
.kaesten {
align-self: end;
grid-row:4 / 4;
padding-bottom:0;
}
#business {
padding-top:1.5rem;
}
#startzahn{
height:30rem;
max-height: initial;
}
}
@media screen and (min-width: 1024px){  
html{
font-size:112%;
}
h1{
font-size: 3vw;
}
#logo {
width:35%;
}
}
@media screen and (min-width: 1280px){
html{
font-size:115%;
}
.grid-container {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
grid-template-columns: 15% 35% 35% 15%;
}
header {
grid-column:2/ 4;
grid-row:1 / 1;
box-shadow:0.063rem 0 0.375rem -0.125rem #333333;
}
main {
box-shadow:0.063rem 0 0.375rem -0.125rem #333333;
grid-column:2 / 4;
grid-row:3 / 3;
}
nav { 
grid-column:2 / 4;
grid-row:2 / 2;
}
article {
padding:2.5rem;
}
#logo{
width:35%;
}
#business{
grid-column:2 / 4;
box-shadow:0.063rem 0 0.375rem -0.125rem #333333;
}
#initiale{
line-height:0.7;
padding:2.5rem 1rem 2.5rem 2.5rem;
font-size: 10rem;
}

footer {
grid-column:2 / 4;
box-shadow:0.063rem 0 0.375rem -0.125rem #333333;
}
.introlink {
width: 15vw;
}
h1{
font-size: 2.3vw;
}
}
@media screen and (min-width: 1400px){
html{
font-size:120%;
}
#startzahn{
max-height:none;
}
}
@media screen and (min-width: 1650px){
html{
font-size:125%;
}
}
@media screen and (min-width: 1900px){
html{
font-size:130%;
}
}