/* Allgemein */

:root {
    --fcs-blue         : #0198F1;
    --fcs-blue-light   : #7BB4F9;
    --fcs-body-bg      : dimgray;
    --fcs-text-color   : #3B3838;
    --fcs-text-blue    : #0168A7;
    --fcs-menue-item   : #D0DBF0;
    --fcs-menue-bg     : #E5EBF7;
    --fcs-FS-h1        : clamp(1.8em, 3vw, 2.4em);
    --fcs-FS-h2        : clamp(1.6em, 2.4vw, 1.8em);
    --fcs-FS-h3        : clamp(1.2em, 2.2vw, 1.6em);
    --fcs-FS-h4        : clamp(.9em, 1.4vw, 1.2em);
    --fcs-FS-p         : clamp(1em, 1.8vw, 1.4em);
    --fcs-FS-p-max     : clamp(1.1em, 2.0vw, 1.5em);
    --fcs-FS-p-min     : clamp(.9em, 1.6vw, 1.3em);
    --fcs-header-height: 50px;
}

* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size  : 16px;
    color      : var(--fcs-bg-color);
    min-height : 100vh;
}

.pageheader {
    text-align      : center;
    position        : fixed;
    width           : 100vw;
    height          : var(--fcs-header-height);
    max-width       : 500px;
    margin          : 0 auto;
    top             : 0;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    background-color: var(--fcs-menue-item);
    color           : var(--fcs-text-blue);
    z-index         : 1;
}

.pageimage img {
    margin-top   : calc(var(--fcs-header-height) - 20px);
    margin-bottom: 30px;
    width        : 150px;
    height       : auto;
}

.pageimage {
    display        : flex;
    justify-content: center;
}

.pageheader a {
    text-decoration : none;
    color           : var(--fcs-text-blue);
    display         : inline-block;
    border          : 1px solid var(--fcs-text-blue);
    padding         : 1px 5px 1px 5px;
    border-radius   : 5px;
    background-color: var(--fcs-menue-bg);
}

.pageheader a:hover,
.pageheader a:active {
    color: var(--fcs-blue);
}

.topic {
    font-weight: bold;
    padding    : 5px 10px;
}

.back {
    font-size   : calc(var(--fcs-FS-p)-5px);
    padding-left: 10px;
    overflow    : hidden;
}

.arrow {
    height       : 18px;
    width        : auto;
    padding-right: 10px;
}

div.back a {
    display    : flex;
    align-items: center;
    height     : 40px;
    width      : 90px;
}

#container {
    padding-top: 50px;
    position   : relative;
    width      : 100vw;
    max-width  : 500px;
    margin     : 0 auto;
    height     : 100vh;
}

/* Leeres Div erzeugen, um die Seite vertikal weiter scrollen zu können*/
.blank {
    width     : 100%;
    min-height: 200px;
}

/* Jump-To-Top-Button*/

#totopbtn img {
    height: 18px;
    width : 20px;
}


#totopbtn {
    display         : none;
    position        : fixed;
    bottom          : 50px;
    right           : 20px;
    z-index         : 999;
    border          : 1px solid var(--fcs-blue);
    background-color: rgba(208, 219, 240, 0.5);
    color           : whitesmoke;
    padding         : 9px 7px 5px 7px;
    border-radius   : 7px;
}


/* Footer  */
footer {
    position        : fixed;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    background-color: rgb(223, 223, 223);
    bottom          : 0;
    width           : 100%;
    max-width       : 500px;
    height          : 25px;
    margin-top      : 10px;
    font-weight     : bold;
    font-size       : .7rem;
}