/* Entfernt die Browser-Standard-Styling Einstellungen, die dafür verantwortlich sein können, dass Zentrierungen nicht korrekt sind */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

/* Styling für den gesamten Headerbereich */
header
{background-color: #a2a2a2;
color: rgb(0, 0, 0);
}


/* Flexbox für die Navigation */
.navbar
{display: flex;
align-items: center;
}

/* Hamburger Menü  */
.hamburger
{display: none;
flex-direction: column;
cursor: pointer;
position: absolute;
top: 0.5em;
right: 1em;}

.hamburger .line
{width: 1.5em;
height: 0.1em;
margin: 0.2em 0;
background-color: white;}

/* Platzhalter für die Zentrierung */
.spacer
{flex: 1;}

/* Navigationselemente rechts*/
.nav-menu
{list-style: none;
margin: 0%;
padding: 0%;
display: flex;
gap: 10%;
justify-content: center;} 
/* Zentriert die Links */

/* Styling Links in der Navigationsleiste */
.nav-menu li a
{color: rgb(0, 0, 0);
font-size: 1em;
text-decoration: none;
transition: color 0.3s;
white-space: nowrap;}                           
/* Verhindert Zeilenumbrüche */

/* Hover-Effekt */
.nav-menu li a:hover
{color: khaki;}

.nav-menu.active
{display: block;}


.logo img
{height: 6rem;
width: auto;
margin-left: 51%;
margin-top: 6%;}


@media (max-width:55em)

    {
    .hamburger
    {display:flex;}

    .nav-menu
    {display: none;
    flex-direction: column;
    position: absolute;
    top: 2em;
    right: 0em;
    padding: 1em;
    border-radius: 0.5em;
    background-color:rgb(8, 59, 155) ;}

    .logo img 
    {height: 3rem;
    width: auto;
    margin-left: 0;
    margin-right: 0;}
  }






/* Grundstruktur - height auf 100% dehnt die Höhe des HTML und Body auf 100% aus */
html, body
{height: 100%;
margin: 0;
display: flex;
flex-direction: column;}
/* Ordnet die Elemente in Spalaten an, sodass der Footer unter dem Hauptinhalt erscheint */


 body 
{font-family: Arial, Helvetica, sans-serif;
color: rgb(0, 0, 0); 
background-color: #d7d2cc; 
text-align: center; 
font-size: 1.5em; 
line-height: 1.5;
}

@media (max-width:45em)
    {body {font-size: 1.2em;}
    }



/* Hauptinhalt nimmt durch "flex:1" den gesamten Platz zw. Header und Footer ein, so dass Footer am unteren Rand bleibt. */
main
{flex: 1;
padding: 3rem;}

h1 
{font-size: 2.0em;
font-family: Arial, Helvetica, sans-serif; 
line-height: 1.5; 
text-align: center;}

h2 
{font-size: 1.5em; 
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5; 
text-align: center;}

/* Überschrift für Sal de Fuerteventura */
h3
{font-size: 1.5em; 
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
color: yellow; 
text-align: center;}

/* Überschrift für Sal de Gran Canaria */
h4
{font-size: 1.5em; 
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
color: red; 
text-align: center;}

@media (max-width:55em)
{h3, h4
{font-size: 0.8em;}}

/* zentrierte Schrift */
h5 
{font-size: 1.0em; 
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
line-height: 1.5; 
text-align: center;}

p 
{font-size: 1.0em; 
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5; 
text-align: justify;}

    .blocksatz 
    {width: 70%; 
    text-align: justify; 
    margin: 0 auto;}

    @media (max-width:55em)
   {.blocksatz {width: 95%;}}

    /* Grid-Layout nur für Produkt-Seite */
    .grid-container
    {display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Drei Spalten, gleiche Breite */
    grid-template-rows: repeat(2, auto);
    width: 100%;
    /* passt das grid an die volle Breite des containers an */
    gap: 2%;
    margin: 0em auto;
    padding: 2em;}
   

    /* Grid Inhalt wenn text */
    .grid-content
    {font-size: 1.0em;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    color: white;
    background-color: cornflowerblue;}




    @media (max-width:45em)
    {.grid-container
    {display: block;
    padding: 0rem;
    margin: 0rem;
  }}


/* Bildcontainer für logos index Seite  */
    .container
    {
    height: 35%;
    overflow: hidden;
    margin: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    @media (max-width:55em)
    {.container {display: none;}}

    .img
    {
    width: 10.5em;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
   }
   @media (max-width:55em)
   {.img {display: none;}}


    @media (max-width:45em)
    {h1 {font-size: 1.5em;}
    h2 {font-size: 1.0em;}
    h3 {font-size: 1.0em;}
    h4 {font-size: 1.0em;}
    .blocksatz {width: 80%;}}





/* Styling für den gesamten Footer-Bereich */
footer
{background-color:#d7d2cc;
color: rgb(0, 0, 0);
padding: 0.5rem;
display: flex;
text-align: center;
/* Zentriert Text */
align-items: center;}
/* Elemente werden vertikal zentriert */

/* Links im footer */
.footer-links
{list-style: none;
display: flex;
gap: 2rem;
margin: 0;
padding: 0;
justify-content: center;}
/* zentriert die Links */

/* Styling für die Links */
.footer-links a
{color: rgb(0, 0, 0);
text-decoration: none;
font-size: 0.5em;
}

.footer-links a:hover
{text-decoration: underline;}

.copyright
{font-size: 0.5em;
 ;}