/*****************************************************************************************
Datei:  layout_december.css
*****************************************************************************************/

@charset "UTF-8";

/*****************************************************************************************
Ergänzende Normalisierung, Definition von Basisklassen, allgemeine Einstellungen
*****************************************************************************************/

/*****************************************************************************************
Basis-Layout individuell gestalten
******************************************************************************************
    CONTAO - Struktur
    *****************
    :root  
        HTML
            BODY
                div WRAPPER
                    HEADER div HEADER
                        div INSIDE
                    div CONTAINER
                        MAIN div MAIN
                            div INSIDE
                    FOOTER div FOOTER
                        div INSIDE
*****************************************************************************************/

/*****************************************************************************************
root-Variablen definieren
*****************************************************************************************/
:root {
    /* DEFAULT - ab body */
        --COLOR-brand:              #B5152B;

        --BODY-bg-color:            var(--COLOR-brand);
        --BODY-bg-color:            var(--COLOR-neutral-800);


        --BODY-text-color:          var(--COLOR-white);

/* Background-Color bei Text ist nur sinnvoll, wenn kein BLOCK sondern ein SPAN erfasst wird. ggf. löschen! */
        --h1-bg-color:              var(--COLOR-transparent);
        --h1-text-color:            var(--COLOR-neutral-900);
        --h2-bg-color:              var(--COLOR-transparent);
        --h2-text-color:            var(--COLOR-neutral-900);
        --h3-bg-color:              var(--COLOR-transparent);
        --h3-text-color:            var(--COLOR-neutral-900);
        --h4-bg-color:              var(--COLOR-transparent);
        --h4-text-color:            var(--COLOR-neutral-900);
        --h5-bg-color:              var(--COLOR-transparent);
        --h5-text-color:            var(--COLOR-neutral-900);
        --h6-bg-color:              var(--COLOR-transparent);
        --h6-text-color:            var(--COLOR-neutral-900);

    /* HEADER */
        --HEADER-bg-color:          var(--COLOR-white);
        --HEADER-text-color:        var(--COLOR-neutral-900);
    
    /* CONTAINER */
        --CONTAINER-bg-color:       var(--COLOR-white);
        --CONTAINER-text-color:     var(--COLOR-neutral-900);

        --heading-text-color:       var(--COLOR-neutral-900);
    
    /* FOOTER */
    /*  --FOOTER-bg-color:
    */
        --FOOTER-text-color:        var(--COLOR-white);         /* überschrieben */
        --FOOTER-text-color:        var(--COLOR-neutral-100);
    
    /* NAV */
    /*  --NAV-bg-color:
        --NAV-bg-color-hover:
        --NAV-bg-color-active:
    */
        --NAV-text-color:           var(--COLOR-neutral-600);
        --NAV-text-color-hover:     var(--COLOR-neutral-900);
        --NAV-text-color-active:    var(--COLOR-brand);
        --NAV-border-color:         var(--COLOR-transparent);
        --NAV-border-color-hover:   var(--COLOR-transparent);
        --NAV-border-color-active:  var(--COLOR-transparent);
}

/*****************************************************************************************
HTML
*****************************************************************************************/
html {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y: scroll;
    height: 100%;
    font-size: 16px;
    line-height: 1.5rem;
    font-weight: 400;
}

/* ENTWICKLUNGSHILFE */
p, h1, h2, h3, h4 { b_ackground-color: rgba(255, 0, 0, 0.05); }

p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
p strong {
    font-weight: 600;
}

h1 {
    font-size: 2.25rem; font-size: 2rem;
    line-height: 2.5rem; line-height: 2.25rem;
    font-weight: 500;
}

h2 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 500;
    margin-top: 2.5rem;         margin-top: 1rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: 500;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h4 {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
    margin-top: 0.5rem; margin-top: 1rem;
    margin-bottom: 0.5em;
}

h5 {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    margin-top: 0.5rem;
    margin-bottom: 0.5em;
}

h6 {
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 600;
    margin-top: 0.5rem;                     margin-top: 2rem;
    margin-bottom: 0.5em;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
}

h6 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/*****************************************************************************************
Responsive Design
******************************************************************************************
xs      sm      md      lg      xl      2xl
        640px   768px   1024px  1280px  1536px
******************************************************************************************
Media-Query wird über HTML gesteuert, damit Schriften mit REM gesteuert werden können.
-> denke in Mobile und in 16px; der Rest passiert automatisch.
*****************************************************************************************/
@media screen and (min-width: 640px) {
    html {
        font-size: 1.125rem;    /* 18px */
    }
}
@media screen and (min-width: 1280px) {
    html {
        f_ont-size: 1.25rem;     /* 20px */
    }
}
@media screen and (min-width: 1536px) {
    html {
        font-size: 1.5rem;      /* 24px */
        font-size: 1.25rem;
    }
}




a {
    /* display: block;
    font-size: 0.75em; */
    font-weight:inherit;
    color: inherit;
    text-decoration: none;
    outline: 0;
}

/*****************************************************************************************
BODY
*****************************************************************************************/
body {
    background-color: var(--BODY-bg-color);
    color: var(--BODY-text-color);
}

.bg-brand {
    background-color: var(--COLOR-brand);
}

