/* ---------------------------------------------------------------- :root ---------------------------------------------------------------- */
:root{
    --primary-color: #000;
    --secondary-color: #fff;

    --primary-background-color: #fff;
    --secondary-background-color: #24292e;
    --middle-background-color: #f6f7f9;

    --highlight-color: #FFC300;

    --font-1: 'Montserrat', sans-serif;
    --font-2: 'Open Sans', sans-serif;
}



/* ---------------------------------------------------------------- general ---------------------------------------------------------------- */
@media screen and (min-width: 0px) and (max-width: 480px){
    body{
        font-size: 0.38rem;
    }
}
@media screen and (min-width: 481px) and (max-width: 768px){
    body{
        font-size: 0.53rem;
    }
}
@media screen and (min-width: 769px) and (max-width: 1024px){
    body{
        font-size: 0.85rem;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1200px){
    body{
        font-size: 1rem;
    }
}
@media screen and (min-width: 1201px){
    body{
        font-size: 1rem;
    }
}
body{
    margin: 0;
    padding: 0;
    background-color: var(--primary-background-color);
    color: var(--primary-color);
    min-height: 100vh;
    min-width: 100%;
}

*{
    font-family: var(--font-1);
}
h3{
    color: var(--header-color);
}
.content-container{
    padding: 1em;
    font-family: var(--font-2);
}

a{
    color: var(--highlight-color);
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}
/* ---------------------------------------------------------------- footer ---------------------------------------------------------------- */
 #footer{
    font-size: 1.5em;
    font-family: var(--font-2);
    background-color: var(--secondary-background-color);
    color: var(--secondary-color);
}
#darkmodeBtn{
    height: auto;
    color: var(--secondary-color);
    background-color: var(--secondary-background-color);
    border-color: var(--secondary-color);
    border-radius: 5px;
    font-size: 0.7em;
    min-width: fit-content;
    min-height: fit-content;
    width: 7em;
    height: 2em;
    border-width: 0.1px;
    font-family: var(--font-2);
}


#grid-container-f{
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 4em 4em 4em 4em;
    grid-template-areas: 
    "eins zwei drei vier fuenf sechs"
    "eins sieben sieben acht acht sechs"
    "eins neun neun acht acht sechs"
    "eins zehn zehn zehn zehn sechs";
}

#grid-container-f a{
    text-decoration: none;
    color: var(--secondary-color);
    font-family: var(--font-2);
}
#grid-container-f a:hover{
    text-decoration: underline;
}

.link{
    font-size: 0.7em;
    font-family: var(--font-2);
}

.cell-f{
    display: flex;
    justify-content: center;
    align-items: center;
}

.cell-1-f{
    grid-area: eins;
}
.cell-2-f{
    grid-area: zwei;
}
.cell-3-f{
    grid-area: drei;
}
.cell-4-f{
    grid-area: vier;
}
.cell-5-f{
    grid-area: fuenf;
}
.cell-6-f{
    grid-area: sechs;
}
.cell-7-f{
    grid-area: sieben;
}
.cell-8-f{
    grid-area: acht;
}
.cell-9-f{
    grid-area: neun;
}
.cell-10-f{
    grid-area: zehn;
}

#dgsf-img{
    width: 7em;
    height: 7em;
}
/* ---------------------------------------------------------------- quote ------------------------------- */


.blockquote {
    position: relative;
    font-weight: 800;
    color: var(--primary-color);
    padding: 30px 0;
    width: 100%;
    max-width: 500px;
    z-index: 1;
    margin: 0 80px 0 0;
    align-self: center;
    border-top: solid 1px;
    border-bottom: solid 1px;
}
.blockquote h1 {
    position: relative;
    font-family: var(--font-1);
    color: var(--highlight-color);
    font-size: 4em;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

/* Blockquote right double quotes */
.blockquote:after {
    font-family: var(--font-1);
    position: absolute;
    content: "”";
    color: var(--highlight-color);
    font-size: 10em;
    line-height: 0;
    bottom: -43px;
    right: 30px;
}


/* Blockquote subheader */
.blockquote h4 {
    color: var(--primary-color);
    position: relative;
    font-size: 1.4em;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    padding-top: 20px;
    z-index: 1;
}
.blockquote-wrapper {
    display: flex;
    padding: 0 20px;
    width: 35vw;
    margin: 5vmin;
    margin-bottom: 10em;
 }


 

 



 /* montserrat-regular - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-300 - latin */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/montserrat-v25-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/montserrat-v25-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/montserrat-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/montserrat-v25-latin-300.woff') format('woff'), /* Modern Browsers */
         url('../fonts/montserrat-v25-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/montserrat-v25-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-500 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/montserrat-v25-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/montserrat-v25-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/montserrat-v25-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/montserrat-v25-latin-500.woff') format('woff'), /* Modern Browsers */
         url('../fonts/montserrat-v25-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/montserrat-v25-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-600 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/montserrat-v25-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/montserrat-v25-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/montserrat-v25-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/montserrat-v25-latin-600.woff') format('woff'), /* Modern Browsers */
         url('../fonts/montserrat-v25-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/montserrat-v25-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-700 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/montserrat-v25-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/montserrat-v25-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/montserrat-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/montserrat-v25-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-800 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/montserrat-v25-latin-800.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/montserrat-v25-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/montserrat-v25-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/montserrat-v25-latin-800.woff') format('woff'), /* Modern Browsers */
         url('../fonts/montserrat-v25-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/montserrat-v25-latin-800.svg#Montserrat') format('svg'); /* Legacy iOS */
  }
  /* montserrat-900 - latin */
  @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/montserrat-v25-latin-900.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/montserrat-v25-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/montserrat-v25-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/montserrat-v25-latin-900.woff') format('woff'), /* Modern Browsers */
         url('../fonts/montserrat-v25-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/montserrat-v25-latin-900.svg#Montserrat') format('svg'); /* Legacy iOS */
  }



  /* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/open-sans-v29-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v29-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v29-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-500 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/open-sans-v29-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v29-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v29-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v29-latin-500.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v29-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v29-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-600 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v29-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v29-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v29-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v29-latin-600.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v29-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v29-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-700 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/open-sans-v29-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v29-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v29-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v29-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v29-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v29-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
  }
  /* open-sans-800 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/open-sans-v29-latin-800.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v29-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v29-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v29-latin-800.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v29-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v29-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
  }