@import url("https://use.typekit.net/meh0rzv.css");

/* Reset */
*{
    margin:0;
    padding:0;
    -mozbox-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
}

/*verwendete Schriften*/
h1{
    font:1.750rem/2rem 'arial', sans-serif;
    font-weight: bold;
    font-style: normal;
    color: #26495c;
}

/*Textgröße 2-Variante 1*/
.fontSize2-1{
    display: block;
    font:1.500rem/1.75rem 'arial', sans-serif;
    font-weight: bold;
    font-style: normal;
    color:#26495c;
}

/*Textgröße 2-Variante 2*/
.fontSize2-2{
    font:1.500rem/1.25rem 'skolar-sans-latin', sans-serif;
    font-weight:normal;
    font-style: italic;
    color:#26495c;
}

/*Textgröße 3*/
.fontSize3{
    font:1.250rem/1.75rem 'arial', sans-serif;
    font-weight: bold;
    font-style: normal;
    color:#26495c;
    padding-left: 60px;
}

/*Textgröße 4*/
.fontSize4{
    font:1.125rem/1.75rem 'arial', sans-serif;
    font-weight: bold;
    font-style: normal;
    color:#312783;
}

/* allgemeiner Text und Linktexte */
body, p{
    font: 1.2500rem/1.75rem 'tk-skolar-sans-latin', 'skolar-sans-latin', sans-serif;
    text-align: left;
}

li, a{
    font: 1rem/0.8rem 'skolar-sans-latin', sans-serif;
}

   
/* wrapper */
.wrapper{
    max-width: 1250px;
    padding: 0 25px;
    margin: 0 auto;
}

/*Hauptmenü*/

#horizontal-list {
    display: flex; /* Verwendet Flexbox-Layout */
    justify-content: space-between; /* Verteilt Elemente gleichmäßig */
    list-style: none; /* Entfernt die Aufzählungspunkte */
    float: right;
    margin-top: 0.5rem;
}
  
#horizontal-list li {
    flex: 1; /* Alle Listenelemente haben das gleiche Flex-Gewicht */
    text-align: center; /* Optional: Zentriert den Text horizontal */
    background-color: #d7a663;
    margin: 0.25rem;
    position: relative;
}

#horizontal-list li:hover{
    background-color:#96cff7;
}


#horizontal-list li:last-child {
    margin-right: 0;
}

#horizontal-list a {
    text-decoration: none;
    display: block;
}

.active {
    font-weight: bold; 
    background-color: #96cff7;
}
  
ul#horizontal-list a.link1row{
    padding: 0.7rem 0.5rem 1rem 0.5rem;
    color: #312783;
}

ul#horizontal-list a.link2row{
    padding: 0.7rem 1rem 1rem 1rem;
    color: #312783;
}

/*Subnavigation des Hauptmenüs*/
#subnavigation li{
    background-color:  #d7a663;
    color: #312783;
    text-align: center;
    display: block;
    width: 85px;
}

#subnavigation li a{
    text-decoration: none;
    display: block;
}

#subnavigation {
    display: none; /*Ausgangszustand unsichtbar*/
    position: absolute;
    top: 1.75rem;
    left: -0.75rem;
    z-index: 1;
}

#horizontal-list > li:hover #subnavigation {
    padding: 0.25rem 0.5rem 0.5rem 0.5rem;
    display: block;
}


/*NavigationsIcon für Smartphones bleibt ausgeblendet*/
.nav-toggle { display:none; }


.nav-list-item{
    list-style-type: none;
    display: block;
    float: left;
    margin-right: 2rem;
    margin-top: 10rem;
    border-width: 1rem;
    border-color:  solid black;
}

.nav-list-item-link{
    color: #312783;
    text-decoration: none;
    padding: 0.5rem 0.25rem 0.25rem 0.25rem;
    min-width: min-content;
    border: 0.2rem solid #d7a663;
    margin-left: 2rem;
    margin-right: 2rem;
}

.nav-list-item-link:hover{
    color: #394350;
    background-color:#96cff7;
    border-bottom: 0.2rem solid #d7a663;
}

.column {
    float: left;
    margin: 35px 0px 0px 0%;
    text-align: center;
}

.column:first-child{
    margin-left: 0px;
}

.row{
    background: white;
    margin: 0 auto;
}

.row:first-child{
    margin-top: 0px;
}

/*Einstellungen INDEX-Seite*/

    /* Einstellungen für Texte unter 4 Bildern setzen */
