/* -------------------------------------------------------------------------- */
/* E-M-K-S, peci.net                                                          */
/* css for andreas klugsberger website                                        */ 
/* -------------------------------------------------------------------------- */

:root {
    font-size: 16px; /* Baseline */
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/woff2/libre-franklin-v19-latin-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/woff2/libre-franklin-v19-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/woff2/libre-franklin-v19-latin-700.woff2') format('woff2');
}

/* BODY & CONTAINER */
body {
    background-color:   #EDF3EF;
    display:            flex;
    font-family:        'Libre Franklin', Arial, sans-serif;
    font-size:          1rem;  /* 16px */
    justify-content:    center;
    line-height: 1.6;
    margin:             0;
    padding:            0;
} 
.container {
    max-width:          1200px;
    text-align:         center;
    width:              90%;
}

/* HEADINGS */
h1 {
    font-size:          clamp(2rem, 5vw, 3rem); /* 32–48px */
    margin-bottom:      0.5rem;
}
h2 {
    font-size:          clamp(1.5rem, 4vw, 2.25rem); /* 24–36px */
    margin-bottom:      0.5rem;
}
h3 {
    font-size:          clamp(1.25rem, 3vw, 1.75rem); /* 20–28px */
    margin-bottom:      1rem;
}
h1, h2, h3 {
    font-weight:        700; /* Bold */
    hyphens:            auto;
}
p {
    font-size:          clamp(1rem, 1.25rem, 1.5rem);
    font-weight:        400; /* Standard */
    hyphens:            auto;
    margin-bottom:      1rem;
}
#instagram-image {
    height:             auto;
    width:              clamp(2rem, 15vw, 4rem);
}
a {
    color:              black;
    text-decoration:    none;
}
a:hover {
    color:              #2F6E73; /* rgb(64, 64, 240); */
}

/* BILDER CAROUSEL */
.carousel {
    height:             clamp(400px, 45vw, 500px);
    margin:             1rem auto;
    max-width:          1000px;
    overflow:           hidden;
    position:           relative;
}
.carousel-image {
    border-radius:      7px;
    height:             100%;
    left:               0;
    max-width:          100%;
    object-fit:         cover;
    opacity:            0;
    position:           absolute;
    top:                0;
    transition:         opacity 1s ease-in-out;
    width:              100%;
}
.carousel-image.active {
    opacity:            1;
    z-index:            1;
}

/* MEDIA QUERIES */
/* Tablet (iPad Hoch- und Querformat: 768px – 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    body {
        font-size:          15px;
    }
}
/* Mobile (Smartphones: bis 767px) */
@media only screen and (max-width: 767px) {
    body {
        font-size:          14px;
    }
}

        
/* -------------------------------------------------------------------------- */
/* EOF                                                                        */
/* -------------------------------------------------------------------------- */