/* Custom Schriftart für das PSE Icon im Footer */

/* -- erstellt mit https://icomoon.io/ -- */

@font-face {

    font-family: 'Periodensystem-Icons';

    src:  url('../fonts/Periodensystem-Icons.eot?rxvsha');

    src:  url('../fonts/Periodensystem-Icons.eot?rxvsha#iefix') format('embedded-opentype'),

      url('../fonts/Periodensystem-Icons.ttf?rxvsha') format('truetype'),

      url('../fonts/Periodensystem-Icons.woff?rxvsha') format('woff'),

      url('../fonts/Periodensystem-Icons.svg?rxvsha#Periodensystem-Icons') format('svg');

    font-weight: normal;

    font-style: normal;

    font-display: block;

}

  

.pse-icon {

    /* use !important to prevent issues with browser extensions that change fonts */

    font-family: 'Periodensystem-Icons' !important;

    /* speak: never; */

    font-style: normal;

    font-weight: normal;

    font-variant: normal;

    text-transform: none;

    line-height: 1;

  

    /* Better Font Rendering =========== */

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}

  

.pse_icon-logo_simple_black:before {

    content: "\e981";

}

.pse_icon-logo_simple_white:before {

    content: "\e982";

    color: #fff;

}  



/* Allgemeine Formatierung

-------------------- */

* {

    font-family: Arial, Helvetica, sans-serif;

}

body {

    margin: 0;

    color: #1a1a1a;

    overflow-x: hidden;

}



/* Title

-------------------- */

div.title {

    text-align: center;

    margin-top: 20px;

    margin-bottom: -20px;

}

h1#h1-title {

    vertical-align: middle;

    font-size: 72px;

    display: inline;

    margin-left: 10px;

}

img#img-logo {

    height: 100px;

    vertical-align: middle;

    margin-right: 10px;

}

.title hr {

    width: 90%;

    border-color: #1a1a1a;

    background: #1a1a1a;

    margin: 40px auto;

    text-align: center;

}



/* Footer

-------------------- */

.footer {

    position: fixed;

    bottom: 0%;

    display: flex;

    width: 100%;

    height: 3%;

    background-color: #1a1a1a;

    padding: 10px;

    align-items: center;

    justify-content: space-around;

    z-index: 1000;

}

/* Icon + Label im Footer zentrieren und andere Formatierungen */

.footer-box a, .footer-box i, .footer-box span {

    color: white;

    text-decoration: none;

    position: relative;

    display: inline;

    vertical-align: middle;

}

.footer-box a:hover, .footer-box i:hover, .footer-box span:hover {

    color: rgb(179, 179, 179);

}



/* Dropdown-Menus */

.footer-box .dropdown-content {

    position: absolute;

    display: inline-block;

    vertical-align: middle;  

    bottom: 100%;

    background-color: #1a1a1a;

    padding: 10px 10px;

    text-align: center;

    visibility: hidden;

    /* kleine Einblendeanimation */

    opacity: 0;

    transition: visibility 0s linear 300ms, opacity 500ms;

}

/* Dropdown-Menus einblenden */

.footer-box .dropdown:hover > .dropdown-content, .footer-box .dropdown:active > .dropdown-content {

    visibility: visible;

    opacity: 1;

    transition: visibility 0s linear 0s, opacity 500ms;

}

/* Darkmodelabel Vertikal Zentriert */

.label {

    vertical-align: middle;

    font-size: 18px;

}

/* Dropdown-Text der Legenden und Quellen Linksbündig */

.legend, .quellen {

    text-align: left;

    color: white;

}

/* Legende Farben */

.red {

    color: rgb(255, 0, 0);

}

.red:hover {

    color: rgb(255, 80, 80);

}

.pink {

    color: rgb(255, 0, 255);

}

.pink:hover {

    color: rgb(253, 97, 253);

}

.brown {

    color: rgb(160, 82, 45);

}

.brown:hover {

    color: rgb(160, 105, 80);

}

.wheat {

    color: wheat;

}

.wheat:hover {

    color: rgb(240, 229, 209);

}

.orange {

    color: orange;

}

.orange:hover {

    color: rgb(247, 190, 84);

}

.yellowgreen {

    color: yellowgreen;

}

.yellowgreen:hover {

    color: rgb(199, 238, 120);

}

.grey {

    color: gray;

}

.grey:hover {

    color: rgb(156, 156, 156);

}

.green {

    color: rgb(0, 139, 0);

}

.green:hover {

    color: rgb(56, 153, 56);

}

.lightblue {

    color: lightskyblue;

}

.lightblue:hover {

    color: rgb(167, 223, 255);

}

.violett {

    color: rgb(140, 140, 255);

}

.violett:hover {

    color: rgb(177, 177, 255);

}



/* Slider from W3schools: 

https://www.w3schools.com/howto/howto_css_switch.asp */



/* The switch - the box around the slider */

.footer-box .dropdown .dropdown-content .switch {

    position: relative;

    display: inline-block;

    vertical-align: middle;

    width: 45px;

    height: 26px;

  }

  

  /* Hide default HTML checkbox */

  .footer-box .dropdown .dropdown-content .switch #check {

    opacity: 0;

    width: 0;

    height: 0;

  }

  

  /* The slider */

  .footer-box .dropdown .dropdown-content .switch .slider {

    position: absolute;

    cursor: pointer;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #ccc;

    -webkit-transition: .4s;

    transition: .4s;

  }

  

  .slider:before {

    position: absolute;

    content: "";

    height: 20px;

    width: 20px;

    left: 3px;

    bottom: 3px;

    background-color: white;

    -webkit-transition: .4s;

    transition: .4s;

  }

  

  .footer-box .dropdown .dropdown-content .switch #check:checked + .slider {

    background-color: #2196F3;

  }

  

  .footer-box .dropdown .dropdown-content .switch #check:focus + .slider {

    box-shadow: 0 0 1px #2196F3;

  }

  

  .footer-box .dropdown .dropdown-content .switch #check:checked + .slider:before {

    -webkit-transform: translateX(19px);

    -ms-transform: translateX(19px);

    transform: translateX(19px);

  }

  

  /* Rounded sliders */

  .slider.round {

    border-radius: 34px;

  }

  

  .slider.round:before {

    border-radius: 50%;

  }



  .label {

    vertical-align: middle;

    font-size: 20px;

  }



  /* Spenden */

  #spenden > a {

      color: #08f;

      text-decoration: underline;

  }

  #spenden > a:hover {

    color: #0af;

}



/* Media Queries

-------------------- */

@media screen and (max-width: 1100px) {

    img#img-logo {

        height: 60px;

        vertical-align: auto;

    }

    h1#h1-title {

        font-size: 52px;

        vertical-align: auto;

    }

    .footer, .label {

        font-size: 14px;

    }

    #kontakt {

        margin-right: 10px;

    }

}

@media screen and (max-width: 800px) {

    img#img-logo {

        height: 50px;

    }

    h1#h1-title {

        font-size: 36px;

        display: block;

    }

    .footer, .label {

        font-size: 12px;

    }

    .dropdown-content {

        margin-left: -7%;

    }

    #quellen {

        position: absolute;

        right: 14px;

    }

}



@media screen and (max-width: 600px) {

    h1#h1-title {

        margin-bottom: 40px;

    }

    .footer span.footer-label {

        display: none;

    }

    .footer {

        font-size: 18px;

    }

}