.Textbox{
    background-color: #cde1ff;
    width: 66%;
    margin-left: 17.1%;
    margin-top: -4px;
    padding-top: 26px;
    padding-bottom: 20px;
}

    /* Mehr Erfahren-Link Einstellungen */
.MehrErfahren-Link{
    width: 180px;
    height: 32px;
    background-color: #d7a663;
    margin-top: -10px;
    margin-left: 85.65%;
    padding-top: 5px;
    font:20px 'arial', sans-serif;
    color:#312783;
    text-align: center;
}

    /* Anschauen-Link Einstellungen */
.Anschauen-Link{
    width: 180px;
    height: 32px;
    background-color: #d7a663;
    margin-top: -10px;
    margin-left: 53%;
    padding-top: 5px;
    font:20px 'arial', sans-serif;
    font-weight: bold;
    display: block;
    color:#312783;
    text-align: center;
}

    /* Einstellungen für Text unter Bildern*/

.Text-under-Photos{
    background-color: #d7a663;
    font-style: normal;
    text-align: center;
    padding-bottom: 5px;
    font-weight: bold;
}

    /* Einstellungen für Text Zitat Unbekannt*/
.zitat{
    font:1.5rem/1.25rem 'skolar-sans-latin', sans-serif;
    font-style: italic;
    text-align: left;
    font-weight:normal;
    line-height: 1.3;
    color:#26495c;
}

    /* Einstellungen für Buttons beim Zeitfenster*/
.btn_Geschichte{
    width: 100%;
    height: auto;
    background-color: #96cff7;
    color:#312783;
    text-align: left;
    padding: 2px 10px;
    font:0.3rem 'arial', sans-serif;
    font-weight: bold;
    font-style: normal;
    margin: 1px;
    margin-left: 15px;
    display: inline-block;
    transition: all 0.15s ease-out 0s;
}

.btn_Geschichte:hover{
    background-color: #d7a663;
}

.headline_Geschichte{
    width: 100%;
    height: 32px;
    background-color: #d7a663;
    font:1.250em 'arial', sans-serif;
    color:#312783;
    text-align: center;
    padding: 5px;
    display: inline-block;
}

#HeadLineImage{
    max-width: 100%;
    height: auto;
}

/* Einstellungen Schicksalsjahre */
#Wochenschauvideo{
    width: 800px; 
    height: 500px; 
}

#Gottesdienst, #Postkarte, #Ensemble{
    width:60%;
    height:auto; 
}

#Kirchenschiff1, #Kirchenschiff2{
    width:400px;
    height:auto;
}

#Briefmarken{
    width: 600px;
    height: auto; 
}

#vor1945 {
    width: 250px;
    height: auto;
    padding-left: 20px;
}

#nach1945, #Turmspitze2{
    width: 250px;
    height: auto;
    padding-right: 10px;
}

#Turmspitze1, #Turmspitze2{
    width: 250px;
    height: auto;
    padding: 20px;
}


/* Video Einstellungen - erzählte Geschichte*/

#VideoObject1{
    display:block;
    margin-left: 1.22rem;
    width: 552px; 
    height: 414px;
}

/*Einstellungen Mosaiken */
#Lageplan_Gedächtniskirche{
    width: 447px;
    height: 231px;
}

#iframeRundgang{
    width: 960px;
    height: 700px; 
}

#Hohenzollernzug{
    width: 700px;
    height: 451px;
}

#GrabWilhelm{
    width: 700px;
    height: 465px;
}

/*Einstellungen Drohnenflug*/
#Breitscheidplatz{
    width: 702px;
    height: 390px;
}

#videoAufsteigend{
    width: 100%;
    height: 564px;
}

#iframeAround{
    width: 100%;
    height: 560px;
}

#iframeAround2{
    width: 100%;
    height: 570px;
}

/*Einstellugen Fotomontage*/

#Lageplan2_Gedächtniskirche{
    width: 600px;
    height: 412px;
}

#iframeTauenzien{
    width:820px;
    height:560px;
}

#iframeHardenberg{
    width: 820px;
    height:560px;
}

#iframeBudapester{
    width: 820px;
    height:750px;
    
}

/*Einstellungen 3D Modell */
#FotoGedächtniskirche{
    width: 500px;
    height: 437px;
}

#iFrame3DModell{
    width: 80%;
}

#Modell1{
    width:345px;
}
 
