/**!
 * marineart.css
 *
 * @version 0.9.2  2019-03-12
 * @author R. Serradeil, WebMechanic.biz
 */

@supports (display:grid) and (display:flex) and (object-fit:cover)
{

/*
 * wrap it all to safe repetition
 */
@media screen {

img,svg,video,iframe {transition-property:width, height; transition-duration:.5s}

p,ol,ul,li,dl,dt,dd,blockquote,address,figure,figcaption {color:inherit}

dt {padding:.25rem .3125rem}

figure,figcaption {margin:0}

/* landscape videos on smartphones */
article iframe {max-width:100%}

.hd h1, .hd h2, .hd h3, .hd h4 {color:var(--txtcolor-inv)}

/* Tabellen */
table tbody td {color:#000}
tr:nth-child(odd)  {background-color:var(--calcit)}
tr:nth-child(even) {background-color:var(--calcium)}

/* @todo Pseudo-Tabelle dt:Label (15ch), dd:Daten (1fr) */
.product-legend dl {
    display:grid;
    grid-template-columns:15ch 1fr;
}

/* misc. account + checkout sub-pages */
.steps--content .steps--list,
.footer-minimal {
    color:#fafafa;
}

@media (min-width:700px) {
    header.header-main {top:0}
}
@media (max-width:48em) {
    x.shop--navigation {position:absolute; top:.5rem}
}

nav.navigation-main {position:sticky; top:-1px; z-index:1027; box-shadow:8px 16px 8px -8px rgba(0,0,0,.42)}
.shop--navigation .entry--menu-left .btn {}


/* container .banner-slider--title um h2>span, h3>span aus alt und title Attributen der Images.
 * Eingabe des Bannertitel in .banner-slider--title "über" .banner-slider--container.image-slider--container
 * @see widgets/emotion/components/component_banner_slider.tpl
 */
div.banner-slider--alttext {
    position:absolute;
    bottom:3.7rem;
    left:2vw;
    width:auto;
    width:intrinsic;           /* Safari non-standard name */
    width:-moz-max-content;    /* Firefox/Gecko */
    width:-webkit-max-content; /* Chrome */
    width:max-content;         /* eventually */
    max-width:60vw;
    height:auto;
    z-index:127;
}
div.banner-slider--title,
div.banner-slider--alttext {color:var(--txtcolor-inv)}

/*  h2>span, h3>span aus alt und title Attributen */
div.banner-slider--item div.banner-slider--alttext h2 {margin:0 auto;color:inherit}
div.banner-slider--item div.banner-slider--alttext h3 {margin:0 auto;color:inherit}
.banner-slider--title,
.banner-slider--alttext span {background-color:var(--hdbg)}


    /* "image cards" .emotion--html panel has--border */
    .panel--body.is--wide {padding:.75rem}
    .panel--body h2,
    .panel--body h3  {margin-top:0;min-height:2.5em}

    /* Seiten ohne sidebar
    @see themes/Frontend/Responsive/frontend/_public/src/less/_modules/sidebar.less line 332+

    body.is--ctl-custom     {} -- Shopseite (s. shopseiten.css)
    body.is--ctl-blog       {} -- Blog
    body.is--ctl-forms      {} -- Kontakform
    body.is--ctl-newsletter {} -- Newsletterabo-Form
    body.is--act-index      {} -- eine IndexAction (Einstiegseite einer Seitenserie wie z.B. Login, Order etc)
    body.is--ctl-sitemap
    body.is--ctl-note.is--user
    body.is--ctl-address
    body.is--ctl-account.is--user

    body.is--no-sidebar     {} -- Seitenkonfig (Theme) unabh. von `is--fullscreen`
    body.is--no-sidebar.js--overlay-relative {} -- off-canvas menu offen
    */
    
    /* hamburger menu off
    body.is--no-sidebar:not(.js--overlay-relative) aside.off-canvas {width:0;display:none}
    body.is--no-sidebar div.sidebar-filter {width:0;display:none}
    */
    
    /* reclaim freedup space */
    body.is--no-sidebar .content--wrapper {margin-left:0}
    
    /* */
    
    body.is--ctl-forms.is--act-index .sidebar-main,
    body.is--ctl-newsletter .sidebar-main {width:0;display:none}
    body.is--ctl-forms      .sidebar-main + .content--wrapper,
    body.is--ctl-newsletter .sidebar-main + .content--wrapper {margin-left:0}

    .blog--detail .blog--detail-image-container {float:right;margin-left:1em}
    .blog--detail .blog--detail-images {float:none}
    /* s. 'TinyMCE editor helper classes' */
    .blog--detail img.blog--image {width:auto;max-width:100%}

    @media (min-width:30em) {
        /*
        * Einkaufswelt mit Zeilen-Layout .emotion--mode-rows
        * - section.emotion--container.emotion--mode-rows.home         :Zeilen-Layout 6-col
        * - section.emotion--container.emotion--mode-rows.vor-ort      :HTML-Block .tpl_component_html_code
        * - section.emotion--container.emotion--mode-rows.service      :HTML-Block .tpl_component_html_code
        * - section.emotion--container.emotion--mode-rows.aquarienbau  :HTML-Block .tpl_component_html_code
        * - section.emotion--container.emotion--mode-rows.ueber-uns    :HTML-Block .tpl_component_html_code
        section.emotion--mode-rows {}
        section.emotion--mode-rows.emotion--column-4 {}
        section.emotion--mode-rows.emotion--column-6 {}
        section.emotion--mode-rows.emotion--column-8 {}
        */
        @media (max-width:48em) {
            /* the hamburger + breadcrumbs */
            .content--breadcrumb {margin-top:2rem}

            /* this somehow got lost */
            .shop--navigation {height:2.5rem}
        }

        @media (orientation:portrait) {}
        @media (orientation:landscape) {}
    }

    @media (min-width:48em) {
        /* Shop freigeschalten, show sidebar mh 20200309
         .listing--sidebar {display:none}			
         .listing--sidebar + .content--wrapper {margin-left:0}
        */ 

        /* blog übersicht  body.is--ctl-blog.is--act-index  {} */
        /* blog beitrag    body.is--ctl-blog.is--act-detail {} */
        .content--wrapper article.no-teaser .blog--detail-image-container,
        .content--wrapper article.no-teaser .blog--detail-image-container img {display:none}

        article.blog--detail-description > blockquote {
            margin:0 auto;
            padding:1rem;
            text-align:center;
            max-width:1000px;
        }
        /* https://developers.google.com/youtube/player_parameters */
        article.blog--detail-description iframe[src*=youtube] {
            width:660px;
            height:calc(660px * 9 / 16);
        }

        /* work around for 2 portrait images side by side */
        article.blog--detail-description > blockquote.portrait {
            flex-flow: row nowrap;
            display: flex;
            height: 70vh;
            justify-items: start;
            place-content: space-between;
        }
        article.blog--detail-description > blockquote.portrait img {
            height:auto;
        }
        article.blog--detail-description > blockquote img.portrait {}

        /* 'cos they just belong together */
        article.blog--detail-description > blockquote img {
            float:none;
        }

        article.blog--detail-description > blockquote > p {
            margin:0 auto;
            width:auto;
            max-width:100%;
        }
        article.blog--detail-description > blockquote + p {}
    }

    @media (min-width:64em) {
        .blog--detail .blog--detail-image-container {max-width:32.5%;/*height:auto*/}

		/* for some unknow reason there's a margin in the responsive .less file */
		.image-slider .image-slider--container {margin-bottom:0}
    }

}

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

/**!
 * TinyMCE editor helper classes from backend `marineart-editor.css`
 * .left und .right sind schon im core + werden hier nur ergänzt
 */
@media all {
    img.blog--image,
    p > img:first-child,
    p > img:only-child {
        border:none;
        outline:1px solid #999;
        /* margin-top:1.35em; */ /* mit akt. absatzschrift gleichkommen */
        margin-bottom:.62em;
        box-shadow:4px 4px 12px 1px #999;
    }
    /* helper classes - IMG only!! */
    img.left, img.right {margin-bottom:.62em}
    .left-30, .left-50, .left-60 {float:left;margin-right:1em}
    .right-30, .right-50, .right-60 {float:right;margin-left:1em}
    .left-30, .right-30 {width:32%;height:auto}
    .left-50, .right-50 {width:49%;height:auto}
    .left-60, .right-60 {width:60%;height:auto}
}

/* .eof */