/* =================================================================================
                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; }
main a {text-decoration: underline; } 
a:link {background-color: rgb(112, 146, 221);; color: black; }
/* a:visited {color: #ab0bf5} */
a:hover a:focus {text-decoration: none; } 
a:active {
    background-color: #d90000; 
    color: white; 
}  


.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 { padding-left: 15px;
    margin-top: 1em; }
p  { padding-left: 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: 0.2em;
}

.navi a {
    text-decoration: none;
    background-color:rgb(112, 146, 221);
    color:#222;
    text-align: center;
    padding: 0.5rem 1rem; 
    display: block;
}

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





/* Gestaltet Grids */

.raster { display: grid;
    margin-right: 1rem;
    margin-bottom: 1rem;
    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;
    margin-right: 5px;
    background-color:rgb(109, 207, 211);/*#eee;*/
    margin-bottom: 5px;
    padding: 5px;
    border: 1px solid rgb(127, 201, 214);
    border-radius: 10px;
}

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

.text4R {
    grid-column: span 4;
    margin-right: 5px;
    margin-bottom: 5px;
    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: 5px;
    margin-bottom: 5px;
    background-color: #032647;
    border: 1px solid black;
    border-radius: 10px;
}

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

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

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

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