@charset "utf-8";
/* CSS Document */

/* ----------------------------------------------------------------------------- *
 *                     Lightbox Template by www.a-krueger.eu                     *
 * ----------------------------------------------------------------------------- */

/* Lightbox Styles */
.lightbox {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    height: 100vh; /* Stellt sicher, dass die Lightbox den gesamten Bildschirm einnimmt */
    width: 100vw;
    background: rgba(0, 0, 0, 0.8); /* Abdunklung des Hintergrunds */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden; /* Verhindert das Scrollen des Hintergrunds */
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    z-index: 1000;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox img {
    max-width: 100%;
    max-height: auto; 
    object-fit: contain; /* Sorgt dafür, dass das Bild proportional skaliert */
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: var(--secondary);
	border: 1px solid #d8d5d2;
	border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
	padding: 10px;
	z-index: 100000;
}

.close-btn:hover {
    opacity: 0.8;
}

.close-cross {
	position: relative; 
	width: 25px; 
	height: 25px; 
	cursor: pointer; 
}

.close-cross .cross {
	position: absolute; 
	width: 25px; 
	height: 2px; 
	background-color: #ecf0f1; 
	transition: all 0.3s ease-in-out; 
}

.close-cross .cross:nth-child(1) {
	top: 50%; 
	left: 0; 
	transform: translateY(-50%) rotate(45deg);
}

.close-cross .cross:nth-child(2) {
	top: 50%; 
	left: 0; 
	transform: translateY(-50%) rotate(-45deg);
}

/* ----------------------------------------------------------------------------- *
 *                              Artikel Images                                   *
 * ----------------------------------------------------------------------------- */
.flex-item-1-artikel-img {
	flex: 1;
	padding: 15px;
}
/* Styles for Book Image and Zoom Icon */
.artikel-img {
    flex: 1;
    width: auto;
    height: 100%;
	max-height: 350px;
    padding: 0;
    position: relative;
    cursor: pointer;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}

.artikel-img img {
    width: auto;
	max-height: 320px;
    cursor: pointer;
}

.artikel-img:hover .magnify-icon {
    display: block;
}

.magnify-icon {
    position: absolute;
	width: 40px;
	height: 40px;
	bottom: 0;
    right: 10%;
    font-size: 20px;
	background: #f1f1f1;
	border-radius: 50%;
    color: var(--primary);
    cursor: pointer;
    pointer-events: none; /* Verhindert, dass das Icon das Klicken blockiert */
}

.fa-magnifying-glass-plus {
	padding: 12px 0 2px 2px;

}
.flex-container-thumb-artikel {
    margin: 0 auto;
    width: 120px; /* bestimmt die Größe der thumb-Bilder */
	height: auto;
    display: flex;
    flex-direction: row;
    gap: 20px;
    cursor: pointer;
}

.artikel-img-thumbs {
    flex: 1;
}

.artikel-img-thumbs img {
    cursor: pointer;
}
.flex-container-row-artikel {
	margin: 0 auto;
	max-width: 100%;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 15px;
	margin-top: 100px;
	}

/* ----------------------------------------------------------------------------- *
 *                              Artikel Details                                  *
 * ----------------------------------------------------------------------------- */

.artikel-details {
	margin: 0 auto;
	padding: 0 2em 0 2em;
	width: 100%;
	height: auto;
	min-height: 350px;
	border: 0px solid #d9d9d9;
	display: flex;
	flex-direction: column;
}

.artikel-details h2 {
	font-size: clamp(2.0rem, 5vw + 1rem, 3.0em); /* Dynamische Größe für h2 */
	font-weight: 400;
	line-height: 1.2em;
	margin-bottom: 10px;
	color: var(--primary);
	text-align: left;
}

.artikel-details h3 {
	font-size: 1.5em;
	font-weight: 400;
	line-height: 1.0em;
	margin-bottom: 10px;
	color: #1a1a1a;
	text-align: left;
	padding: 0;
}

.artikel-details h4 {
	font-size: 1.1em;
	font-weight: 400;
	line-height: 1.5em;
	color: #1a1a1a;
	text-align: left;
	padding: 0 0 10px 0;
	font-family: SourceSansPro-Light, sans-serif;
}

.artikel-details ul {
	padding: 0;
	margin: 0;
	margin-top: 10px;
	margin-bottom: 20px;
}

.artikel-details ul>li {
	padding: 0;
	padding-left: 5px;
	margin: 0;
	font-size: 0.9em;
	font-weight: 400;
	line-height: 1.2em;
	color: #1a1a1a;
	text-align: left;
	font-family: SourceSansPro-Regular, sans-serif;
}

p.price {
	font-size: 1.1em;
	font-weight: 400;
	line-height: 1.5em;
	color: #1a1a1a;
	text-align: left;
	padding: 20px 0 15px 0;
	font-family: SourceSansPro-Light, sans-serif;
}

p.sample {
	font-size: 1.0em;
	font-weight: 400;
	line-height: 1.5em;
	color: #1a1a1a;
	text-align: center;
	padding: 5px 0 20px 0;
	font-family: SourceSansPro-Regular, sans-serif;
}

p.sample a {
	color: #1a1a1a;
}