/* =====================================================================
                Stylesheet für IndexNeu und ImpressumNeu 12/2025
                Einteilung s. Kap. 10.2 im Lehrbuch CSS
======================================================================== */

@media screen {

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


/* Gestaltet body */
body { background-color: #8c8c8c;
    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: white; 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 {
    background-color: white; 
    color: black; 
    width: 90%;   
    margin: 0 auto; /* auto: Abstände links und rechts gleich */ 
}

/* Gestaltet header */
header#kopfbereich { 
    background-color: #007ef3; 
    color: black; 
    padding: 20px 20px 0 20px; 
}
 
h1 { margin-top: 1em; }
p  { padding-bottom: 1em; }



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

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


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

/* =======================================================================================================
========================================================================================================== */

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