* {
    box-sizing: border-box;
    outline: none;
}
body,
html {
    padding: 0;
    margin: 0;
    min-height: 100%;
}
body {
      padding: 0;
      margin: 0;
      min-height: 100%;
      overflow-x: hidden;
      background-image: url('_img/pks-bg.jpg');
      background-position: center center;
      background-attachment: fixed;
      background-size: cover;
      font-family: 'Open Sans', sans-serif;
      line-height: 23px;
      color:#002C55;
}

body {
    overflow-x: hidden;
}


h1       {padding:50px 0px 0px 50px; text-transform:uppercase; font-weight:800; font-size:1.2em}
h2       {padding:20px 50px 0px 50px; text-transform:uppercase; font-weight:600; font-size:1.0em}
p        {font-size:0.8em; padding:0 75px 0 50px; text-align:justify;}

span     {color:#FFF; text-transform:none; font-size:12px; padding-top:10px; word-spacing: 0.2em; font-weight:400;}
ul       {padding:0px 0px 0px 75px;font-size:0.8em; }
a        {color:#002C55; text-decoration:none;}



#pks-logo {
          text-align: center;
          margin-bottom: 50px;
}


#pks-logo img {
          width: 150px;
          height: 240px;
          display: inline-block;
}



#pks-content {
          max-width: 800px; /* maximale Breite */
          display: grid;
          justify-content: center; /* centers horizontally */
          align-items: center;     /* centers vertically */
          grid-template-columns: repeat(4, 1fr);
          gap:10px;               /* adds space between divs */
          margin: 0 auto;          /* zentrieren*/
               }

/* Grid-Elemente */

#pks-content > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Bilder */

#pks-content img {
    max-width: 100%;
    height: auto;
    display: block;
}


#content {
    display: flex;
    justify-content: center;
    align-items: center;
    }



#pks-footer {
    display: flex;
    justify-content: center; /* Centers child div horizontally */
    width: 100%;
    background:#002C55;
        }

#footer {
         position: absolute;
         text-align:center;
         bottom: 0;
         left: 0;
         width: 100%;
         background:#002C55;

}
.footer {
       text-align:center;
       color:#FFF;
       background:#002C55;
       width: 100%;
       text-transform:uppercase;
       font-size:15px;
       padding-top:20px;
       word-spacing: 2.0em;
       font-weight:400;
         }


p.breadcrumb {
    font-size: 0.7em;
    color: #000;
    text-decoration: none;
}

a.breadcrumb {
    font-size: 1em;
    text-decoration: underline;
}
 @media (max-width: 768px) {

    #pks-content {
        display: grid;

        /* Eine Spalte = Bilder untereinander */
        grid-template-columns: 1fr;

        /* Abstand zwischen den Bildern */
        gap: 30px;

        width: 100%;
        max-width: 100%;

        padding: 20px;

        /* Bilder horizontal zentrieren */
        justify-items: center;
        align-items: center;
    }

    #pks-content > div {
        width: auto;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    #pks-content img {
        display: block;
        max-width: 100%;
        height: auto;
    }

     /* =====================================
       FOOTER
       ===================================== */

    #fotoco-footer {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #footer {
        position: relative;
        bottom: auto;
        left: auto;
        width: 100%;
        margin: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .footer {
        width: 100%;
        padding: 15px 10px calc(15px + env(safe-area-inset-bottom));
        font-size: 11px;
        line-height: 1.6;
        word-spacing: 0.5em;
        text-align: center;
    }