/**!
 * typography.css - inkl. @media print Regeln
 *
 * @version 0.9.0  2019-01-10
 * @author R. Serradeil, WebMechanic.biz
 */

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

body {
	font-family:Lato,"Lucida Sans","Myriad Pro","Open Sans","Droid Sans",Roboto,"Lucida Grande",Arial,"Helvetica Neue",Helvetica,sans-serif;
	/* controls the text inflation algorithm used on some smartphones and tablets */
	-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%; text-size-adjust:100%;
}

p, address, blockquote, h1,h2,h3,h4,h5 {transition:padding .55s, margin .55s}
address {font-style:normal}

/* @link https://caniuse.com/#feat=css-media-resolution */
.content--wrapper {--fs:1rem;--lh:1.4}

/* normalise.less Vorgaben plätten */
.blog--filter-options {font-size:.6rem}
.content--wrapper h1,
.content--wrapper h1[class*=-headline],
.content--wrapper h1[class*=-title] {font-size:2.29em;margin-top:.62ex;line-height:1.24;padding:.5ex 0}
.content--wrapper h2,
/* mh 20200326 optimiert für lange Produktnamen im Onlineshop
.content--wrapper [class*=-title] {font-size:1.618em;line-height:1.24;padding:.5ex 0} 
*/
.content--wrapper [class*=-title] {font-size:1.3em;line-height:1.0;padding:0.1ex 0}
.content--wrapper h2.panel--title {margin-top:0}
.content--wrapper h3              {font-size:1.416em;line-height:1.24}

.hd h1,.hd h2,.bd h2,.bd h3 {margin-left:0}


/* mh 20200326 Zuletzt angesehen nicht im .content--wrapper */
.last-seen-products [class*=-title] {font-size:1.3em;line-height:1.0;padding:0.1ex 0}


/* können bis FF63 leider nicht als Liste zu einer Regel kombiniert werden.
 * `table` ist hier wg. der Abstände. font-size wird extra geregelt */
.content--wrapper :-webkit-any(h5,h6,p,li,dl,blockquote,table) {font-size:var(--fs); line-height:var(--lh); margin-top:0; margin-bottom:.62ex}
.content--wrapper :-moz-any(h5,h6,p,li,dl,blockquote,table) {font-size:var(--fs); line-height:var(--lh); margin-top:0; margin-bottom:.62ex}
.content--wrapper :matches(h5,h6,p,li,dl,blockquote,table) {font-size:var(--fs); line-height:var(--lh); margin-top:0; margin-bottom:.62ex}
.content--wrapper ol > li,
.content--wrapper ul > li {margin-bottom:0}
/* excludes sitemap */
.listing--content ul, .blog--content ul,
.listing--content ol, .blog--content ol,
.listing--content dl, .blog--content dl {margin-left:0;padding-left:2em}

/*  so ist das in vor-ort.css
.emotion--element p:first-child:not(:only-child) {margin-top:0;padding-top:0}
.emotion--element p:last-child:not(:only-child)  {margin-bottom:.62rem}
*/

/* kontainer um .banner-slider--title und N x .banner-slider--container.image-slider--container */
.banner-slider--title {font-size:1.24rem} /* std. über dem slider */

/* @see widgets/emotion/components/component_banner_slider.tpl */
.banner-slider--alttext    {font-size:1.24rem; line-height:1; text-align:left}
.banner-slider--alttext h2 {font-size:161%; line-height:1}
.banner-slider--alttext h3 {font-size:100%; line-height:1}
.banner-slider--alttext span {padding:.25ex 1rem .5ex; display:inline-block}

/*
 * Design-Überschriften - weiß auf halbtransparentem enzian block
 */
.emotion--element article {
    position:relative;
    font-size:1rem;
}
.emotion--element header {
    position:relative;
    z-index:15; /* über .bd */
}
.emotion--element .html--content header h1,
.emotion--element .html--content header h2 {
    display:inline-block;
    line-height:1.24;
    padding:0;
}
.emotion--element header span {
    display:inline-block;
    padding:.25ex 1rem;
    color:var(--txtcolor-inv);
    background:var(--hdbg);
    box-shadow:0 0 .25rem 2px rgba(0,0,0,.4);
}
.hd span::after {content:' ';display:block;width:100%;height:1px;background:linear-gradient(90deg, currentColor, transparent)}


/* Silbentrennung, Ligaturen und Zahlen
 * ! Ordnungszahlen: "ordn" (ordinals), nur explizit für SPAN[lang=en] etc. deklarieren, 1st 2nd No
 */
