@charset "utf-8";


@font-face {
    font-family: 'basker1';
    font-weight: normal;
    font-style: normal;
    src: local("LibreBaskerville-Regular"), url('../fonts/LibreBaskerville-Regular.ttf');
}

@font-face {
    font-family: 'basker2';
    font-weight: bold;
    font-style: normal;
    src: local("LibreBaskerville-Regular"), url('../fonts/LibreBaskerville-Bold.ttf');
}

@font-face {
    font-family: 'FU1';
    font-weight: normal;
    font-style: normal;
    src: local("FetteUNZFraktur.ttf"), url('../fonts/FetteUNZFraktur.ttf');
}


 /*--------- Ende Schriften ------------*/

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

html, body {
font-family:'basker1', arial,helvetica, roboto ,sans-serif;
font-size:62.5%;
line-height:1.5;
}


body {
    height: 100%;
    font-size: 1.8rem;
    margin: 0 auto;
    overflow-x: hidden;
    color: #26374A;
    background: #333366;
    background: radial-gradient(circle,#333366);
    color: #26374A;
}


/* ---- überschriften ----- */

h1, h2, h3, h4, h5 {text-align:left;
font-weight:bold;text-transform:none;
color:#26374A;
}

h2 {font-family: sserif;
font-size:2.6rem;
line-height: 3.3rem;
margin-top: 2rem;
margin-bottom: 3.5rem;
letter-spacing: 0rem;
}


h3 {color:#334B64;
font-size:2.1rem;
line-height: 3rem;
margin-top: .5rem;
margin-bottom:2.5rem;
letter-spacing: 0rem;
}

.h1 {
    color: #334B64;   
    font-size: 1.3rem;
    line-height: 3rem;
    margin-bottom: 2.5rem;
    letter-spacing: 0rem;
}

.h2 {
    color: #000033;
    font-size: 0.9rem;
}

.h3 {
    color: #334B64;
    font-size: 0.8rem;
    line-height: 3rem;
    margin-top: .5rem;
    margin-bottom: 2.5rem;
    letter-spacing: 0rem;
}

.h4 {
    color: #CC6600; /*rot braun*/
    font-size: 1.8rem;
    line-height: 3rem;
    margin-top: .5rem;
    margin-bottom: 2.5rem;
    letter-spacing: 0rem;
}

.h5 {
    color: #CC6600; /*rot braun*/
    font-size: 1.3rem;
    line-height: 3rem;
    margin-top: .5rem;
    margin-bottom: 2.5rem;
    letter-spacing: 0rem;
}

.h6 {
    font-size: 16px;
    color: #FFFF99;
    }


.h7 {
    font-family: FU1;
    font-size: 1.3rem;
    color: #993300;
}

.fetter-text {
    font-weight: bold;
}

.art {
      text-align: justify;
     }

.farb1 {
    color: #cc6600;
}

.texta {font-size: 0.8rem;}
.text5 {font-size: 16px; color: #FFFFCC;}
.text6 {text-align:left; font-size: 10px; color: #CCFFFF;}  /*Counter*/
.text7 {font-size: 18px;color: #FF6633;}
.text9 {font-size: 27px;color: #FFCC33;}

.abst1 {margin-top:2%; margin-bottom:2%;}
.abst2 {display: flex; gap: 100px;}
.abst3 {display: flex; flex-wrap: wrap; gap: 70px;}
.abst4 {text-align:center; margin-left: 1%;}


.zentriert {text-align:center;}
.zentriert-1 {display: grid; justify-content: center;align-items: center; margin-top: 20%;}
.mittig {text-align: center;}

.button-close::before {
    font-family: 'Font Awesome 5 Free'; 
    font-weight: 900;
    content: '\f00d'; 
    }

    /*---------- blocksatz -----------*/

    .block-s {            
        hyphens: auto;
        color: #ffcc66;
        text-align: center;
        text-justify: inter-word;
        width: 55%;
        padding: 0;
        margin: 0 auto;
    }
    /* ----- quelltext-erklärungen - wenn vorhanden ----- */

    pre {
        white-space: pre-wrap;
        position: relative;
        font-size: 1.5rem;
        font-family: 'bask1', tahoma,georgia, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto,sans-serif;
        padding: 0rem 1rem 2rem 1rem;
        margin: 4rem auto;
        text-align: center;
        border: dotted 0.1rem #686868;
        background: transparent;
    }

        pre .extra {
            display: inline-block;
            position: absolute;
            left: -1.5rem;
            top: 1.5rem;
            font-size: 1.8rem;
            color: #fff;
            font-weight: normal;
            background: #667886;
            padding: 0 .5rem;
            transform: rotate(-45deg);
        }
    
    a {
        color: #26374A;
        text-decoration: underline;
    }

    label a {
        cursor: pointer;
    }

    a:hover {
        color: #26374A;
        text-decoration: none;
    }
    /* bilder -anpassen e */

    img {
        max-width: 100%;
        display: block;
        margin: 0 auto;
        height: auto;
        border-radius: 1rem;
        box-shadow: none;
    }


    .button {
        display: block;
        margin: 3rem 0 1rem 0;
        text-align: left;
    }

        .button .mehr_lesen a {
            display: inline-block;
            color: #fff;
            background: #a5aeb8;
            text-transform: uppercase;
            font-size: 1.5rem;
            letter-spacing: 2px;
            border-radius: .5rem;
            text-decoration: none;
            padding: .4rem 1.5rem;
            cursor: pointer;
        }

            .button .mehr_lesen a:hover {
                color: #fff;
                background: #c0a780;
            }

    .liste-spez {
        display: block;
        padding: 0;
    }

        .liste-spez ul {
            text-align: left;
            margin: 0rem 0 0 0;
            padding: 0rem 0 0 2rem;
        }
       
        .liste-spez li {
            list-style: square;
        }

            .liste-spez li::marker {
                color: #788596;
            }

    .liste-spez-2 ul {
        text-align: left;
        margin: 0rem 0 0 -1rem;
        padding: 0rem 0 0 2rem;
    }

    .liste-spez-2 li {
        list-style: none;
        list-style-position: inside; 
        text-indent: -1.4rem; 
        padding-left: 1.5rem; 
    }

    .liste-spez-2 i {
        transform: scale(.9);
        padding-right: .8rem;
        color: #788596;
    }

    .liste-spez-2 li a:hover i {
        color: #c0a780;
    }


    .box {
        display: inline-block;
        text-align: left;
        vertical-align: top;
        width: 100%;
        padding: 2rem;
        margin: 0 -.25rem -.25rem -.25rem; /* ausgleich ( minus-margin) f�r INLINE-BLOCK-WHITESPACE-BUG*/
    }

.box2 {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    width: 90%;
    padding: 2rem;
    margin: 0 -.25rem -.25rem -.25rem; 
    border-radius: 3px;
}

    .box-1_of_1,
    .box-1_of_2,
    .box-1_of_3,
    .box-1_of_4,
    .box-1_of_5 {
        width: 100%;
    }
    /* ---------- boxen - bilder ---------- */

    .bilder {
        margin: -.2rem -1rem;
        text-align: center;
    }

        .bilder .box {
            padding: 1rem;
        }

        .bilder .box-1_of_1,
        .bilder .box-1_of_2,
        .bilder .box-1_of_3,
        .bilder .box-1_of_4 {
            width: 100%;
        }

        .bilder .box-1_of_4b {
            width: 50%;
          }

        .bilder.gallery .box-1_of_2 {
            width: 50%;
        }

        .bilder.gallery .box-1_of_3 {
            width: 33.33%;
        }

        .bilder.gallery .box-1_of_4 {
            width: 50%;
        }

        .bilder.gallery img {
            border-radius: .5rem;
        }

        .bilder.gallery2 img {
            border-radius: 0.1rem;
        }

.bilder-container {
   flex-wrap: wrap; 
    gap: 15px; /* Abstand zwischen den Bildern */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    padding: 20px;
}

    .bild-container figure {
        margin: 0; 
        text-align: center; 
        flex: 1; 
    }

    .bild-container img {
        width: 70%; /* Bild passt sich der Breite des Bereichs an */
        height: auto; /* Proportionen bleiben erhalten */
    }


summary {
    font-size: 1.0rem;
    font-weight: bold;
    cursor: pointer;
    outline: none; /* Blauen Rahmen beim Klicken entfernen */
}


.image-reveal {
    animation: linear reveal both;
    animation-timeline: view();
    animation-range: entry 25% cover 50%;
}
           /* muss neu gemacht werden! */


    a:hover img {
        max-width: 100%;
    }
    /*  ---------- boxen - andere ---------- */

    .wrapper {
        display: inline-block;
        width: 100%;
        background: #9999CC;
        box-shadow: none;
        border-radius: 0.5rem;
        padding: 0rem;
    }
    /* -------  nur die verschachtelten 2er-boxen bei .special ------------ */

    .special.box.box-1_of_2 {
        width: 100%;
    }

    #fuss .box-1_of_3 {
        width: 100%;
    }


    header {
        display: block;
        height: 100%;
        padding: 1.5rem 0 0 0;
    }

    #logo {
        display: block;
        text-align: center;
        padding: 0 1.5rem;
    }

    .logo-a, .logo-b {
        display: inline-block;
        width: 100%;
        margin: 1.5rem 0;
        padding: 0rem;
    }
    
        .logo-a.wrapper {
            background: #9999CC;
            background: radial-gradient(circle,#9999CC);
        }

        .logo-a .box {
            padding: 0rem;
        }

    /*------------------  Themen Dateien Hauptbild ------------------*/


    .logo-c.wrapper {
        width: 50%;
        min-height: 35rem;
        background-image: url(../grafik/zukunft.png);
        background-repeat: no-repeat;
        background-position: 50% 70%;
        background-size: cover;
    }

    .logo-d.wrapper {
        width: 50%;
        min-height: 40rem;
        background-image: url(../grafik/sehnsucht.png);
        background-repeat: no-repeat;
        background-position: 50% 70%;
        background-size: cover;
    }

.logo-e.wrapper {
    width: 50%;
    min-height: 35rem;
    background-image: url(../grafik/wahrheit.png);
    background-repeat: no-repeat;
    background-position: 50% 70%;
    background-size: cover;
}

.logo-f.wrapper {
    width: 50%;
    min-height: 40rem;
    background-image: url(../grafik/geschichte.png);
    background-repeat: no-repeat;
    background-position: 50% 70%;
    background-size: cover;
}

.logo-g.wrapper {
    width: 50%;
    min-height: 40rem;
    background-image: url(../grafik/mystik.png);
    background-repeat: no-repeat;
    background-position: 50% 70%;
    background-size: cover;
}

.logo-h.wrapper {
    width: 50%;
    min-height: 35rem;
    background-image: url(../grafik/evolution.png);
    background-repeat: no-repeat;
    background-position: 50% 70%;
    background-size: cover;
}

.logo-i.wrapper {
    width: 50%;
    min-height: 35rem;
    background-image: url(../grafik/literatur.png);
    background-repeat: no-repeat;
    background-position: 50% 70%;
    background-size: cover;
}

.logo-j.wrapper {
    width: 50%;
    min-height: 35rem;
    background-image: url(../grafik/news.png);
    background-repeat: no-repeat;
    background-position: 50% 70%;
    background-size: cover;
}

.logo-k.wrapper {
    width: 50%;
    min-height: 35rem;
    background-image: url(../grafik/schreiben.png);
    background-repeat: no-repeat;
    background-position: 50% 70%;
    background-size: cover;
}

.logo-l.wrapper {
    width: 50%;
    min-height: 35rem;
    background-image: url(../grafik/login.png);
    background-repeat: no-repeat;
    background-position: 50% 70%;
    background-size: cover;
}

.logo-m.wrapper {
    width: 50%;
    min-height: 35rem;
    background-image: url(../grafik/diadem.png);
    background-repeat: no-repeat;
    background-position: 50% 70%;
    background-size: cover;
}
    /*---------------------------- Ende Themen Dateien ------------------*/

    #logo .fhm {
        display: block;
        font-family: FU1;
        text-align: center;
        color: #993300;
        font-weight: normal;
        text-transform: uppercase;
        font-size: 2.1rem;
        line-height: 2.4rem;
        letter-spacing: 1px;
        margin: 0;
        padding: 1rem;
    }

    .slogan {
        display: block;
        text-shadow: 0px 0px 1px #fff;
        font-family: basker1;
        font-size: 1.1rem;
        color: #993300;
        line-height: 2rem;
        padding: .5rem .5rem;
    }

    #logo .name {
        display: block;
        font-family: FU1;
        text-align: center;
        color: #26374A;
        font-weight: normal;
        text-transform: uppercase;
        font-size: 2.1rem;
        line-height: 2.4rem;
        letter-spacing: 1px;
        margin: 0;
        padding: 1rem;
    }


    main#inhalt {
        display: block;
        text-align: center;
        padding: 0 1.5rem;
    }

    .inhalt-a {
        display: inline-block;
        width: 100%;
        margin: 1.5rem 0;
        padding: 0rem;
    }

    footer#fuss {
        display: block;
        text-align: center;
        padding: 0 1.5rem 1.5rem 1.5rem;
    }

    .fuss-a {
        display: inline-block;
        width: 100%;
        text-align: left;
        margin: 1.5rem 0;
        padding: 0rem;
    }

    #fuss .box {
        margin-bottom: -2rem;
    }


        #fuss .box h3 {
            text-align: left;
            font-size: 1.7rem;
            color: #26374A;
            letter-spacing: 2px;
            font-weight: bold;
            text-transform: uppercase;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

            #fuss .box h3:after {
                display: block;
                border-top: 1px solid #6F6F6F;
                width: 30px;
                content: "";
                margin-top: 1rem;
                margin-bottom: 0rem;
            }

        #fuss .box article:nth-child(2) {
            margin-top: 3rem;
        }


    .fuss-a,
    .fuss-a a {
        color: #26374A;
        text-shadow: none;
        font-weight: normal;
        font-size: 1.6rem;
        line-height: 2.8rem;
        text-decoration: none;
    }

    .fussmenu ul {
        text-align: left;
        padding: 0;
        margin: 0;
    }

    .fussmenu li {
        list-style: none;
    }

    #fuss li a:hover {
        color: #715a35;
        text-decoration: none;
    }
   

    .fussmenu ul.social li {
        display: inline-block;
        margin-right: 1rem;
        margin-bottom: 1rem;
    }

        .fussmenu ul.social li i {
            display: block;
            color: #667886;
            transition: all .6s ease-out;
        }

        .fussmenu ul.social li a:hover i {
            color: #c0a780;
            transform: rotate(720deg)
        }