#Modell2{
    width:250px;
}

#Modell3{
    width:600px;
}


/* Clearfix */
.row:before,
.row:after {
    content: " ";
    display: table;
}
    
.row::after {
    clear: both;
}

/* Raster */
 
.col_1{
    width: 100%;
}

.col_1_2{
    width: 47.5%;
}

.col_1_2oSpace{
    width:50%;
}
    
.col_1_3{
    width: 33.33%;
}

.col_2_3{
    width: 65%;
}
    
.col_1_4{
    width: 21.25%;
}

.col_1_4oSpace{
    width: 25%;
}

.col_3_4{
    width: 73.75%;
}

.col_1_5{
    width: 20%;
}

.col_3_5{
    width: 60%;
}

.col_1_10{
    width: 10%;
}

.col_1-5_10{
    width: 15%;
}

.col_7_10{
    width: 70%;
}

.col_8_10{
    width: 80%;
}

/* spezielle allgemeine Einstellungen */

.EM1_5{
    font-size: 1.5em;
}

.BG_darkblue{
    background-color: #96cff7;
}

.BG_lightblue{
    background-color: #cde1ff;
}

.BG_orange{
    background-color: #d7a663;
}

.ColorRed{
    color: red;
}

.ColorBlue{
    color: blue;
}

.ColorGreen{
    color:green;
}

.ColorBeige{
    color:#d7a663;
}

hr{
    width: 100%;
    border: 3px solid #d7a663;
}

.float_right{
    float: right;
}

.text_align_right{
    text-align: right;
}

.text_align_left{
    text-align: left;
}

.text_align_center{
    text-align: center;
}



ul{
    list-style-type: none;
}

.pad_top5_pad_bot5{
    padding-top: 5px; 
    padding-bottom: 5px;
}

.pad_top10_pad_bot10{
    padding-top: 10px; 
    padding-bottom: 10px;
}

.pad_top20_pad_bot17{
    padding-top: 20px; padding-bottom: 17px;
}

.pad_bot14{
    padding-bottom: 14px;
}

.pad_bot10{
    padding-bottom: 10px;
}

.pad_top5{
    padding-top:5px;
}

.pad20{
    padding: 20px;
}

.pad25{
    padding: 25px;
}

.pad_left75{
    padding-left: 75px;
}

.pad_left70{
    padding-left: 70px;
}

.pad_right70{
    padding-right: 70px;
}

.margin_top10{
    margin-top: 10px;
}

.margin_top30{
    margin-top: 30px;
}

.margin_top-25{
    margin-top: -25px;
}

.margin0{
    margin: 0px;
}

.margin_left20{
    margin-left: 20px;
}

.padding0{
    padding:0px;
}

.pad_left5{
    padding-left: 5px;
}