.content--wrapper p,
.content--wrapper li, .content--wrapper dd,
.content--wrapper blockquote,
.blog--box-description-short,
.footer-main p {
    overflow-wrap:break-word;
    word-wrap:break-word;
    -webkit-hyphens:auto;
    -ms-hyphens:auto;
    -webkit-hyphenate-limit-chars:auto 3;
    -webkit-hyphenate-limit-lines:4;
    -ms-hyphenate-limit-chars:3;
    -ms-hyphenate-limit-lines:4;
    hyphens:auto;

	-ms-font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "tnum" 1, "zero" 1;
	font-feature-settings: "kern" 1, "liga" 1, "dlig" 1, "tnum" 1, "zero" 1;
}

p > a, p > a:link, p > a[class] {text-decoration:underline;font-size:inherit;text-decoration-skip-ink:auto}

/* =once for all and anything */
/* for those who can handle it = !MSIE6,7 !WebKit */
q:before,q:after{font-family:"Adobe Caslon Pro",Georgia,"Times New Roman",Times,serif;font-size:1.1em;line-height:1}
q{quotes: '„' '“' '‚' '‘' }
[lang|=de] q,q[lang|=de]{quotes: '„' '“' '‚' '‘'; }
[lang|=en] q,q[lang|=en]{quotes: '“' '”' '‘' '’'; }
[lang|=fr] q,q[lang|=fr]{quotes: '«' '»' '<' '>'; }

/* Tabellen */
table thead, table tbody, table tfoot {font-size:1rem}
table th, table td {vertical-align:top;padding:.25rem .3125rem;font-variant-numeric:tabular-nums slashed-zero}
table thead + tbody th {text-align:left}

code,samp,kbd,pre {font-family:"Lucida Console", Consolas, "Courier New", Courier, monospace}

@media (min-width:30em) {
	.blog--detail {margin-top:0}

    /* custom "page class" like no-teaser */
    article.story p {text-indent:1.24em}
    article.story h1 + p,
    article.story h2 + p,
    article.story h3 + p,
    article.story p:first-of-type,
    article.story p:first-child {text-indent:0}

    article.blog--detail-description h2,
    article.blog--detail-description h3,
    article.blog--detail-description p,
    article.blog--detail-description ul,
    article.blog--detail-description ol, .blog--detail-tags {
        --lh:1.2;
        margin-left:5%;
        width:90%;
    }
}

@media (min-width:48em) {
    .breadcrumb--list a:hover,
    .sidebar--navigation a:hover {text-shadow:0 0 2px var(--txtcolor)}

    .welcome-title,
    .banner-slider--alttext { font-size:1.416rem; }

    .content--wrapper {--lh:1.24}
    
    /* blog übersicht */
    .is--ctl-blog.is--act-index  {}
    /* blog beitrag */
    .is--ctl-blog.is--act-detail {}

    article.blog--detail-description h2,
    article.blog--detail-description h3 {
        margin-top:1.6rem;
    }
	/* default fullwidth landscape-ish IMG within blockquote > p */
    article.blog--detail-description h2,
    article.blog--detail-description h3,
    article.blog--detail-description p,
    article.blog--detail-description ul,
    article.blog--detail-description ol, .blog--detail-tags {
        --lh:1.4;
        margin-left:10%;
        width:80%;
        max-width:32em;
    }

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

@media (min-width:64em) {
    .content--wrapper {--lh:1.36}

    article.story p {text-indent:1.62em}

    article.blog--detail-description h2,
    article.blog--detail-description h3,
    article.blog--detail-description p,
    article.blog--detail-description ul,
    article.blog--detail-description ol, .blog--detail-tags {
        --lh:1.618;
        margin-left:16%;
        width:64%;
        max-width:42em;
    }

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


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

@media print {
    html body * {color:black !important; background:none; text-shadow:none; box-shadow:none}
    /* 'cos marineart.css is screen only ... */
    header.logo-main div[class] {position:relative;display:inline !important}
    header.header-main .logo--link img {
        position:absolute;
        display:inline-block;
        top:0;
        right:0;
        height:42mm;
        width:auto;
        mix-blend-mode:luminosity;
    }
    video, audio, footer,
    .content--custom a, .content--custom p br,
    .content--custom a + br, .content--custom p + br,
    .content--custom p[style]
        {display:none}
}

/* .eof */