/* 
    CSS-Klassen Projekt foto + art
    ++++++++++++++++++++++++++++++
    erstellt:   04.03.2025
    bearbeitet: 26.03.2025
    Autor:      R.Böhmer
*/

/* Schriftarten Montserrat und Lora einbinden */
@font-face {
  font-family: Montserrat;
  src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('ttf');
  src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('ttf');
  src: url('../fonts/Lora/Lora-VariableFont_wght.ttf') format('ttf');
  src: url('../fonts/Lora/Lora-Italic-VariableFont_wght.ttf') format('ttf');
}

/* Grundlegende Stile für alle Bildschirmgrößen */
body {
    font-family: Montserrat, Arial, "sans serif";
    font-size: 1.25rem;
    margin: 0;
    padding: 0;
}

header {
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: white;
    background-color: hsla(199, 27%, 18%, 1); /* Gunmetal */
    padding: 0.5em 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: thin solid black;
    z-index: 9999;
}

/* Stile einzelner html-Elemente */

h1,h2,h3 {
    font-family: Lora, Arial, "sans serif";
}

/*  ---------------------------
    Links im Navigationselement
    --------------------------- */
nav a {
    color: white;
    text-decoration: none;
    margin-right: 1rem;
}

nav a:hover {
    background-color: hsla(32, 33%, 95%, 1); /* Khaki */
    color: black;
    cursor: pointer;
}

/*  ------------------------------------
    Abstand vom Header im main-Abschnitt
    ------------------------------------ */
main {
    padding: 5rem;
    background-color: hsla(32, 33%, 95%, 1); /* Khaki */
}

/*  -----------------
    Footer-Gestaltung
    ----------------- */
footer {
    color: white;
    background-color: hsla(199, 27%, 18%, 1); /* Gunmetal */
    padding: 10px;
    text-align: center;
    font-size: 0.8rem;
}

/*  ---------------------------------
    Einstellungen für Links im Footer
    --------------------------------- */
footer a {
    color: white;
    text-decoration: none;
    margin-right: 1rem;
}

/*  ------------------------------
    Mouse-Over bei Links im Footer
    ------------------------------ */

footer a:hover {
    background-color: hsla(32, 33%, 95%, 1); /* Khaki */
    color: black;
    cursor: pointer;
}

/*  ---------------
    Logo-Gestaltung
    --------------- */
.logo{
    display: inline-block;
    margin-right: 1rem;
    max-width: 60px;
    max-height: 60px;
}

/* -------------------------------------
    Zwei Klassen für die Zentrierung von
    Text in einer Spalte
   ------------------------------------- */
.container_centered {
  text-align: center; /* Zentriert den Text horizontal */
}

.text_centered {
  display: inline-block;    /* Ermöglicht Breite und Blocksatz innerhalb der Zentrierung */
  text-align: justify;      /* Erzwingt Blocksatz */
  width: 80%;               /* Beispielhafte Breite des Textblocks */
  max-width: 600px;         /* Maximale Breite für bessere Lesbarkeit */
}

/*  ---------------------------------------------
    Breakpoints für verschiedene Bildschirmgrößen
    --------------------------------------------- */

/* Kleine Smartphones (max-width: 480px) */
@media (max-width: 480px) {
    nav li {
        display: block;
        margin: 10px 0;
    }
}

/* Gängige Smartphones (max-width: 667px) */
@media (max-width: 667px) {
    .content {
        font-size: 14px;
    }
}

/* Tablets (max-width: 1024px) */
@media (max-width: 1024px) {
    .content {
        font-size: 16px;
    }
}

/* Laptops und Desktop-PCs (max-width: 1440px) */
@media (max-width: 1440px) {
    .content {
        font-size: 18px;
    }
}