/* ------------------------- Alle Darstellungsarten ------------------------------------------------------- */

/* Alles zurücksetzen */
    * {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        }

    html {
         scroll-behavior: smooth;
         }

/* Bildschirmhintergrund */
    body {
        background-color: #fff;
        font-size: 100.01%;
        }

/* Schriftenformatierungen */
    h1 {
        font-weight: bold;
        font-size: 1.5em;
        line-height: 1.5em;
        padding: 0.75em 0.75em 0.75em 0.75em ;
        color: #fff;
        }

    h2 {
        font-weight: bold;
        font-size: 1.15em;
        line-height: 1.25em;
        padding: 1.5em 1em 0.5em 1em ;
        color: #00a0ff;
        }

    p  {
        font-weight: normal;
        font-size: 1.0em;
        line-height: 1.75em;
        color: #2f2f2f;
        padding: 0.5em 1.25em 1.5em 1.25em ;
        }

    p b {
        font-weight: bold;
        }

/* Box für je eine Beschreibung */
    #container {
        width: 100%;
        display: block;
        float: left;
        margin: 0em;
        padding: 0em;
        background-color: #fff;
        }

/* Ausrichtung der Bilder */
    img {
        max-width: 100%;
        background-position: center;
        margin: 0em;
        padding: 0em;
        }

/* Ausrichtung der Passbilder */
    #psb {
        max-width: 31%;
        border-radius: 5%;
        display: inline;
        float: left;
        margin: 2em 1.25em 0.25em 1.25em;
        padding: 0em;
        }

    .psbtext {
    text-align: justify;
    }



/* Back to TOP - Link , Angabe befindet sich unten im Seitenfuß */

    #btp {
        font-size: 0.75em;
        text-align: center;
        color: #fff;
        padding: 0.5em 1.25em 0.75em 1.25em ;
        }

    #btp a {
        color: #fff;
        }

    a.btp{
        background-repeat: no-repeat;
        text-decoration: none;
        float: right;
        }

/* Allgemeine Menü - Einstellungen */
    input#hamburg {
        display: none;
        }

    nav.topmenu li {
        list-style: none;
        }


/* ------------------------- Mobile Darstellung bis 800px Breite-------------------------------------------------------*/

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

/* Inhalt nur für mobile Darstellung */
    .nurmobil{ display: block; }
    .others { display: none; }

/* Ausrichtung des Seiteninhalts */

    #ausrichtung {
        margin: 0 auto;
        max-width: 800px;
        height: 100%;
        padding: 0em;
        background-color: #fff;
        display: block;
        }

/* Menü-Button einblenden und Menüleiste ausblenden */

        #nav-menue{
        float: left;
        width: 100%;
        display: block;
        background-color: #00a0ff;
        margin-bottom: 0em;
        padding: 0.5em 0em
        }

        label.hamburg {
                display: block;
                background: #00a0ff; width: 75px; height: 54px;
                position: relative;
                margin-left: auto;
                margin-right: 0.5em;
                border-radius: 4px;
                transition: 0.5s;
                }

        input#hamburg {display:none}

        .line {
                position: absolute;
                left:10px;
                height: 4px; width: 55px;
                background: #2f2f2f;
                border-radius: 2px;
                display: block;
                transition: 0.5s;
                transform-origin: center;
                }

        .line:nth-child(1) { top: 12px; }
        .line:nth-child(2) { top: 24px; }
        .line:nth-child(3) { top: 36px; }

        #hamburg:checked + .hamburg .line:nth-child(1){
                transform: translateY(12px) rotate(-45deg);
                }

        #hamburg:checked + .hamburg .line:nth-child(2){
                opacity:0;
                }

        #hamburg:checked + .hamburg .line:nth-child(3){
                transform: translateY(-12px) rotate(45deg);
                }


    #hamburg:checked + .hamburg  + nav.topmenu {
                max-height: 600px;
        }

    nav.topmenu {
        height: auto;
        max-height: 0;
        overflow: hidden;
        transition: all 1.5s;
        }

        nav.topmenu a {
                display: block;
                float: left;
                width: 100%;
                padding: 0.85em 0em;
                text-decoration: none;
                color: #2f2f2f;
                background-color: #fff;
                border-top: 1px dotted;
                border-color: #2f2f2f;
                font-size: 1.1em;
                font-weight: bold;
                text-align: center;
                }

/* Starteintrag Menü - Einstellungen */
        #ico{
             display: block;
                float:left;
                height: 54px;
                width: auto;
                margin-left: 0.5em;
                text-decoration: none;
                text-align: center;
                align-content: center;
                color: #2f2f2f;
                background-color: #00a0ff;
                font-size: 2em;
                font-weight: bold;
                }

}

/* ------------------------- Tablet Darstellung von 800px bis 1280px Breite -------------------------------------------------------*/

