/* =================================================================================
                Stylesheet für 2024_Alaska.html 
                Datei: 2024_Alaska.css
                Datum: 8.02.2026
===================================================================================== */
 
@import url(2024_Alaska_grid.css);




@media screen {

/*======================================
        1. Allgemeine Styles
====================================== */


/* Gestaltet body */
body { background-color: #8c8c8c;
    background-image: url(../Bilder/Alaska_Tb.jpg); 
    background-attachment: fixed; /*bleibt beim scrollen stehen */
    background-size: cover;
    background-position: center;
    color: white; 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 16px;  /* Schriftgröße */ 
    height: 100vh;
    width: 100vw;       
}


 /*Gestaltet Hyperlinks */
a {text-decoration: none; }
a:link {background-color: rgb(196, 206, 57); 
    color: rgba(44, 2, 2, 0.836);
    text-align: center; 
    padding: 0.3px ;
    display: block;
    border: 1px solid;
    border-radius: 2px;
}
a:hover {color: #ccc;
    background-color: rgba(44, 2, 2, 0.836);}


a:active {
    background-color: #d90000; 
    color: white; }  
    
    /*margin: 2px; */
    


.raster a {text-decoration: underline; 
    display: inline;
    background-color: rgb(196, 206, 57);        /*rgb(109, 207, 211);*/
    color: black;
    border: none;} 

.raster_fest a {text-decoration: underline; 
    display: inline;
    background-color: rgb(196, 206, 57);        /*rgb(109, 207, 211);*/
    color: black;
    border: none;}

.bild4Rwaag a {background-color: rgba(44, 2, 2, 0.836);}
.bild6Rwaag a {background-color: rgba(44, 2, 2, 0.836);}
.bild3Rsenkr a {background-color: rgba(44, 2, 2, 0.836);}
.bild5Rsenkr a {background-color: rgba(44, 2, 2, 0.836);}
.bildmwaag a {background-color: rgba(44, 2, 2, 0.836);}

.bilderrahmen {
    padding: 0px;
    border: 3px solid rgba(211, 192, 109, 0.78);
    border-radius: 10px;
}

figcaption {color: white;}





/*=========================================
        2. Styles für die Layoutbereiche
=========================================== */

/* Gestaltet wrapper */
div#wrapper {
    color: black; 
    width: 90%; 
    margin: 15px auto; /* auto: Abstände links und rechts gleich */ 
    line-height: 1.5;
}
 
/* Gestaltet header */
header#kopfbereich { 
    /*background-color: #007ef3;*/ 
    color: black; 
    padding: 20px 20px 0 300px; 
}

h1, h2, h3, h4, h5, h6 { 
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 1em; 
    text-align: center;}

p  { padding-left: 15px;
    padding-right: 15px; 
    padding-bottom: 1em; 
    text-align: justify;
    margin-top: 5px;}

/* Gestaltet Navi-Bereich */
* {box-sizing: border-box;} 

html { font: 100% sans-serif;} 

.navi ul {
    max-width: auto;
    margin: auto;
    /*padding: 1rem;*/
    /*background: #f8f550;*/
    list-style: none;
    border-radius: 0.2em;
    display: flex;         /* Flexbox-Darstellung aktivieren */
    justify-content: space-between; /* Leerraumverteilung bestimmen */
    flex-wrap: wrap;
}

.navi li {
    border: 1px solid black;
    border-radius: 2px;
}

.navi a {
    text-decoration: none;
    background-color:rgb(112, 146, 221);
    color:#222;
    text-align: center;
    padding: 0.3rem ;
    /*margin: 2px; */
    display: block;
}

.navi a:hover {
    color: #ccc;
    background-color: #222;
}





/* Gestaltet Grids */

img { max-width: 100%;
    height: auto;
}


div#NachOben { 
    position:fixed; 
    top: 95%; left: 20px;
}


/* Gestaltet Fussbereich */

footer#fussbereich { 
    padding: 10px 20px 20px 20px;       
    border-top: 1px solid #8c8c8c; /* Rahmenlinie oben */
    margin-top: 0;                /* war 20 */ 
}



} /* Ende @media - nicht löschen! */