/* =====================
     ROOT VARIABLEN   
===================== */

:root {
    --haupt-dunkel: #4d4d46;
    --haupt-hell: #eceaea;
    --akzent: #e6007e;
    --hintergrund: #eceaea;
}

/* lato-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lato-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lato-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* =====================
     BASICS   
===================== */

*, *::before, *::after {
  box-sizing: border-box;
 font-family: 'Lato';
 font-style: normal;
}


html {
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
    font-size: 16px;
}

body {
    color: var(--haupt-dunkel);      
    background-color: var(--hintergrund);
    margin: 0;
    
}

section, nav, #top-auskunft, footer {
    padding: 1rem;
}

header div, #top-auskunft div, section, footer .flexwrapper {
    width: 800px;
    margin: 0 auto;
}

/* =====================
     TYPO  
===================== */

h1, h2 {
    color:;  
    font-family:;
    font-size: 30px;
    font-weight: 700;
    line-height: 38px;
        
}


h3 {
    font-size: 18px;
    font-weight: bold;
    line-height: 24px; 
    
    padding:;
}

h4 {
    color: #4d4d46;
    font-size: 18px;
    font-weight: normal;
    line-height: 0px;
}

/* =====================
     Main Hauptbereich
===================== */

main {
    min-height: 75vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


img[alt="Seltmann GmbH Logo"] {
    height: 150px;
    width: auto;
}

section {
    
    text-align: center;
    height: 450px
}

/* =====================
     Links
===================== */

a {
    color: var(--haupt-dunkel);
    text-decoration: none;
    cursor: pointer;
}

a:hover, a:focus {
    color: var(--akzent);
}

/* =====================
     Button
===================== */

.button {
    background-color: var(--akzent);
    
    padding: 8px 20px;
  color: white;
  line-height: 2.2em;
  border-radius: 48px;

}

.button:hover, button:focus {
    color: white;
    background-color: var(--haupt-dunkel);
}


/* =====================
     Footer
===================== */


footer {
    background-color: var(--haupt-dunkel);
    color: white;
    
    background-image: url(../bilder/footer.png);
    background-position: bottom right;
    background-repeat: no-repeat;
    
    padding: 50px 20px;
    
    min-height: 25vh;
}

footer a {
    color: white;
}

footer img[alt="Seltmann GmbH Logo"] {
    height: 76px;
    width: auto;
}

footer a:hover {
    color: var(--akzent);
}

footer h3 {
  color: #aaaaaa;
}

.socialmedia-icons img{
    width: auto;
    height: 35px;
    padding: 5px;
}

.flexwrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footerbox {
    width: 32%;
}

/* =====================
     Bilder
===================== */



/* Mobil Optimierung */

@media only screen and (max-width: 800px) {
   
    /* =====================
     Header Bereich
    ===================== */
    
    nav, section, footer .flexwrapper, header div {
        width: 100%;
        margin: 0 auto;
    }


    /* =====================
     Footer
    ===================== */
    
    footer {
        
        background-image: none;
    }
    
    footer img {
        max-height:150px;
    }
    
    .flexwrapper {
    display: block;
    }

    .footerbox {
        width:auto;
    }

    .socialmedia-icons {

        display:flex;
        height: 30px;
    }
    
    /* =====================
     Tabelle
    ===================== */
    
    td {
    display: block;   
    }
    
    td::before {
        content: attr(data-label);
        word-break: break-word;
    }
    


    /* =====================
     Button
    ===================== */

    .button {
        display: block;
    }
    
    

}