/**!
 * msie.css für MSIE11 - und evtl. auch IE10
 * 
 * Flexbox in MSIE 10 uses -ms- prefix and is based on the March 22, 2012 version of the Flexbox Working Draft.
 * IE Windows Phone 8.1 and Microsoft Edge, IE supports "-webkit-box-direction", "-webkit-box-orient", or "-webkit-flex-direction"
 * IE11/Edge support the W3C standard.
 * @todo Check TABLE layout mode: https://developer.mozilla.org/en-US/docs/Web/CSS/display-internal
 *
 * NESTED @media rules are of course not supported in MSIE.
 *
 * @link IE10+CSS3 https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh673536(v%3dvs.85)
 * @link Flexbox   https://msdn.microsoft.com/en-us/ie/hh673531(v=vs.94)
 * @link Grid2011  https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/
 * @version 0.2.0  28.02.2019
 * @author R. Serradeil, WebMechanic.biz
 */

/* IE10+IE11 (Windows' ugly high-contrast color scheme query ) */
@media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast: none)
{
	/*
	 * marineart.css
	 */
	h1, h2, h3, h4, h5, h6,
	[class*=-headline],
	[class*=-title],
	th {color:#004A78;font-family:Oswald,Impact,"Lucida Grande",Arial,"Helvetica Neue",Helvetica,sans-serif;}

	.hd h1, .hd h2, .hd h3, .hd h4 {color:#fafafa}
	tr:nth-child(odd)  {background-color:#fafafa}
	tr:nth-child(even) {background-color:#e9e9e9}
	::selection   {text-shadow:none; color:#004A78; background-color:#fafafa}
	nav.navigation-main {text-transform:lowercase}
	
	a, a:link, a:visited, p a, p a:link, p a[class], li a {color:inherit}
	a.is--primary {color:#fafafa}

	.navigation-main li:hover {background-image:linear-gradient(to bottom, #004A78 0%, #004A78 75%);}
	.navigation-main li.is--active:hover {background:#004A78}
	.navigation-main li:hover span {color:#fafafa}
	.navigation-main li a:hover {box-shadow:0 -1px 3px #999;color:#fafafa;}
	
	.breadcrumb--list > .breadcrumb--entry {border-right:solid 2px #004A78;}

	table th, table thead td, dt,
	.sitemap--content .sitemap--navigation-head ::selection {background:#004A78}
	table th, table thead td, dt, header h1, header h2,
	.sitemap--content .sitemap--navigation-head ::selection {color:#fafafa}

	div.hbcom-cookiepanel {background:#942972; border-top:1px solid currentColor;opacity:.8}
	
	div.banner-slider--title,
	div.banner-slider--alttext {color:#fafafa;}

	.banner-slider--title,
	.banner-slider--alttext span {background-color:rgba(0,79,124,.85)}

	/* FLEXBOX HAXX */
	.footer-main .is--first   {display:-ms-flexbox;min-width:50%} /* adresse mit 2 unterblöcken */
	.is--first .ma-flex--item {-ms-flex:1}
    .footer-main .social-icons {display:-ms-flexbox}

    svg#YouTube {width:1.5em; height:1.5em;}

    /*
     * typogrphy.css
     */
	h5,h6,p,ol,ul,dl,blockquote,table {font-size:1.1rem; line-height:1.1; margin-top:0; margin-bottom:.62ex;}
	.emotion--element header span {
		color:#fafafa;
		background:rgba(0,79,124,.85);
	}
    .hd h1 span,
    .hd h2 span {padding:0 1rem;}

	.breadcrumb--list a:hover,
	.sidebar--navigation a:hover {text-shadow:0 0 2px #004A78;}

    /* footer column headings */
    .footer-main .column--headline {font-size:1rem}

	/*
	 * vor-ort.css
	 * @todo simple grid-layout, some images
	 */
    #page--vor-ort img.lazyload {display:none} /* @todo */
    @media (min-width:48em) {
        .elt--vor-ort .emotion--element {}
        .elt--vor-ort .emotion--element article {}
    }

} /* IE10+IE11 @media screen and (-ms-high-contrast:active), screen and (-ms-high-contrast: none) */


/*
 * aquarienbau.css
 */
@media screen and (-ms-high-contrast:active) and (min-width:48em),
       screen and (-ms-high-contrast:none) and (min-width:48em) {

    /* OUTER GRID on für IE10 ein 8-raster, weil es einfacher ist */
    #page--aquarienbau .elt--aquarienbau {
        float:none;
        display:-ms-grid;
        -ms-grid-columns:1fr 1fr 1fr 1fr 1fr;
        -ms-grid-rows:auto;
    }
    .elt--aquarienbau article {
        -ms-grid-column:1;
        -ms-grid-column-span:6;
    }
    .elt--aquarienbau article .hd,
    .elt--aquarienbau article .bd {height:auto;padding-right:1em}

    /* images and lazyload galeries */
    .elt--aquarienbau article > aside {display:-ms-flexbox;-ms-flex-direction:row;-ms-flex-wrap:wrap}
    .elt--aquarienbau article > aside > picture {display:inline-block}

    /* "inner grids" */
    .elt--aquarienbau > article {
        display:-ms-grid;
        -ms-grid-columns:60% 40%;
        -ms-grid-rows:auto 1fr;
        grid-template-areas:
            "hd ft"
            "bd ft";
    }
    .elt--aquarienbau > article > .hd {-ms-grid-row:1;-ms-grid-column:1;}
    .elt--aquarienbau > article > .bd {-ms-grid-row:2;-ms-grid-column:1;}
    .elt--aquarienbau > article > .ft {-ms-grid-row:2;-ms-grid-column:2;-ms-grid-row-span:2;}

    /* aquarien */
    .elt--aquarienbau article[data-flexgroup='1'] {-ms-grid-row:1}
    .elt--aquarienbau article[data-flexgroup='1'] .ft {-ms-grid-row:1}
    .elt--aquarienbau article[data-flexgroup='1'] .aquarien {width:32.5%}

    /* ueberlauf */
    .elt--aquarienbau article[data-flexgroup='2'] {-ms-grid-row:2}
    .elt--aquarienbau article[data-flexgroup='2'] .ft {-ms-grid-row:1;-ms-flex-wrap:nowrap}
    .elt--aquarienbau article > aside > .ueberlauf  {width:50%}
    .elt--aquarienbau article > aside > .ueberlauf .img-portrait {}
    .elt--aquarienbau article > aside > .ueberlauf .img-square   {}

    /* filterung */
    .elt--aquarienbau article[data-flexgroup='3'] {-ms-grid-row:3}
    .elt--aquarienbau article[data-flexgroup='3'] .ft {-ms-flex-wrap:nowrap}
    .elt--aquarienbau article > aside > .filterung  {width:50%}
    .elt--aquarienbau article > aside > .filterung .img-portrait {}
    .elt--aquarienbau article > aside > .filterung .img-square   {}

    /* wanne */
    .elt--aquarienbau article[data-flexgroup='4'] {-ms-grid-row:4;-ms-grid-columns:50% 50%}
    .elt--aquarienbau article > aside > .wanne {width:50%}

    /* ablauf, rohre */
    .elt--aquarienbau article[data-flexgroup='5'] {-ms-grid-row:5;-ms-grid-columns:50% 50%}
    .elt--aquarienbau article > aside > .ablauf {width:50%}
    .elt--aquarienbau article > aside > .rohre  {width:50%}
}

/*
 * service.css
 */
@media screen and (-ms-high-contrast:active) and (min-width:64em),
       screen and (-ms-high-contrast:none) and (min-width:64em) {
    #page--service,
    #page--service .footer-main div {max-width:78.75em}

    .elt--service {display:-ms-grid;-ms-grid-columns:1fr 1fr;-ms-grid-rows:auto;}

    .elt--service header.ma-begin         {display:block;-ms-grid-row:1;-ms-grid-column-span:2;margin:0 auto;width:65%}
    .elt--service article.ma-form         {display:block;-ms-grid-row:2;-ms-grid-column:1;}
    .elt--service article.ma-platzieren   {display:block;-ms-grid-row:2;-ms-grid-column:2;}
    .elt--service article.ma-kreiern      {display:block;-ms-grid-row:3;-ms-grid-column:1;}
    .elt--service article.ma-geniessen    {display:block;-ms-grid-row:3;-ms-grid-column:2;}
    .elt--service article.ma-hand         {display:block;-ms-grid-row:4;-ms-grid-column:1;}
    .elt--service article.ma-hilfsbereit  {display:block;-ms-grid-row:4;-ms-grid-column:2;}
    .elt--service article.ma-final        {display:block;-ms-grid-row:5;-ms-grid-column:1;}
    .elt--service article[class*=ma-]     {padding-right:1em}
}

/*
 * ueber-uns.css
 * @todo simple grid-layout, some images
 */
@media screen and (-ms-high-contrast:active) and (min-width:48em),
screen and (-ms-high-contrast: none) and (min-width:48em) {

    .page-wrap .is--fullscreen section.ueber-uns {margin:0 auto;padding:0;max-width:78rem}

}
/* .eof */