/****** BILDER ***********/

img {
	border: 0;
}
	
/* Logobild links oben */
img#logo {
	position: absolute;
 	bottom: 0.25em; left: 0.5em;
	width: 300px; /* original: 600px; */
	height: 80px; /* original: 160px; */
/*  	border: 1px outset #aaa;  */  /* NO CUSTOM COLOR */ 
	border: 1px solid #555; 
box-shadow: 1px 1px 10px 1px #555;
}

/* Logo halbe Groesse */
img#logo-half {
	width: 150px; /* original: 600px; */
	height: 40px; /* original: 160px; */
	vertical-align: top;
}

/* Logobilder Links unten */
img.logo-sidebar {
	width: 150px;
	height: 50px;
	padding-left: 10px;
}

img.logo-sidebar-small {
	width: 32px;
	height: 32px;
	padding-right: 4px;
}

/* logo social media klein */
img.logo-social {
	width: 24px;
	height: 24px;
	padding: 4px 0 4px 4px;
	border: 0;
	vertical-align: middle;
}

/*Logo Info-Overlay*/
img#logo-info {
	width: 100%;
	max-width: 400px;
	height: auto;
	border: 0;  
	display: block;
	margin: 0 auto;
}

img#logo-buegi {
	width: 40px;
	height: auto;
}


/* Innenansichten */
img#laden-innen {
	display: none;
}

/*Logo Info-Overlay*/
img#stapel {
	width: 200px;
	height: 255px;
	border: 0;  
	float: left;
}

/* Lagelan clippen (1/4 Flaeche) und positionieren */
img#map {
	-webkit-clip-path: inset(200px 225px);
    clip-path: inset(200px 225px);
 	margin: -200px -225px; 
	width: 900px; height: 800px; 
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { /*Workaround fuer MSIE 10, 11 */
	img#map {
		margin: 0;
		width: 450px; height: 400px; 
	}
}

@supports (-ms-ime-align:auto) { /*Workaround fuer MS Edge */
	img#map {
		margin: 0;
		width: 450px; height: 400px; 
	}
}

/** OBSOLETE
#innerpic {
	position: relative;
	background: url("../pix/laden_innen2.jpg") #fff top center; 
	background-repeat: no-repeat;
	height: 250px;
	padding-bottom: 1em;
}

#z-innerpic {
	position: relative;
	background: url("../pix/2001_innen.jpg") #fff top center; 
	background-repeat: no-repeat;
	height: 250px;
	padding-bottom: 1em;
}

#b-innerpic {
	position: relative;
	background: url("../pix/buegi_innen.jpg") #fff top center; 
	background-repeat: no-repeat;
	height: 250px;
	padding-bottom: 1em;
}

#s-innerpic {
	position: relative;
	background: url("../pix/schatz_innen.jpg") #fff top center; 
	background-repeat: no-repeat;
	height: 250px;
	padding-bottom: 1em;
}
*/

/* OBSOLETE
#zoom-l {
	position: absolute;
 	left: 0;
	height: 250px;
 	width: 300px;	
 	width: calc((100% - 300px) / 2); 
 	border: 0;
}

#zoom-m {
	position: absolute;
 	margin-left: -150px;
 	left: 50%;
	height: 250px;
 	width: 300px;	 
 	border: 0;
}

#zoom-r {
	position: absolute;
 	right: 0;
	height: 250px;
 	width: 300px;
	width: calc((100% - 300px) / 2);
 	border: 0;
}
 */

#overlay-dimmer {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.4);
	z-index: 54;
}

/*  Overlay-Bild*/
#overlay {
	position: fixed;  /* Lightbox */
	border: 0px;
	padding: 8px 8px 4px 8px;	
	background-color: #fff;
	z-index: 55;
	left: 50%; /* zentriert ... */	
	top: 50%;
	transform: translate(-50%, -50%);
}	

#overlay img {
	border: 0;
	cursor: url("../pix/cursor_minify.cur"), pointer;
	max-width: 95vw;
	max-height: 95vh;		 
	height: auto;
	width: auto;
}

#overlay a { /* reset underlaying link */
	color: #000;
}

/* TEST */
#overlay #overlaymorestr {
position: fixed;
left: 8px; right: 8px;
bottom: 4px;
/* width: 95%; */
line-height: 1;
background-color: #fff;
text-align: center;
/* overflow: hidden; */
/* padding: 0 0.5em; */
display: none;
z-index: 66;
}