.text-brand {
    color: var(--COLOR-brand);
}
/*****************************************************************************************
WRAPPER
*****************************************************************************************/
[id=wrapper] {
    overflow: hidden;
}

/*
    .inside ist eine eigene Konstruktion; realisiert im Template mod_article.
    Um die volle Breite des Viewports ausnutzen zu können, werden Ränder über
    .inside vorgenommen. So ist es möglich, den Hintergrund über den gesamten
    Viewport zu gestalten. .inside wird zentriert im Viewport dargestellt.
    
    header > .inside ist der CONTAINER für z.B. grid oder flexbox
*/
header > .inside,
.mod_article > .inside,
footer > .inside {
    width: 98%;                         /* Fallback */
    width: calc(100vw - 2 * 1rem);      /* 16px = Randabstand */
    max-width: 1280px;                  /* XL :: ab 1280px = 80em */
    max-width: 1272px;                  /* 12x 106px */
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* @media screen and (min-width: 1600px) {
    header > .inside,
    .mod_article > .inside,
    footer > .inside {
        max-width: 1584px;
    }
}
*/

/* *** kann weg *** */
.svg-color figure img {
    filter: invert(8%) sepia(99%) saturate(5965%) hue-rotate(347deg) brightness(91%) contrast(104%);
}

/*****************************************************************************************
    HEADER
*****************************************************************************************/
/*
    header kann mit position:absolute hinter oder vor den folgenden Inhalt gelegt werden.
    Durch position:fixed wird header unbeweglich.
    [id=header] {width: 100%; left: 0; top: 0; position: absolute|fixed; z-index: 500;}
*/

header {
    background-color: var(--HEADER-bg-color);
    color: var(--HEADER-text-color);
}

header > .inside {
    /* MOBILE FIRST */
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    grid-template-areas: "LOGO TOGGLE-BUTTON TOGGLE-ICON"
                         "NAV NAV NAV";
}

.logo {
    grid-area: LOGO;
    justify-self: left;
    margin-right: 4em;
}

.nav-toggle__button {
    grid-area: TOGGLE-BUTTON;
}

.nav-toggle__icon {
    grid-area: TOGGLE-ICON;
}

.nav {
    grid-area: NAV;
}

/* DESKTOP */
/* Änderungen überschreiben das Design von MOBILE */
/*  LG :: ab 1024px = 64em */
@media screen and (min-width: 1024px) {
    header > .inside {
        grid-template-columns: auto auto auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: "LOGO TOGGLE-BUTTON TOGGLE-ICON NAV"
                             "LOGO TOGGLE-BUTTON TOGGLE-ICON NAV";
    }

    .nav {
        justify-self: end;
    }

}
/* Individuell z.B. Proportion des Logos: 10:3 */
.logo {
    margin-top: 1em;
    margin-bottom: 1em;
    width: 12.5em;
    height: 3.75em;
    display: block;
    background: url('../images/logo_color-on-white.svg') no-repeat;
    background-size: contain;
    text-indent: -999em;
    outline: none;
}

/*****************************************************************************************
CONTAINER (und MAIN)
*****************************************************************************************/
main {
    background-color: var(--CONTAINER-bg-color);
    color: var(--CONTAINER-text-color);

    /* padding-bottom: 1rem;        im Element einbauen, könne generell stören */
}

.mod_article.poster > .inside {
    max-width: none;
    width: 100%;
    height: 60vh;
    display: grid;
    /* 130px korrespondieren mit 12x130=1560 und mit dem Breakpoint */
    grid-template-columns: minmax(1rem,1fr) repeat(12, minmax(0,130px)) minmax(1rem,1fr);
    /* 106px korrespondieren mit 12x106=1272 und mit dem Breakpoint */
    grid-template-columns: minmax(1rem,1fr) repeat(12, minmax(0,106px)) minmax(1rem,1fr);
    grid-template-rows: repeat(6, 1fr);
}
.mod_article.poster figure,
.mod_article.poster img {
    height: 100%;
    width: 100%;
}

/* ****** kann weg **** */
.sticky-note {
    display: flex;
    flex-direction: row;
    background-color: black;
}
.stick-note .image_container {
    order: -1;
}
.sticky-note .image_container img {
    height: 1em;
}
/*****************************************************************************************
    FOOTER
*****************************************************************************************/
footer {
    background-color: var(--FOOTER-bg-color);
    color: var(--FOOTER-text-color);

    padding-top: 1rem;
    padding-bottom: 2rem;
}


/* EXPERIMENTE */



/*
h6 {
    background-color: var(--h6-bg-color);
    color: var(--h6-text-color);
}
h5 {
    background-color: var(--h5-bg-color);
    color: var(--h5-text-color);
}
h4 {
    background-color: var(--h4-bg-color);
    color: var(--h4-text-color);
}
h3 {
    background-color: var(--h3-bg-color);
    color: var(--h3-text-color);
}
main h3 {
    background-color: var(--COLOR-brand);
    color: var(--h3-text-color);
}
h2 {
    background-color: var(--h2-bg-color);
    color: var(--h2-text-color);
}
h1 {
    background-color: var(--h1-bg-color);
    color: var(--h1-text-color);
}
*/