/* Media Queries */

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

    /* wrapper */
    .wrapper{
        max-width: 400px;
        padding: 0;
        margin: 0px auto;
    }

    /*Textgröße 2-Variante 2*/
    .fontSize2-2{
    font:1.5rem/2rem 'skolar-sans-latin', sans-serif;
    font-weight:normal;
    font-style: italic;
    color:#26495c;
    }
   
    .col_1, .col_1_2, .col_1_3, .col_2_3, .col_1_4, .col_1_4oSpace, .col_3_4, .col_1_5, .col_3_5, .col_1-5_10,  .col_7_10 {
        width: 100%;
    }

    .col_1_2oSpace{
        width: 400px;
    }

    hr{
        display: none;
    }

    /* Responsive Navigation */
    li, a{
        font: 1.25rem/0.8rem 'skolar-sans-latin', sans-serif;
        
    }

    #nav-open:target .nav-closed { display:block; } 

    .nav-toggle { display:block; }

    .nav-closed, #nav-closed:target .nav-closed, #nav-open:target .nav-open { display:none; }

    nav { display: none; }

    #nav-open:target nav, #nav-open:target #horizontal-list {
        display: block;
    }

    
    #horizontal-list {
        width: 360px;
        margin-bottom: 70px;
        list-style: none; 
    }

    #horizontal-list li {
        text-align: center;
        background-color: #d7a663;
        display: block;
        margin: 0;
    }

    #horizontal-list a {
        text-decoration: none;
        display: block;
        padding: 0.5rem 3rem 0.5rem 1rem;
    }

    /* Zeige das Untermenü an */
    #subnavigation {
        display: block; /*Ausgangszustand unsichtbar*/
        position: absolute;
        top: 2.3rem;
        left: 1.5rem;
        z-index: 1;
    }

    #subnavigation li{
        background-color:  #d7a663;
        color: #312783;
        text-align: center;
        display: block;
        width: 350px;
    }

    #subnavigation li a{
        text-decoration: none;
        padding: 0.5rem 6rem 0.5rem 1rem;
        width: 350px;
        display: block;
    }
    
    /*Abstände zwischen den Listeneinträgen*/
    ul#horizontal-list a.link1row{
        padding-bottom: 0.5rem;
        margin-bottom: 0.25rem;
    }

    ul#horizontal-list a.link2row{
        padding-left: 0.25rem;
        padding-right: 2rem;
        padding-bottom: 0.5rem;
        margin-bottom: 0.25rem;

    }
    
    /*Index.html-Seite Einstellungen*/

        /* Mehr Erfahren-Link Einstellungen */
    .MehrErfahren-Link{
        margin-left: 58%;
        margin-top: -13px;
    }

        /* Einstellungen für Texte unter 4 Bildern setzen */
    .Textbox{
        width: 100%;
        margin-left: 0%;
    }

        /* Anschauen-Link Einstellungen */
    .Anschauen-Link{
        margin-top: -12px;
        margin-left: 54%;
    }

    /* Einstellungen Schicksalsjahre */
    .pad_left75{
        padding-left: 0;
    }

    #Wochenschauvideo{
        width: 100%; 
        height: auto; 
        padding: 0.25rem;
    }
    #Gottesdienst, #Briefmarken, #Postkarte, #Ensemble{
        width: 100%; 
        height: auto; 
    }

    #Kirchenschiff1, #Kirchenschiff2{
        width:100%;
        height:auto;
        margin: 0px; 
        padding: 0px;
    }

    #vor1945{
        width: 100%;
        height:auto;
        margin: 0px; 
        padding: 0px;
    }
    
    #nach1945{
        width: 100%;
        height:auto;
        margin: 0px; 
        padding: 0px;
    }

    /* Einstellungen erzählte Geschichte */
    
    #Fotoaktuell, #Zeitleiste {
        width: 100%;
        height: 50%;        
    }
    #VideoObject1{
        display: block !important;
        margin-left: 0;
        margin-right: 20px;
        width: 388px;
        height: 290px;
        
    }

    /*Einstellungen Mosaiken */
    #Lageplan_Gedächtniskirche, #Hohenzollernzug, #GrabWilhelm{
        width: 100%;
        height: 50%; 
    }

    #iframeRundgang{
        margin-left: -5rem;
        width: 450px;
        height: 350px; 
        transform: scale(0.8);
    }

    /*Einstellungen Drohnenflug*/
    #Breitscheidplatz{
        width: 100%;
        height: 50%;
    }

    #videoAufsteigend{
        width: 100%;
        height: auto;
    }

    #iframeAround{
        width: 100%;
        height: auto;
    }

    /*Einstellungen Fotomontage*/
    #Lageplan2_Gedächtniskirche{
        width: 100%;
        height: 60%;
    }
    
    #iframeTauenzien{
        margin-left: -15.5rem;
        width: 600px;
        height: 450px;
        transform: scale(0.95);
    }

    #iframeHardenberg{
        margin-left: -15.5rem;
        width: 600px;
        height: 450px;
        transform: scale(0.95);
    }

    #iframeBudapester{
        margin-left: -15.5rem;
        width: 650px;
        height: 750px;
        transform: scale(0.8);
    }

    /*Einstellungen 3D Modell */
    #FotoGedächtniskirche{
        width: 100%;
        height: 60%;
    }

    #iFrame3DModell{
        width: 100%;
        height: auto;
    }

    #Modell1{
        width: 100%;
        height: auto;
    }
     
    #Modell2{
        width: 90%;
        height: auto;
    }
    
    #Modell3{
        width: 100%;
        height: auto;
    }
     
    /*Einstellungen Kontakt-Seite*/
    #Kontaktformular{
        width: 100%;
        height: 1667px;
        margin: 0px; 
        padding: 0px;
    }

    /*Einstellungen Newletter*/
    #Newsletter{
        width: 100%;
        height: 1000px;
        margin-bottom: -40px; 
              
    }

    /*Einstellungen Galerie-Seite*/
    .gallery_list{
       justify-content: space-around;
    }



}