/* architects-daughter-regular - latin */
@font-face {
    font-family: 'Architects Daughter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/architects-daughter-v18-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/architects-daughter-v18-latin/architects-daughter-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/architects-daughter-v18-latin/architects-daughter-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/architects-daughter-v18-latin/architects-daughter-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/architects-daughter-v18-latin/architects-daughter-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/architects-daughter-v18-latin/architects-daughter-v18-latin-regular.svg#ArchitectsDaughter') format('svg'); /* Legacy iOS */
  }

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
*:before, *:after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html, body{
    /*z-index: -1000; /* bei Bedarf anpassen */
    width: 100%;
    height: 100%;
    /*background-image: url('../image/bg-gruen-blau-landscape_900x506.png');*/
    background-image: url('../image/bg/mcscott-Alamy-PTYHB1-web-hg-blau-tuerkis_3840x2160-v2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    opacity: 1; /* soll der "Bild"-Wrapper nicht zu sehen sein, z.B. weil ein Video-Wrapper eingesetzt wird und nur das Video zu sehen sein soll, muss der Opacity-Wert auf Null gesetzt werden */
}

#txtcrimson {color: crimson;}
#txtyellow {color: yellow;}
#txtcoral {color: coral;}
#txtgreenyellow {color: greenyellow;}
#txtnavy {color: navy;}
#txtdarkred {color: darkred;}

#mainheader{
    /*background-color: yellowgreen;*/
    /*position: fixed;*/
    position: absolute; /* geändert von "fixed" */
    height: 91px;
    width: 100%;
    top: 0px;
    left: 0;
    /*background-image: url('../image/Thai_900x91.png');*/
    background-image: url('../image/Zingst-Okt22_07_900x91.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
}
#headereintrag{
    color: antiquewhite;
    /*position: fixed;*/
    position: absolute; /* geändert von "fixed" */
    height: 80px;
    right: 20px;
    margin-top: 5px;
    font-weight: bold;
    font-size: 2em;
    line-height: 2.5em;
    font-family: 'Architects Daughter', cursive;
}
#logo{
    /*position: fixed;*/
    position: absolute; /* geändert von "fixed" */
    left: 0;
    margin: 5px auto auto 5px;
}
#logo img{
    width: 80px;
    height: 80px;
    border: 1px solid silver;
    border-radius: 10px;
    opacity: 1;
}
#logo figcaption a{
    /*position: fixed;*/
    position: absolute; /* geändert von "fixed" */
    top: 56px;
    left: 14px;
    
    font-family: 'Architects Daughter', cursive;
    color: antiquewhite;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: bold;
}
#logo figcaption a:hover{
    text-decoration: underline;
    color: yellow;
    font-weight: bold;
    opacity: 1.0;
}
#logo img:hover{
    opacity: 0.8;
}
#nav-menue {
    background-color: darkgray;
    position: relative;
    width: 100%;
    height: 2.0em;
    margin-top: 91px;
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;   
    opacity: 0.9;
}
#nav-menue ul{
    margin-right: 18px
}
#nav-menue ul #home-link{
    display: none;
}
#nav-menue li{
    display: inline-block;
    margin-left: 15px;
    font-size: 1.0em;
    line-height: 1.0em;
    text-align: center;
}
#nav-menue li:hover{
    background-color: darkgrey;
}
.nav-a-link{
    text-decoration: none;
    color: antiquewhite;
    font-weight: bold;
}
.nav-a-link:hover{
    color: darkblue;
    text-decoration: underline;
}



#startinfo{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    border: 1px solid red;
    border-radius: 15px;
    margin-top: 150px;
    /*padding: 0px 10px;*/
    z-index: -1000;
}
#seitenanfang{
    font-size: 4em;
    font-weight: bold;
    letter-spacing: 0.2em;
    text-shadow: white 5px 2px 10px;
    padding-top: 10px;
}
#startinfo p{
    padding: 5px 0px;
    color: red;
    /*font-weight: bold;*/
}





#main-footer{
    background-color: darkgray;
    opacity: 0.9;
    /*position: fixed;*/ /* geändert: fixed entaktiviert */
    /*margin-bottom: 0;*/ /* geändert: margin-bottom:0; entaktiviert */
    width: 100%;
    height: 2em;
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    text-align: center;
}
#main-footer p{
    font-family: 'Architects Daughter', cursive;
    color:darkslategray;
    line-height: 2em;
    font-weight: bold;
}
#main-footer li, #main-footer a{
    display: inline-block;
    font-family: 'Architects Daughter', cursive;
    color:darkslategray;
    line-height: 2em;
    font-weight: bold;
    margin-left: 10px;
    margin-right: 10px;
    text-decoration: none;
}
#main-footer li a:hover{
    color: darkblue;
    text-decoration: underline;
}
#abmeldebereich a{
    color: darkred;
    /*background-color: lightsalmon;*/
    background-color: tomato;
    line-height: 1em;
}
#abmeldebereich:hover{
    /*background-color: greenyellow;*/
    background-color: crimson;
    border: 1px solid black;
    border-radius: 25px 10px;    
}
#abmeldebereich a:hover{
    /*background-color: greenyellow;*/
    background-color: crimson;
    color: white;
}