/* -------------------- Button Navigation hellblauer Untergrund ---------------- */
.btn ul {
    width: 30rem;
    padding: 0;
    margin: 0 auto;
}

.btn li {
    list-style-type: none;
    padding: 0 .3rem;
    margin: 0;
    border: 0;
}

.btn a {
    display: table-cell;
    width: 26rem;
    background: #3399FF;
    border-radius: 5px;
    color: #ffffff;
    box-shadow: 0px 0px 2px #ffffff;
    padding: .5rem 0rem;
    text-decoration: none;
}

    .btn a:hover {
        color: #ffffff;
        background: #3399FF;
    }

  
    /* CSS Bildschirmabfragen */
    /* ==================================== ab 320 pixel ================================== */
    @media (min-width: 320px) {
        
    }
    /* ==================================== ab 360 pixel ================================== */
    @media (min-width: 360px) {
        /* keine angabe */
    }
    /* ==================================== ab 480 pixel ================================== */
    @media (min-width: 480px) {

        html {
            font-size: 70%;
        }

        .wrapper {
            padding: .7rem 1rem 1rem 1rem
        }

        .bilder .box-1_of_4 {
            width: 50%;
        }
    }
    /* ==================================== ab 580 pixel ================================== */
    @media (min-width: 580px) {

        .wrapper {
            width: 90%;
        }

        .bilder .box-1_of_2 {
            width: 50%;
        }

        .bilder.gallery .box-1_of_4 {
            width: 25%;
        }
    }
    /* ==================================== ab 640 pixel ================================== */
    @media (min-width: 640px) {

        #fuss .box-1_of_3 {
            width: 50%;
        }
    }
    /* ==================================== ab 760 pixel ================================== */
    @media (min-width: 760px) {

        html {
            font-size: 80%;
        }

        .wrapper {
            width: 700px;
        }
        
        #logo .seitentitel {
            display: none;
        }

        #logo .name {
            font-size: 2.8rem;
            line-height: 3.2rem;
        }

            #logo .name .slogan {
                font-size: 1.9rem;
                line-height: 2.2rem;
                padding: 0rem 0rem;
            }

        .logo-a .box {
            padding: 1rem;
        }
    }
    /* ==================================== ab 800 pixel ================================== */
    @media (min-width: 800px) {
        /* keine Angabe */
    }
    /* ===================================== ab 960 pixel ================================= */
    @media (min-width: 960px) {

        html {
            font-size: 70%;
        }

        .wrapper {
            width: 95%;
        }

        .bilder.gallery img {
            border-radius: 2rem;
        }

        .bilder .box-1_of_3 {
            width: 33.33%;
        }

        .bilder .box-1_of_4 {
            width: 25%;
        }
       
        .special.box {
            vertical-align: middle;
        }
            /* -- zweite Box (2er-boxen) bei .special */
            .special.box.box-1_of_2 {
                width: 50%;
            }

        .fuss-a, .fuss-a a {
            font-size: 1.3rem;
        }

        #fuss .box h3 {
            font-size: 1.3rem;
        }

        #fuss .box-1_of_3 {
            width: 33.33%;
        }
       
        #fuss .box article:nth-child(2) {
            margin-top: .5rem;
        }
    }
    /* ===================================== ab 1024 pixel ================================= */
@media (min-width: 1024px) {
    
    pre {
        width: 70%;
    }

    .btn ul {
        width: 80rem;
    }

    .btn li {
        display: inline-block;
    }

    }
    /* ===================================== ab 1200 pixel ================================= */
    @media (min-width: 1200px) {

        html {
            font-size: 80%;
        }
    }
    /* ===================================== ab 1300 pixel ================================= */
    @media (min-width: 1300px) {

        html {
            font-size: 85%;
        }

        .wrapper {
            width: 1250px;
        }
    }