/* TEST OVERLAY MIT BUTTON
# .more { 
	position: absolute;
	bottom:2em; 
	width: calc(100% - 2*8px); 
	text-align:center;
}
***********/

img.icon {
	float: left;
	border: 0;
	padding: 0 0.5em 0 0;
}

/* Bild Tippbox (area_right), volle Breite */ 
img.cover-full {
   display: block;   
	width: 100%; 
	padding: 0;	
 	border: 0; 
}

/* Bild Buchtipp, Edittext */
.tipp-cover-l,
img.left {
	position: relative; /* wg. tipp-cover-small */
 	float: left; 
	margin: 0.25em 1em 0 0;
 	border: 0; 
}

.tipp-cover-r,
img.right {
	position: relative; /* wg. tipp-cover-small */
	float: right;
	margin: 0.25em 0 0 1em;
	vertical-align: bottom;
	border: 0;
}

/* Bild zentriert */
.tipp-cover-c,
img.center {
	position: relative; /* wg. tipp-cover-small */
	display: block;	/* wg. center */
	margin: 0 auto 0.5em auto;
	max-width: 100%;
 	object-fit: none; 	
}

img.tipp-cover-small {
	position:absolute; 
	bottom: 10px; left: 10px;
	border: 2px solid #fff !important;
	box-shadow: 1px 1px 10px 1px #555;
}

/* TEST Link Plakat 
.tipp-cover-r .poster {
	position: absolute; 
	top: -1.5em; right: 0;
	font-size: 0.9em;
	color: #555;
}
***/

/* Bild Aufmacher */
img.openerpic {
	width: 367px;
	height: 235px;
	padding-bottom: 1em;
}

/* Bilder Nachlese, Tipp-Archiv, Warenkorb in der Titelzeile */
img#nachlese,
img#archiv {
	vertical-align: middle;
}

/* Artikelbild  mit zoom-overlay */
/* OBSOLETE
#zoom-l,
#zoom-m,
#zoom-r,
 */
img.cart-cover,
img.order-cover,
img.tipp-cover-c,
img.tipp-cover {
	border: 0;
	cursor: url("../pix/cursor_magnify.cur"), pointer;
}

/* Icon Überraschungstipp */
img.randomtipp-head {
	width: 97px;
	height:  110px;
	margin: 0em 2em 0em 1em;
	float: left;
}
img.randomtipp-link {
	width: 97px;
	height:  110px;
	margin: 0em 1em 1em 1em;
	vertical-align:middle;
}

/* yt-Video und Video eingebunden */
.video-wall.portrait,
iframe.tippyt,portrait,
video.tipp.portrait {
	height: 360px;
	width: auto;
}
.video-wall.landscape,
iframe.tippyt.landscape,
video.tipp.landscape{
	height: 240px;
	width: auto;
}

.video-wall.left,
iframe.tippyt.left,
video.tipp.left {
	float: left;
	margin: 0.25em 1em 0.25em 0;
}
.video-wall.right,
iframe.tippyt.right,
video.tipp.right {
	float: right;
	margin: 0.25em 0 0.25em 1em;
}

/*** TEST Video über volle Breite */
.video-wall.full,
iframe.tippyt.full,
video.tipp.full {
	width: 100%;
	height: auto;
	min-width: 0;
	margin: 0.25em auto;
	display: block;
	float: none;
 	aspect-ratio: 16 / 9;  	
}
.video-wall.portrait.full,
iframe.tippyt.portrait.full,
video.tipp.portrait.full {
	max-height: 100vh; /* Höhe des Vides auf Displayhöhe beschränken */
 	aspect-ratio: 9 / 16;  	
}
/***/

/******** Vorschaltbox yt-Video ********/
/* siehe: dsgvo-video-embed.css, https://github.com/a-v-l/dsgvo-video-embed */

iframe[data-src] {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><text text-anchor="middle" alignment-baseline="central" y="50%" font-size="1em" fill="black"><tspan x="50%" dy="-1.5em">Dieses YouTube-Video kann nur mit</tspan><tspan x="50%" dy="1.5em">aktiviertem JavaScript</tspan><tspan x="50%" dy="1.5em">abgespielt werden</tspan></text></svg>');
}

.video-wall,
iframe[data-src] {
	position: relative;
	font-size: 1em;
	color: #669;
	display: inline-block;
	min-height: 15em;  
	margin: 0;
	background-color: #eee;
	box-sizing: border-box;
	border: 2px solid #669;
	padding: 1em;
}

