/* =================================================================================
                Stylesheet für KamalaNeu 12/2025
                Datei: KamalaNeu.css
                Datum: 26.12.2025
                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(127, 201, 214);
    background-image: url(../Bilder/Tahanea3.jpg); 
    background-attachment: fixed; /* bleibt beim scrollen stehen */
    background-size: cover;
    background-position: center;  
    color: #ffe9b4; /* opacity: 0.65; */
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 16px;  /* Schriftgröße */ 
    height: 100vh;
    width: 100vw;
}
  
/* Gestaltet address */
address { 
    text-align: center ; 
    font-size: 85%; 
    font-style: normal; 
    letter-spacing: 2px; 
    line-height: 1.5; 
}

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

/* Gestaltet Klassen und IDs */
img.logo {
    background-color: white;
    color: black; 
    padding: 10px;
    border: 10px solid #d9d9d9;
}

/* gestaltet Grafiken die mit float eingebunden sind */
.floatlinks {
    float:left;
    margin-right: 15px;
    margin-bottom: 15px;
}
.floatrechts {
    float:right;
    margin-left: 15px;
    margin-bottom: 15px;
}
.bilderrahmen {
    padding: 0px;
    border: 3px solid #007ef3;
    border-radius: 5px;
}
.clearing { clear: both; }




/*=========================================
        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; /* gelborange */ 
    color: black; 
    padding: 20px 20px 0 20px; 
}


h1 h2 h3 { padding-left: 15px;
    margin-top: 1em; }
 
p  { padding-left: 15px; 
    padding-bottom: 1em; }



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

/* Gestaltet Galerie */
div.galerie { 
    background-color: #eee;
    /*width: 720px;*/
    padding: 25px 10px 10px 0;
    border: 3px solid #999;
    border-radius: 4px;
    margin: 0 3px 3px 0;
}
div.galerie img {
   /* float: right; */
    border: 3px groove #999;
    border-radius: 4px;
    /*box-shadow: 0px 2px 6px rgba(0,0,0,0.3);  Schatten */
    margin-right: 20px;
    margin-left: 15px;
    margin-bottom: 20px;
}
  
img { max-width: 100%; 
  height: auto; 
}  
  

/* Gestaltet den Abschnitt mit den Video-Links */
.infoboxen {
    background-color: rgba(245, 245, 245, 0.856);
    padding: 1rem;
    margin-bottom: 1rem;}

.infobox {
    text-align: center;
    background-color: white;
    padding: 1rem;
    margin: 1rem;
}






/* Gestaltet Fussbereich */

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


/*.clearing { clear: both; }*/

/* Micro Clearfix-Hack */
.cf:before,
.cf:after {
    content: " ";
    display: table;
    clear: both;
}




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





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