@media only screen and (min-width: 801px)
{

/* Inhalt hier nur für mobile Darstellung ausblenden*/
    .nurmobil{ display: none; }
    .others { display: block; }

/* Ausrichtung des Seiteninhalts */

    #ausrichtung {
        margin: 0 auto;
        max-width: 1440px;
        padding-top: 1em;
        height: 100%;
        background-color: #00a0ff;
        display: block;
        }

/* Menüleiste einblenden und Menü-Button ausblenden */

    #nav-menue{
        background-color: #00a0ff;
        float: left;
        width: 100%;
        margin-bottom: 0em;
        }

        nav.topmenu li {
        float: left;
        }

        nav.topmenu a {
                display: block;
                height: 100%;
                width: auto;
                padding: 0.75em 0.5em;
                text-decoration: none;
                color: #2f2f2f;
                background-color: #00a0ff;
                font-size: 1em;
                font-weight: normal;
                transition: 0.25s;
                }

    nav.topmenu a:hover {
        background-color: #00a0ff;
        color: #2f2f2f;
        text-decoration: underline;
        text-decoration-style: dotted;
         transition: 0.25s;
        }

/* Starteintrag Menü - Einstellungen */
        #ico {
             display: block;
                float:left;
                height: 100%;
                width: auto;
                padding: 0.75em 0.5em;
                text-decoration: none;
                color: #2f2f2f;
                background-color: #00a0ff;
                font-size: 2em;
                font-weight: bold;
               }


/* Schriftenformatierungen */
    h1 {
        font-weight: bold;
        font-size: 2em;
        line-height: 1.5em;
        padding: 0.75em 0.75em 0.75em 0.75em ;
        color: #fff;
        }

    h2 {
        font-weight: bold;
        font-size: 1.5em;
        line-height: 1.25em;
        padding: 1.5em 1em 0.5em 1em ;
        color: #00a0ff;
        }

    p  {
        font-weight: normal;
        font-size: 1.15em;
        line-height: 1.75em;
        color: #2f2f2f;
        padding: 0.5em 1.25em 1em 1.25em ;
        }

/* Ausrichtung der Passbilder */
    #psb {
        max-width: 20%;
        border-radius: 5%;
        display: inline;
        float: left;
        margin: 2.5em 1.5em 2.5em 1.5em;
        padding: 0em;
        }

    .psbtext {
        text-align: left;
        padding-right: 10%;
        }

}

/* ------------------------- PC Darstellung für Standartmonitore von 1280px bis 1920px  -------------------------------------------------------*/

@media only screen and (min-width: 1281px)
{

/* Inhalt hier nur für mobile Darstellung ausblenden*/
    .nurmobil{ display: none; }
    .others { display: block; }

/* Ausrichtung des Seiteninhalts */

    #ausrichtung {
        margin: 0 auto;
        max-width: 1920px;
        padding-top: 2em;
        height: 100%;
        background-color: #00a0ff;
        display: block;
        }

/* Menüleiste einblenden und Menü-Button ausblenden */

    #nav-menue{
        background-color: #00a0ff;
        float: left;
        width: 100%;
        margin-bottom: 0em;
        padding: 0em 0em;
        }

    nav.topmenu a {
                display: block;
                height: 100%;
                width: auto;
                padding: 0.4em 0.6em;
                text-decoration: none;
                color: #2f2f2f;
                background-color: #00a0ff;
                font-size: 1.5em;
                font-weight: normal;
                transition: 0.4s;
                }

    nav.topmenu a:hover {
        background-color: #00a0ff;
        color: #2f2f2f;
        text-decoration: underline;
        text-decoration-style: dotted;
        }



/* Starteintrag Menü - Einstellungen */
        #ico{
             display: block;
                float:left;
                height: 100%;
                width: auto;
                padding: 0.25em 1.5em 0.5em 0.25em;
                text-decoration: none;
                color: #2f2f2f;
                background-color: #00a0ff;
                font-size: 3em;
                font-weight: bold;
               }


/* Schriftenformatierungen */
    h1 {
        font-weight: bold;
        font-size: 3em;
        line-height: 1.5em;
        padding: 1em 1em 1em 1em ;
        color: #fff;
        }

    h2 {
        font-weight: bold;
        font-size: 2em;
        line-height: 1.25em;
        padding: 1em 1.5em 0.5em 1.5em ;
        color: #00a0ff;
        }

    p  {
        font-weight: normal;
        font-size: 1.5em;
        line-height: 1.75em;
        color: #2f2f2f;
        padding: 0.5em 2em 1em 2em ;
        }

/* Ausrichtung der Passbilder */
    #psb {
        max-width: 17%;
        border-radius: 50%;
        display: inline;
        float: left;
        margin: 2.5em 3em 2.5em 3em;
        padding: 0em;
        }

    .psbtext {
        text-align: left;
        padding-right: 10%;
        }

}