/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2026/2027 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->											          6.00/16 - 18-12-25
/* 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 1280px */
@media (max-width: 1280px) { 
    header {
        grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten */
        grid-template-rows: auto; /* Zeilenhöhe passt sich an */
        grid-gap: 8px; /* Abstand zwischen den Spalten */
        align-items: center;
        justify-content: center;
    }
    .flexible, .headbox, .top-bar, .bottom-bar, .noshow, .nobox, .address {
        display: none;
    }

    .logo-main {
        grid-column: 1; /* Logo in die erste Spalte */
        justify-self: center; /* Horizontal zentrieren */
        align-self: center; /* Vertikal zentrieren */
    }

    .contact {
        grid-column: 2; /* Kontaktinformationen in die zweite Spalte */
        justify-self: center;
        align-self: center;
        text-align: center; /* Zentrierter Text */
    }

    .contact ul {
        padding: 0;
        margin: 0;
        list-style: none; /* Keine Aufzählungspunkte */
    }

    .contact li {
        margin-bottom: 4px; /* Abstand zwischen den Links */
    }
}

/* max-width 768px */
@media (max-width: 768px) {
    header {
        display: flex; /* Flexbox für Layout */
        flex-direction: column; /* Elemente untereinander anordnen */
        justify-content: center; /* Vertikale Zentrierung */
        align-items: center; /* Horizontale Zentrierung */
        padding: 1rem; /* Abstand um die Inhalte herum */
        text-align: center; /* Text zentrieren */
    }

    /* Logo */
    .logo-main {
        max-width: 256px; /* Skalierung des Logos */
        height: auto; /* Beibehaltung des Seitenverhältnisses */
        margin-bottom: 1rem; /* Abstand unter dem Logo */
    }

    /* Kontaktbereich */
    .contact {
        display: flex; /* Flexbox für Layout der Liste */
        flex-direction: column; /* Elemente untereinander anordnen */
        align-items: center; /* Horizontal zentrieren */
        margin: 0; /* Kein Außenabstand */
        padding: 0; /* Kein Innenabstand */
    }

    .contact ul {
        list-style: none; /* Entfernt Aufzählungspunkte */
        padding: 0; /* Kein Innenabstand */
        margin: 0; /* Kein Außenabstand */
    }

    .contact li {
        margin: 0.5rem 0; /* Vertikaler Abstand zwischen Links */
        font-size: 1rem; /* Textgröße */
    }

    /* Icons in den Kontakt-Links */
    .contact i {
        font-size: 1.2rem; /* Größe der Icons */
        margin-right: 0.5rem; /* Abstand zwischen Icon und Text */
    }
}

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