/* der 'Toggle-Button', der in HTML gesetzt wurde, soll in der normalen Anzeige-Version für über 544px = 34.00em Bildbreite nicht zu sehen sein: */
.menue-button{
    margin-top: 5px;
    text-align: center;
    display: none;
    background-image: url(../image/menu-icon.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: salmon;
    height: 40px;
    width: 40px;
    border: 1px solid black;
    border-radius: 10px;
    opacity: 0.5;
}


/* #### START Media Queries ######################################################### */

/* erster Break-Point für Geräte-Displays unter 900px = 56.25em Breite */
/*------------------------------------------------------------------------------------*/
@media only screen and (max-width: 56.25em) {

}

/* zweiter Break-Point für kleine Geräte-Displays unter 704px = 44.00em Breite */
/*------------------------------------------------------------------------------------*/
@media only screen and (max-width: 44.00em) {
    html, body{
        background-image: url('../image/bg-gruen-blau-portrait_324x576.png');
        
    }
    #main-footer li{
        font-size: 0.7em;
    }
    #main-footer li, #main-footer a{
        margin-left: 1px;
        margin-right: 1px;
    }
    #seitenanfang{
        font-size: 1.5em;
    }
    #startinfo p{
        font-size: 0.8em;
        color: red;
    }
    article h2{
        font-size: 1.0em;
    }    
    article p{
        font-size: 0.8em;
    }
}
    
/* dritter Break-Point für kleine Geräte-Displays unter 544px = 34.00em Breite */
/*------------------------------------------------------------------------------------*/
@media only screen and (max-width: 34.00em) {
/* bei Breiten unter 34.00em soll die Steuerung verborgen sein und später nur per Toggle-Menü auf- und zugeklappt werden können. Daher muss sie hier im ersten Schritt auf "nicht sichtbar" geschaltet werden. Oben wird die Steuerung mit 'nav' angesprochen, hier mit '#steuerung' - es ist aber dasselbe - hier könnte jetzt auch 'nav' stehen statt '#steuerung'. */
    /* ------------------------------------------------------- */
    #nav-menue{
        display: none;
        height: 0;
        padding: 0;
        border: none;
        margin-bottom: 200px;
    }
    #nav-menue li{
        display: list-item;
        list-style: none;
        border-top: 1px dotted silver;
        margin: 3px auto;
        /*height: 50px;*/
        font-size: 0.8em;
        line-height: 1.5em;
    }
    #nav-menue a{
        color: greenyellow;
    }
    #headereintrag{
        color: greenyellow;
        margin-top: 20px;
        font-size: 1.7em;
        line-height: 1.7em;
    }
    #logo figcaption a{
        /* die figcaption muss verschoben werden, damit der menue-button an derselben Stelle, wo vorher das logo war, vergrössert werden kann (height und width) */
        left: 125px;
        top: 2px;       
    }
    #logo{
        display: none;
    }
    #mainheader{
        height: 130px;
    }
    .menue-button{
        display: block;
        position: absolute;
        top: 10px;
        left: 10px;
        float: left;
        cursor: pointer; /* für Apple wichtig */
        height: 55px;
        width: 55px;
   }
    .menue-button:hover{
        /* Feedback für Desktop-Anzeige geben (funktioniert nicht auf Mobile) */
        background-color: darkgoldenrod;
        /*color: black;*/
    }
    #nav-menue ul{
        width: 100%;
        background-image: url('../image/bg-schwarz-weiss-landscape_450x253.png');
        background-repeat: no-repeat;
        background-size: cover;
    }
    #nav-menue ul #home-link{
        display:inherit;
    }
    article{
        margin-top: 110px;
    }
    /* ab hier kommt jetzt die tatsächliche Steuerung des Toggle-Button's/ -Links - sozusagen dass 'click'-Ereignis: */
    #navigation:target #nav-menue{
        display: block;
    }    
    #navigation:target .menue-button-beschr-open{
        display: none;
    }    
    /* ------------------------------------------------------- */
    
    /* Anzeige für Fensterhöhe und -breite falls Script für Ausgabebreite implementiert ist */
    #fenstergroesse{
        font-size: 0.6em;
    }
}

/* vierter Break-Point für kleine Geräte-Displays unter 444px = 27.75em Breite */
/*------------------------------------------------------------------------------------*/
@media only screen and (max-width: 27.75em) {
    #headereintrag{
        /*background-color: orange;*/
        width: 80%;
        height: 1.30em;
        margin-top: 55px;
        right: auto;
        left: 10%;
        font-size: 1.30em;
        line-height: 1.30em;
    }
    .menue-button{
        height: 35px;
        width: 35px;
        right: 20px;
        left: auto;
    }
    #main-footer li{
        font-size: 0.6em;
    }
}

/* fünfter Break-Point für kleine Geräte-Displays unter 380px = 23.75em Breite */
/*------------------------------------------------------------------------------------*/
@media only screen and (max-width: 23.75em) {
    #main-footer{
        height: 3em;
    }
    #main-footer li, #main-footer a{
        margin-left: 0px;
        margin-right: 0px;
    }
}

/* fünfter Break-Point für kleine Geräte-Displays unter 332px = 20.75em Breite */
/*------------------------------------------------------------------------------------*/
@media only screen and (max-width: 20.75em) {
    .menue-button{
        margin-top: 2px;
    }    
    #headereintrag{
        font-size: 1.0em;
        line-height: 1.0em;
        width: 90%;
        height: 30px;
    }
    /*#main-footer{
        height: 3em;
    }
    #main-footer li, #main-footer a{
        margin-left: 0px;
        margin-right: 0px;
    }*/
}

/* sechster Break-Point für kleine Geräte-Displays unter 310px = 19.375em Breite */
/*------------------------------------------------------------------------------------*/
@media only screen and (max-width: 19.375em) {

}

/* siebter Break-Point für kleine Geräte-Displays unter 272px = 17.00em Breite */
/*------------------------------------------------------------------------------------*/
@media only screen and (max-width: 17.00em) {
    #headereintrag{
        text-align: center;
    }
}