.video-wall.landscape {
	min-width: 26.75em; 
}

.video-wall.portrait {
	min-width: 16em;  
}

.video-wall h4 {
 	text-align: center;  
	color: #669 !important;
	font-size: 1.1em;
	padding: 0;
}

.video-wall div {
	position: absolute;
	width: calc(100% - 2em);
	top: 3em;
	bottom: 5em;
	overflow-y: auto;
	max-width: 30em; /* Begrenzung für Modus "full" */
	left: 50%; 
	transform: translateX(-50%);	
}

.video-wall p {
	font-size: 0.8em;
	margin: 0 0 1em;
}

.video-wall a {
	color: inherit;
}

.video-wall a.but {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	color: #eee;	
	text-decoration: none;  
	font-size: 0.75em;
	font-weight: 800;
	display: block;
	width: 10em;   
	height: 4.25em;
	line-height: 4.25em;
	border: 0 none;
	border-radius: 0.75em;
	padding: 0 0 0 5.5em;
	text-align: left;
	margin: 0;
	position: absolute;  
	left: 50%; 
	bottom: 1em; 
	transform: translateX(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23eee' d='M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 1em center #666;
	background-size: 3.5em;
	transition: background-color 0.3s; 
}

.video-wall a.but:hover {
	background-color: #999; 
}

/* Seitenverhältnis für yt-Video */
iframe.tippyt.landscape {
 	aspect-ratio: 16 / 9;  
}
iframe.tippyt.portrait { 
	aspect-ratio: 9 / 16; 
}

/* Legacy support */ 
@supports not (aspect-ratio: 16 / 9) {
  .iframe.tippyt.landscape::before {
    float: left;
    padding-top: 56.25%;
    content: "";
  }
  .iframe.tippyt.landscape::after { 
    display: block;
    content: "";
    clear: both;
  }
}
@supports not (aspect-ratio: 9 / 16) {
  .iframe.tippyt.landscape::before {
    float: left;
    padding-top: 177.78%;
    content: "";
  }
  .iframe.tippyt.landscape::after { 
    display: block;
    content: "";
    clear: both;
  }
}

/************* EYE CANDY via CSS3 */
/* Fade out */
/* img#zoom-l, img#zoom-m, img#zoom-r, */ /* OBSOLETE */
#mosaik .card img,
#mosaik-gal .card-gal img {
	background-color: transparent;
 	opacity: 0.3;
	transition: background-color 0.25s ease-out 0s;
}

/* Fade in */
/* img#zoom-l:hover, img#zoom-m:hover, img#zoom-r:hover, */ /* OBSOLETE */
#mosaik .card img:hover,
#mosaik-gal .card-gal img:hover {
	background-color: #fff;
}

#mosaik .card,
#mosaik-gal .card-gal {
	transition: background-size 0.25s ease-out 0s; /* zoom out */
}

#mosaik .card:hover {	
	background-size: auto 294px; /* zoom in */
}

#mosaik-gal .card-gal:hover {
 	background-size: auto 155px; /* zoom in */ 
}

/* Fade out, zoom out */
/* a img#logo, */
img.logo-sidebar,
img.logo-sidebar-small,
img.logo-social,
img.search-cover,
img.cart-cover,
img.order-cover,
img.cover-full,
a img.tipp-cover-l,
a img.tipp-cover-r,
a img.tipp-cover-c,
img.tipp-cover { 
	opacity: 1;  
	transition: transform 0.25s linear 0s, opacity 0.25s linear 0s;
}

/* Fade in, zoom in */
/* a img#logo:hover, */
img.logo-sidebar:hover,
img.logo-sidebar-small:hover,
img.logo-social:hover,
img.search-cover:hover,
img.cart-cover:hover,
img.order-cover:hover,
img.cover-full:hover,
a img.tipp-cover-l:hover,
a img.tipp-cover-r:hover,
a img.tipp-cover-c:hover,
img.tipp-cover:hover {
	opacity: 0.7; 
	transform: scale(1.05); 
} 

img.cover-full { 
	transform-origin: top center; /* zoom von uben  */
}

/* Overlay mit Schatten */
#overlay-info,
#overlay { 
	box-shadow: 5px 5px 20px -5px rgba(0,0,0,0.58);
}

/* EOF */