/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2023/2024 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->											          6.00/02 - 16-10-23
/* layout	-> startpage										                  */
/* file 	-> design/design.css						                          */
/* colors	-> http://www.color-hex.com | https://oklch.com		                  */
/* link     -> https://codepen.io/machtweb/pen/xxmNpKd                            */
/* ------------------------------------------------------------------------------ */
/* HEADER ONLY */
header {
    display: grid;
    grid-template-columns:repeat(8, auto);
    grid-gap:2px 2px;
    align-items:center;
    margin: 0; /* Setze den Margin auf 0, um die volle Breite zu verwenden */
    max-width: 100%; /* Begrenze die maximale Breite auf 100% */
    /*max-height: 256px;*/
    /*height: auto;*/
    /*font-family: 'MainFont';*/
}

header > div:nth-child(n+3):nth-child(-n+8) {
    margin-right: 2px; /* Füge das Gap zwischen Grid-Box 3 und 8 ein */
    border: 0px solid red;
    /*background: rgb(0,0,0,.08);*/
}

.flexible, .address, .contact {
    /*max-height: 256px;*/
    height: auto;
    /*min-height:256px;*/
}

.flexible {
    flex:1;
}

/* ADRESS and CONTACT
/* Zentriere horizontal und linksbündig den Inhalt in den Grid-Boxen "address" und "contact" */
.address, .contact {
    display:flex;
    align-items:center;
}

.address ul, .contact ul {
    padding: 6px 12px;
    font-size: 1.2rem;
    text-align:left;
    color: oklch(47.12% 0 0);
    border: 1px solid var(--color-primary);
    border-width: 0 0 1px 1px;
    border-radius: 0 0 0 6px;
}

/* ------------------------------------------------------------------------------ */
/* LOGO */
.logo {
    display:flex;
    width:auto;
    align-items:center;
    justify-content:center;
}

/* LOGO-MAIN - CLIENT */
.logo-main, .logo-add {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
    padding: 4px;    
    object-fit:contain;
}

/* ------------------------------------------------------------------------------ */
/* TOP-BAR / BOTTOM-BAR */
.top-bar, .bottom-bar {
    max-height: 16px;
    grid-column: 1 / span 8;
    border: 0px solid red;
}

/* ------------------------------------------------------------------------------ */
/* Optional: Styling für die header-Elemente */
header div {
    padding: 4px;
    border: 0px solid orange;
    text-align: center;
} 

/* ------------------------------------------------------------------------------ */
/* max-width 1920px */
@media (max-width: 1920px) {  
    header {
        grid-template-columns: repeat(6, 1fr);
        grid-gap:0;
    }
    header > div:nth-child(n+2):nth-child(-n+8) {
        margin-right: 1px; /* Füge das Gap zwischen Grid-Box 2 und 8 ein */
        border: 0px solid orange;
        /*background: rgb(0,0,0,.04);*/
    }
    .flexible, .top-bar {
        display:none;
    }  
}

/* ------------------------------------------------------------------------------ */
/* max-width 1280px */
@media (max-width: 1280px) { 
    header {
        grid-template-columns: repeat(4, 1fr);
        grid-gap:0;
        align-items:center;
        justify-content: center;
    }
    .flexible, .headbox, .top-bar, .bottom-bar, .noshow {
        display:none;
    }
}

/* ------------------------------------------------------------------------------ */
/* max-width 768px */
@media (max-width: 768px) { 
    header {
        grid-template-columns: repeat(2, 1fr);
        grid-gap:0;
        align-items:center;
        justify-content: center;
    }
    .flexible, .headbox, .top-bar, .bottom-bar, .noshow, .logo-add, .nobox, .nocontact {
        display:none;
    }
}
/* ------------------------------------------------------------------------------ */
/* max-width 480px */
@media (max-width: 480px) { 
    header {
        grid-template-columns: repeat(2, 1fr);
        grid-gap:0;
        align-items:center;
        justify-content: center;
    }
    .flexible, .headbox, .top-bar, .bottom-bar, .noshow, .logo-add, .nobox, .nocontact {
        display:none;
    }
}

/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */