/* =================================================================================
                Stylesheet für 2023_Varna_Limnos.html 
                Datei: 2023_Varna_Limnos.css
                Datum: 24.01.2026
===================================================================================== */
 /*
@import url(reset.css); 
@import url(navi-tabs.css);*/

/* @import url(desktop.css); */



@media screen {

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


/* Gestaltet body */
body { background-color: #8c8c8c;
    background-image: url(../Bilder/Tahanea3.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(112, 146, 221); 
    color: #222;
    text-align: center; 
    padding: 0.3px ;
    display: block;
    border: 1px solid black;
    border-radius: 2px;
}
a:hover {color: #ccc;
    background-color: #222;}


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


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

.bild4Rwaag a {background-color: #032647;}
.bild6Rwaag a {background-color: #032647;}
.bild3Rsenkr a {background-color: #032647;}
.bild5Rsenkr a {background-color: #032647;}

.bilderrahmen {
    padding: 0px;
    border: 3px solid #007ef3;
    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 20px; 
}

h1 h2 h3 h4 { padding-left: 15px;
    margin-top: 1em; 
    text-align: justify;}

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 */

.raster { display: grid;
    margin-right: 3rem;
    margin-bottom: 3rem;
    /*padding: 1rem;*/
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));                              /*200px 100px 200px;*/
    grid-auto-rows: minmax(120px, auto);
    /*grid-auto-flow: dense; */  
    align-items: center; 
    justify-items: center;                                                                                /*grid-column: 100px 100px;*/
}

.text2R {
    grid-column: span 2;
    grid-row: auto;
    margin-right: 4rem;
    background-color:rgb(109, 207, 211);/*#eee;*/
    margin-bottom: 4rem;
    padding: 10px;
    border: 1px solid rgb(127, 201, 214);
    border-radius: 10px;
}

.text3R {
    grid-column: span 3;
    margin-right: 4rem;
    margin-bottom: 4rem;
    padding: 5px;
    background-color: rgb(109, 207, 211);
    border: 1px solid  rgb(127, 201, 214);                                                  /*  rgb(127, 201, 214);*/
    border-radius: 10px;}

.text4R {
    grid-column: span 6;
    margin-right: 4rem;
    margin-bottom: 4rem;
    padding: 5px;
    background-color: rgb(109, 207, 211);
    border: 1px solid rgb(127, 201, 214);
    border-radius: 10px;
}

.bild4Rwaag {
    grid-column: span 4;
   /* padding: 1rem;*/
    margin-right: 4rem;
    margin-bottom: 4rem;
    background-color: #032647;
    border: 1px solid black;
    border-radius: 10px;
}

.bild6Rwaag {
    grid-column: span 6;
    /*padding: 5px;*/
    margin-right: 4rem;
    margin-bottom: 4rem;
    background-color: #032647;
    border: 1px solid black;
    border-radius: 10px;
}

.bild3Rsenkr{
    grid-column: span 3;
    /* padding: 1rem;*/
    margin-right: 4rem;
    margin-bottom: 4rem;
    background-color: #032647;
    border: 1px solid black;
    border-radius: 10px;
}

.bild5Rsenkr{
    grid-column: span 5;
    /* padding: 1rem;*/
    margin-right: 4rem;
    margin-bottom: 4rem;
    background-color: #032647;
    border: 1px solid black;
    border-radius: 10px;
}

.leer {grid-column: span 2;
    /*padding: 5px;*/
    margin-right: 4rem;
    margin-bottom: 4rem;
}



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! */