/**!
 * core.css
 * [WIP] für alle Seiten inkl. Shop.
 *
 * @version 0.1.0  01.05.2019
 * @author R. Serradeil, WebMechanic.biz
 */
@supports (display:grid) and (display:flex) and (object-fit:cover)
{

/* marineart.css */
@media screen {
    /* schicker verlauf */
    html {background:hsl(202,100%,24%) var(--bodybg) fixed}
    body {background:hsl(202,100%,24%) var(--bodybg) fixed}

    /* .content--wrapper: Seiten mit ZEILEN-layout ~ DARK THEME ~ statische Seiten (bislang, Jan 2019) */
    .is--fullscreen .content--wrapper {background-color:transparent;background-image:none}

    a.is--primary {color:#fafafa} /* is--primary button with btn-secondary-text-color */
    a.btn {border:1px solid transparent} /* #a11y 'high contrast windows' */
    aside.off-canvas .is--display-button {color:inherit}

    h1, h2, h3, h4, h5, h6,
    [class*=-headline],
    .content--wrapper [class*=-title],
    th {color:inherit; color:var(--txtcolor)}

    h1 a:any-link,
    h2 a:any-link,
    h3 a:any-link,
    h4 a:any-link {color:inherit}

    ::selection {text-shadow:none; color:#fafafa; background-color:#eda221}
    form ::placeholder {color:var(--txtcolor)}
    *:focus::placeholder {color:#ccc}

    /* marine art Logo */
    .header-main .logo-main .logo--link img {
        width: 2.1875rem;
    }

    /* footer - #ma-logo #fish, #ma-logo #marineart */
    .footer--logo     {height:5rem;margin:0 auto;width:50%;text-align:center}
    .footer--logo img {margin:0 auto}
    .footer--logo #ma-logo {color:#fafafa;fill:currentColor}

    /* FF ghost scrollbar */
    .is--gecko .js--menu-scroller--list {overflow-x:auto}

    /* no bg so body linear-gradient can shine thru */
    .page-wrap .footer-main,
    .footer-main .container {background:none;color:#e9e9e9}

    .footer-main .container::after,
    .footer-main .block-group::before,
    .footer-main .block-group::after {display:none; /* disable inherited value, makes un-flexy item */}
    .footer-main .container .footer--bottom {clear:both}

    .footer-main .footer--logo img,
    .footer-main a,
    .footer-main .navigation--link,
    .footer-main .column--headline::after,
    .footer-main .column--headline {color:#e9e9e9}
    .footer-main .column--headline {padding:1ex 0}

    /* inline SVG */
    p.social-icons a.svg--icon,
    p.social-icons a.svg--icon:hover,
    p.social-icons a.svg--icon:active,
    p.social-icons a.svg--icon:focus {background:none;fill:#fff;outline-color:#004A78;padding:0}
    p.social-icons a.svg--icon:active,
    p.social-icons a.svg--icon:hover {fill:#004A78}

    #YouTube {fill:inherit; width:1.5em; height:1.5em}
    p.social-icons a.youtube #circle {fill:transparent}
    p.social-icons a.youtube:active #circle,
    p.social-icons a.youtube:hover #circle {fill:#fff}

    /* invert and reverse inverts ... */
    table th, table thead td, dt,
    .sitemap--content .sitemap--navigation-head ::selection {background:#004A78}
    table th, table thead td, dt {color:#fafafa}

    .footer-main ::selection,
    .footer-main a:active,
    .footer-main a.navigation--link:active,
    .footer-main a.navigation--link:focus {background-color:#fafafa;color:#004A78}
    .footer-main a:hover,
    .footer-main a.navigation--link:hover {background-color:transparent;color:#fafafa} /* btn-secondary-text-color */

    div.hbcom-cookiepanel {background:var(--aquaclean); border-top:1px solid currentColor;opacity:.8}
    .hbcom-cookiepanel .hbcom-cookiepanel-learn-more {color:inherit;text-decoration:underline}

    @media (min-width:30em) {
        .footer-main .navigation--link {padding:.25em 0;line-height:initial}
        .footer-main .is--last {width:100%}
        /* move padding inside so bg-col can cover all */
        .footer-main .footer--column   {padding:0}
        .footer-main .column--headline {padding:.5ex .62ex}
        .footer-main .column--content  {padding:0 .5em}
    }

    /* footer items separator line */
    @media (max-width:48em) {
        .column--hotline .ma-flex--item:last-of-type  {border-top:1px solid currentColor}
    }

    /* all but the hamburger */
    @media (min-width:48em) {
        /* like default of `.content-main.is--fullscreen` */
        section.content-main {margin-top:0;margin-bottom:1.34rem}

        /* marine art Logo */
        .header-main .logo-main {padding:0 0 0 .5rem}
        .header-main .logo-main .logo--shop {height:5.5rem;margin-top:-2.5rem}
        .header-main .logo-main .logo--link {height:auto;width:auto}
        .header-main .logo-main .logo--link img {width:5.5rem}

        /* top menu */
        .navigation-main .navigation--list {padding-top:.5ex} /* make room 4 box-shadow */
        .navigation-main li {border-top-left-radius:4px;border-top-right-radius:4px}
        .navigation-main li:hover {background-image:linear-gradient(to bottom, #017AC9 0%, #004A78 75%)}
        .navigation-main li.is--active {margin-left:.25ex;margin-right:.25ex}
        .navigation-main li.is--active:hover {background:#004A78}
        .navigation-main li:hover span {color:#fafafa}
        .navigation-main li a:focus {box-shadow:0 -1px 3px #999}
        .navigation-main li a:hover {box-shadow:0 -1px 3px #999;color:#fafafa}

        /* breadcrumbs */
        nav.content--breadcrumb {padding:0}
        .content--breadcrumb .breadcrumb--list {padding:0 0.8rem 0 1.25rem}
        .breadcrumb--list li.breadcrumb--separator {display:none}
        .breadcrumb--list .breadcrumb--entry:last-of-type {/*pointer-events:none; cursor:default;*/ color:#555}
        .is--active .breadcrumb--link {font-weight:bolder}

        /* aufwändigere varianten
         * @link https://catalin.red/css3-breadcrumbs/
         * @link https://css-tricks.com/triangle-breadcrumbs/
         * @link https://codepen.io/team/css-tricks/pen/xRmmdr
         */
        .breadcrumb--list > .breadcrumb--entry {border-right:solid 2px #004A78}
        .breadcrumb--list > .breadcrumb--entry {
            border-radius:0 1.5em 1.5em 0;
            margin-left:-1.34em;
            padding-left:1.34em;
        }

        /* left navi + sub categories */
        .sidebar--navigation .navigation--entry {font-size:1rem}

        /* align gap value with flexbox call-outs on homepage et al. */
        .page-wrap .footer-main {margin:1.62rem auto 0}

        /* core varies for larger viewports, makes page jumpy */
        .footer-main .container .footer--columns {padding:0 1.875rem}

        .footer-main .footer--columns {
            display:grid;
            gap:0 1rem;
            grid-template-columns:3fr 1fr;
            grid-template-rows:auto auto;
            border-bottom:none;
        }

        .footer-main .footer--column    {grid-row:1; grid-column:auto; width:unset}
        .footer-main .column--headline  {margin:.62em 0 0 0;padding-bottom:.62ex}
        .footer-main .is--first         {display:flex; flex-direction:row; gap:1rem} /* adresse mit 2 unterblöcken */
        .is--first .ma-flex--item   {flex:1}
        .footer-main .is--last          {grid-row:2; grid-column:1 / -1}

        /* anschrift + links abstände */
        .footer-main .navigation--entry {height:1.5rem} /* same as ul:line-height */
        .footer-main p.column--desc {padding-top:0.35ex}
    }

    @media (min-width:64em) {
        section.content-main {box-shadow:none}
        section.is--fullscreen .content--wrapper {box-shadow:0 0 2ex 0.5ex rgba(0,0,0,.65)}

        .page-wrap .footer-main {max-width:78.75em}
        @media (orientation:landscape) {
            .footer-main .footer--columns {grid-template-columns:2.5fr 1fr 1fr}
            .footer-main .footer--column  {grid-column:auto}
            .footer-main .is--last {grid-row:1}
        }

    }

    @media (min-width:78.75em) {
        .page-wrap .footer-main {padding:0}
    }

    /* marine art pflegesystem */
    .maps {font-weight:700; font-family:"Arial Black", Oswald, Impact, Arial, sans-serif}
    .strontium, .magnesium, .aquaclean, .elements, .carbonat, .calcmix,  .floras, .flakes, .carbon {color:#fff}
    .halogene, .calcium, .calcit, .algenexit {color:#000}

    /* Farben der Pflegeprodukte */
    .marineart      {background-color:#004A78     } /* #004A78 rgb(   0, 79,124 )  hsl( 202,86%,24% ) */
    .marineart.dark {background-color:var(--marineart-dark)} /* #00263D rgb(   0, 79,124 )  hsl( 202,86%,12% ) */
    .marineart.lite {background-color:var(--marineart-lite)} /* #0076B8 rgb(   0, 79,124 )  hsl( 202,86%,36% ) */

    .calcmix   {background-color:var(--calcmix  )} /* #ef4023 rgb( 239, 64, 35 )  hsl(   9, 86%,54% ) */
    .marinphos {background-color:var(--marinphos)} /* #8c301d rgb( 140, 48, 29 )  hsl(  11, 66%,33% ) */
    .flakes    {background-color:var(--flakes   )} /* #b56112 rgb( 181, 97, 18 )  hsl(  29, 82%,39% ) */
    .algenexit {background-color:var(--algenexit)} /* #eda221 rgb( 237,162, 33 )  hsl(  38, 85%,53% ) */
    .halogene  {background-color:var(--halogene )} /* #fff200 rgb( 255,242,  0 )  hsl(  57,100%,50% ) */
    .magicfood {}
    .magnesium {background-color:var(--magnesium)} /* #00a76d rgb(   0,167,109 )  hsl( 159,100%,33% ) */
    .floras    {background-color:var(--floras   )} /* #008177 rgb(   0,129,119 )  hsl( 175,100%,25% ) */
    .carbonat  {background-color:var(--carbonat )} /* #00aeef rgb(   0,174,239 )  hsl( 196,100%,47% ) */
    .strontium {background-color:var(--strontium)} /* #005AAA rgb(   0, 90,170 )  hsl( 208,100%,33% ) */
    .aquaclean {background-color:var(--aquaclean)} /* #942972 rgb( 148, 41,114 )  hsl( 319, 56%,37% ) */
    .elements  {background-color:var(--elements )} /* #ed1651 rgb( 237, 22, 81 )  hsl( 344, 86%,51% ) */
    .calcium   {background-color:var(--calcium  )} /* #e9e9e9 rgb( 233,233,233 )  hsl(   0,  0%,91% ) */
    .calcit    {background-color:var(--calcit   )} /* #fafafa rgb( 250,250,250 )  hsl(   0,  0%,98% ) */
    .carbon    {background-color:var(--carbon   )} /* #000000 rgb(   0,  0,  0 )  hsl(   0,  0%, 0% ) */
    .oceandry  {background-color:var(--oceandry )} /* #000080 rgb(   0,  0,128 )  hsl( 240,100%,25% ) */

    .f-calcmix   {color:var(--calcmix  )}
    .f-marinphos {color:var(--marinphos)}
    .f-flakes    {color:var(--flakes   )}
    .f-algenexit {color:var(--algenexit)}
    .f-halogene  {color:var(--halogene )}
    .f-magicfood {}
    .f-magnesium {color:var(--magnesium)}
    .f-floras    {color:var(--floras   )}
    .f-carbonat  {color:var(--carbonat )}
    .f-strontium {color:var(--strontium)}
    .f-aquaclean {color:var(--aquaclean)}
    .f-elements  {color:var(--elements )}
    .f-calcium   {color:var(--calcium  )}
    .f-calcit    {color:var(--calcit   )}
    .f-carbon    {color:var(--carbon   )}
    .f-oceandry  {color:var(--oceandry )}
} /* @media screen marineart.css */

/* typography.css */
@media screen {
    .content--wrapper h1,
    .content--wrapper h2,
    .content--wrapper h3,
    .content--wrapper h4,
    .content--wrapper h5,
    .content--wrapper h6,
    .footer-main [class*=-headline],
    .content--wrapper [class*=-title], /* excl. span.breadcrumb--title >8( */
    .last-seen-products [class*=-title],  /*mh 20200326 für zuletzt angesehen*/
    thead th, tbody th {
        -webkit-font-smoothing:antialiased;
        font-weight:700;
        font-family:Oswald, Impact, "Lucida Grande", Arial, "Helvetica Neue", Helvetica, sans-serif;
        margin-top:.62ex;
        margin-bottom:.62ex;
        font-variant-ligatures:common-ligatures;
    }
    .content--wrapper h4,
    .footer-main .column--headline {
        font-size:1.24em;
        font-weight:bold;
        margin-bottom:0;
        line-height:1.1;
    }

    nav.navigation-main {text-transform:lowercase}

    /* Footer Anschrift */
    .footer-main div.ma-address {text-transform:lowercase;padding-right:0.625rem}

    .footer-main p.column--desc {line-height:1.45em;margin-bottom:0}
    .footer-main p.social-icons {display:flex;line-height:1}
    p.social-icons a[class*=icon--] {display:inline-flex}

    .footer-main .privacy-information {font-size:90%;line-height:1}
    .footer-main a.navigation--link {display:inline-block}
    .footer-main a.svg--icon svg,
    .footer-main a.navigation--link[class*=icon--] {text-decoration:none;
        border:1px solid;
        font-size:1.2rem;
        text-align:center;
        vertical-align:baseline;
        border-radius:.5em;
        width:1.5em;
        height:1.5em;
        line-height:1.5;
        padding:0 .35ex;
        margin-right:1ex;
        transition:color .4s, background-color .4s
    }
    .footer-main a.navigation--link[class*=icon--]:hover {
        color:#004A78;
        background-color:#fafafa;
        border-color:#fafafa;
    }

} /* @media screen typography.css */

/* Gecko Hacks */
html.is--firefox {margin-bottom:1px;min-height:100%}

} /* @supports (display:grid) and (display:flex) and (object-fit:cover) */

/* .eof */