/* =================================================================================
                Stylesheet für Saronic.html 
                Datei: Saronic.css
                Datum: 06.01.2026
                zentrale.css wird nicht eingebunden, damit wrapper breiter sein kann
===================================================================================== */
 
@import url(reset.css); 
@import url(navi-tabs.css);

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



@media screen {

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


/* Gestaltet body */
body { background-color: rgb(63, 193, 216);
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 16px;  /* Schriftgröße */ 
}


/* Gestaltet Hyperlinks */
a {text-decoration: none; }
main a {text-decoration: underline; } 
a:link {background-color: rgb(151, 214, 145); 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: 5px;
}



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

/* Gestaltet wrapper */
div#wrapper {
    background-color: rgb(127, 201, 214); /*rgb(127, 201, 214) ; */
    color: black; 
    width: 90%; /*vorher 1350px;*/ 
    margin: 15px auto; /* auto: Abstände links und rechts gleich */ 
}
 
/* 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;}

/* 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 */
    flex-wrap: wrap;       /* geht bei wenip Platz in nächste Zeile */
    justify-content: space-between; /* Leerraumverteilung bestimmen */
    flex-wrap: wrap;
}

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

.navi a {
    text-decoration: none;
    color:#222;
    text-align: center;
    padding: 0.5rem 1rem; 
    display: block;
}

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


/* Gestaltet Main-Bereich */
 main#inhaltsbereich { 
    line-height: 1.5; 
    padding: 20px; 
}

 

section { 
    background-color: #eee;
    /*border: 0.2rem dotted black;*/
    display: grid;
     grid-template-columns: 33% 33% 33%;                  /*33% 33% 33% */
    /*flex-wrap: wrap; */
    /*margin-right: 1rem;
    margin-bottom: 1rem;*/
    gap: 1rem;
    /*align-items: center;*/                      
                                                 /*padding: 1rem;*/
    padding: 25px 10px 10px 25px;
    border: 3px solid #999;
    border-radius: 4px;
    margin:  3px 3px 0;
}



img { max-width: 100%;
    min-width: 200px;
   height: auto;
   padding: auto;
}

figcaption {
    padding-bottom: 1rem;
    padding-left: 15px;
}


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

@media screen and (max-width: 30em){section {display: block;}}
    

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