/* =====================================================================
   luftbildshop.de - modernes Erscheinungsbild (11/2026)
   Wird nach style.css geladen (siehe includes/bottom.php) und ueberschreibt
   nur die Darstellung. Templates, IDs und Klassen bleiben unveraendert,
   damit alle Skripte (global.js, jquery_bestellung.js, fancybox) weiter
   funktionieren.
   ===================================================================== */

:root {
	--elb-accent: #0494dc;
	--elb-accent-dark: #0377b3;
	--elb-accent-soft: #e7f4fb;
	--elb-ink: #1c2631;
	--elb-muted: #5e6b79;
	--elb-line: #e1e7ee;
	--elb-field: #cdd6e0;
	--elb-bg: #f3f5f8;
	--elb-card: #ffffff;
	--elb-dark: #17212c;
	--elb-error: #d93025;

	--elb-radius-img: 10px;
	--elb-radius: 14px;
	--elb-radius-lg: 18px;
	--elb-shadow: 0 1px 2px rgba(20, 33, 48, .06), 0 4px 14px rgba(20, 33, 48, .06);
	--elb-shadow-hover: 0 2px 4px rgba(20, 33, 48, .08), 0 12px 28px rgba(20, 33, 48, .14);
	--elb-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html {
	-webkit-text-size-adjust: 100%;
	accent-color: var(--elb-accent);
}

body {
	margin: 0;
	font-family: var(--elb-font);
	font-size: 100%;
	line-height: 1.55;
	color: var(--elb-ink);
	background: var(--elb-bg);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--elb-accent-dark);
	transition: color .15s ease;
}
a:hover {
	color: var(--elb-ink);
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
	outline: 2px solid var(--elb-accent);
	outline-offset: 2px;
}

h1 {
	font-size: 1.6em;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.01em;
	margin-bottom: .8em;
}
h2 {
	font-size: 1.15em;
	font-weight: 650;
	line-height: 1.3;
}

/** Bildschutz ***********************************************/
/* Bilder lassen sich nicht markieren, ziehen oder per Langdruck (iOS) sichern.
   Das Kontextmenue sperrt js/elb-shop.js. */
img {
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Klicks und Rechtsklicks landen auf dem umgebenden Element statt auf dem Bild,
   so bietet der Browser keine Bildbefehle an */
a.fotos img,
.elb-bild img,
#fancybox-content img,
.image-list-item figure img {
	pointer-events: none;
}

a.fotos {
	display: inline-block;
	position: relative;
	-webkit-touch-callout: none;
}
/** ENDE: Bildschutz ***********************************************/


/** Header ***********************************************/
body > header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .8em 1.5em;
	margin: 0;
	padding-top: 18px;
	padding-bottom: 14px;
	background: var(--elb-card);
	text-align: left;
}

body > header > a {
	display: inline-block;
	line-height: 0;
}

body > header img {
	max-height: 58px;
	width: auto;
}

header .navMain,
header .navMain ul {
	width: auto;
	margin: 0;
	float: none;
	clear: none;
}

header .navMain li {
	border-top: 0;
	margin-left: 0;
	float: none;
}

#wrapWarenkorb a {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .6em 1.1em;
	border-radius: 999px;
	background: var(--elb-accent-soft);
	color: var(--elb-accent-dark);
	font-size: .95em;
	font-weight: 650;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

#wrapWarenkorb a::before {
	content: "";
	width: 1.25em;
	height: 1.25em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230377b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2.5 3h2.6l2.4 11.6a1.6 1.6 0 0 0 1.6 1.3h8.6a1.6 1.6 0 0 0 1.6-1.2L21.5 7H6'/%3E%3C/svg%3E") 50% 50% / contain no-repeat;
}

#wrapWarenkorb a:hover {
	background: var(--elb-accent);
	color: #fff;
}
#wrapWarenkorb a:hover::before {
	filter: brightness(0) invert(1);
}
/** ENDE: Header ***********************************************/


/** Suchformular oben ***********************************/
#sectionSearch {
	background: var(--elb-card);
	border-bottom: 1px solid var(--elb-line);
	box-shadow: 0 6px 18px -14px rgba(20, 33, 48, .35);
}

#sectionSearch form {
	margin: 0;
	padding-top: .4em;
	padding-bottom: 1em;
}

#sectionSearch .searchArea {
	display: flex;
	align-items: stretch;
	width: 100%;
	float: none;
	margin: 0;
	padding: 0;
}

#sectionSearch .searchFields {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	float: none;
	margin: 0;
	padding: 0 0 0 1.2em;
	background: #f6f8fb;
	border: 1px solid var(--elb-field);
	border-right: 0;
	border-radius: 999px 0 0 999px;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

#sectionSearch .searchFields:focus-within {
	background: #fff;
	border-color: var(--elb-accent);
	box-shadow: 0 0 0 3px rgba(4, 148, 220, .15);
}

#sectionSearch .searchFields input.searchTerm {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	margin: 0;
	padding: .85em 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-size: 1em;
	color: var(--elb-ink);
	outline: none;
}

#sectionSearch .searchFields input.searchTerm::placeholder {
	color: #8794a3;
}

#sectionSearch .searchFilter {
	position: relative;
	display: block;
	float: none;
	flex: 0 0 auto;
	margin: 0;
	padding: .45em 2.5em .45em 1em;
	border: 0;
	border-left: 1px solid var(--elb-line);
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e6b79' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .9em center / 1em no-repeat;
	color: var(--elb-muted);
	font-size: .95em;
	white-space: nowrap;
	cursor: pointer;
	user-select: none;
}

#sectionSearch .searchFilter.opened {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230494dc' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
	color: var(--elb-ink);
}

#sectionSearch .searchFilterSelection {
	top: 100%;
	left: auto;
	right: -1px;
	width: 13em;
	margin-top: .7em;
	padding: .35em;
	background: var(--elb-card);
	border: 1px solid var(--elb-line);
	border-radius: 12px;
	box-shadow: var(--elb-shadow-hover);
	z-index: 1100;
}

#sectionSearch .searchFilterSelection li {
	padding: .65em .85em;
	line-height: 1.3;
	border-radius: 8px;
	color: var(--elb-ink);
}

#sectionSearch .searchFilterSelection li:hover {
	background: var(--elb-bg);
}

#sectionSearch .searchFilterSelection li.checked {
	color: var(--elb-accent-dark);
	font-weight: 650;
	background: var(--elb-accent-soft);
}

#sectionSearch .searchButton {
	flex: 0 0 auto;
	width: 3.6em;
	min-height: 2.9em;
	margin: 0;
	padding: 0;
	border: 1px solid var(--elb-accent);
	border-radius: 0 999px 999px 0;
	background: var(--elb-accent) url("../lupe.png") 45% 50% no-repeat;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .15s ease;
}

#sectionSearch .searchButton:hover {
	background-color: var(--elb-accent-dark);
}

#sectionSearch.fixed {
	box-shadow: 0 8px 24px -12px rgba(20, 33, 48, .35);
}

/* Warteschleife waehrend der Suche / beim Absenden */
#warteschleife {
	padding: 1.1em 1.4em;
	border: 0;
	border-top: 4px solid var(--elb-accent);
	border-radius: var(--elb-radius);
	background: var(--elb-card);
	box-shadow: var(--elb-shadow-hover);
	color: var(--elb-ink);
	font-weight: 600;
}

#warteschleife p {
	margin: .2em 0 0;
	color: var(--elb-accent);
	letter-spacing: .15em;
}
/** ENDE: Suchformular oben ***********************************/


/*** Content-Bereich ***************************************************************/
main {
	padding-bottom: 1em;
}

section, .section {
	margin-top: 2.5em;
}

/* Bildleiste auf der Startseite als Slider (Steuerung: js/elb-shop.js).
   Gleiche Breite wie die Inhaltsspalte (.col-1, z.B. "Schritt fuer Schritt ...") */
#bildleiste.elb-slider {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 1.2em 0 0;
	padding: 0 1em;
	text-align: left;
}

.elb-slider-fenster {
	position: relative;
	overflow: hidden;
	border-radius: var(--elb-radius-lg);
	background: #dfe5ec;
	box-shadow: var(--elb-shadow);
	aspect-ratio: 3 / 2;
}

#bildleiste .elb-slides {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
}

#bildleiste .elb-slides.elb-animiert {
	transition: transform 1s ease-in-out;
}

#bildleiste .elb-slide {
	position: relative;
	flex: 0 0 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

#bildleiste .elb-bild {
	position: relative;
	display: block;
	height: 100%;
	color: #fff;
}

#bildleiste img,
#bildleiste .elb-bild img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	object-fit: cover;
}

/* Bildunterschrift: Titel links, Bild-Nr. und Fotograf rechts */
#bildleiste .elb-slide-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: .2em 1.5em;
	padding: 2.4em 1em .7em;
	background: linear-gradient(to top, rgba(12, 22, 32, .8), rgba(12, 22, 32, 0));
	font-size: .85em;
	line-height: 1.45;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

#bildleiste .elb-slide-titel {
	flex: 1 1 24em;
	font-weight: 600;
}

#bildleiste .elb-slide-nr {
	flex: 0 0 auto;
	opacity: .85;
}

#bildleiste .elb-bild:hover .elb-slide-titel {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Pfeile (erzeugt js/elb-shop.js) */
.elb-slider-pfeil {
	position: absolute;
	top: 50%;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: -19px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	cursor: pointer;
	opacity: .85;
	transition: opacity .2s ease, background-color .2s ease;
}

.elb-slider-pfeil::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 0 0 4px;
	border-left: 3px solid var(--elb-accent);
	border-bottom: 3px solid var(--elb-accent);
	border-radius: 1px;
	transform: rotate(45deg);
}

.elb-slider-zurueck {
	left: 12px;
}

.elb-slider-weiter {
	right: 12px;
}

.elb-slider-weiter::before {
	margin: 0 4px 0 0;
	transform: rotate(-135deg);
}

.elb-slider-pfeil:hover,
.elb-slider-pfeil:focus-visible {
	opacity: 1;
	background: #fff;
}

/* Maus: Pfeile erst beim Ueberfahren zeigen */
@media (hover: hover) {
	.elb-slider-pfeil {
		opacity: 0;
	}
	.elb-slider:hover .elb-slider-pfeil,
	.elb-slider-pfeil:focus-visible {
		opacity: .9;
	}
}

@media (prefers-reduced-motion: reduce) {
	#bildleiste .elb-slides.elb-animiert {
		transition: none;
	}
}

@media only screen and (min-width: 700px) {
	.elb-slider-fenster {
		aspect-ratio: 5 / 2;
	}
	#bildleiste .elb-slide-caption {
		padding: 3em 1.5em .9em;
		font-size: .92em;
	}
	.elb-slider-pfeil {
		width: 46px;
		height: 46px;
		margin-top: -23px;
	}
	.elb-slider-pfeil::before {
		width: 12px;
		height: 12px;
	}
}

/* wie .col-1 in style.css: Inhaltsspalte max. 1280px, zentriert */
@media only screen and (min-width: 1180px) {
	#bildleiste.elb-slider {
		padding-left: calc(50% - 640px);
		padding-right: calc(50% - 640px);
	}
	.elb-slider-fenster {
		aspect-ratio: 16 / 5;
	}
}

/* Einfuehrungstext */
#einfuehrung {
	padding: 1.6em 1.8em;
	margin-bottom: 2em;
	background: var(--elb-card);
	border-radius: var(--elb-radius-lg);
	box-shadow: var(--elb-shadow);
}

#einfuehrung > p:first-child {
	margin-top: 0;
	font-size: 1.05em;
}

#einfuehrung br {
	display: none;
}

#einfuehrung ol {
	counter-reset: elb-schritt;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 1.2em 0 0;
	padding: 0;
}

#einfuehrung ol li {
	counter-increment: elb-schritt;
	list-style: none;
	list-style-type: none;
	position: relative;
	margin: 0;
	padding: 1em 1.1em 1em 3.6em;
	background: var(--elb-bg);
	border-radius: var(--elb-radius);
	line-height: 1.45;
}

#einfuehrung ol li::before {
	content: counter(elb-schritt);
	position: absolute;
	left: 1em;
	top: .95em;
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	background: var(--elb-accent);
	color: #fff;
	font-weight: 700;
	font-size: .9em;
	line-height: 1.8em;
	text-align: center;
}
/*** ENDE: Content-Bereich ***************************************************************/


/** Ergebnisse der Suche ***********************/
.wrap-search-cols {
	background: transparent;
	padding: 0 1em .5em;
}

@media only screen and (min-width: 1400px)
{
	.wrap-search-cols {
		padding-left: max(1em, calc(50% - 840px));
		padding-right: max(1em, calc(50% - 840px));
	}
}

.wrap-search-cols > p {
	color: var(--elb-muted);
}

.wrap-search-cols > p:first-child {
	margin-top: 0;
	color: var(--elb-ink);
	font-size: 1.15em;
}

.image-list-item figure {
	border-radius: var(--elb-radius-img);
	background: #dfe5ec;
	box-shadow: var(--elb-shadow);
	transition: box-shadow .2s ease, transform .2s ease;
	-webkit-user-select: none;
	user-select: none;
}

.image-list-item figure:hover {
	box-shadow: var(--elb-shadow-hover);
	transform: translateY(-2px);
}

.image-list-item a.fotos {
	display: block;
}

.image-list-item figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--elb-radius-img);
}

/* Mouse-Over-Text (wird von jquery_bestellung.js ein-/ausgeblendet) */
.image-list-item figcaption {
	left: 0;
	right: 0;
	bottom: 0;
	width: auto;
	padding: 2.4em .9em .75em;
	border-radius: 0 0 var(--elb-radius-img) var(--elb-radius-img);
	background: linear-gradient(to top, rgba(12, 20, 30, .9), rgba(12, 20, 30, .72) 65%, rgba(12, 20, 30, 0));
	color: #e9eef3;
	font-size: .78em;
	line-height: 1.4;
	text-align: left;
	animation: elb-einblenden .18s ease-out;
}

.image-list-item figcaption span.link-img-description {
	margin: 0 0 .35em;
	color: #fff;
	font-size: 1.12em;
	font-weight: 650;
	line-height: 1.3;
	/* Titel und "(c) Fotograf" als Blocksatz */
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.image-list-item figcaption span.link-img-autor {
	font-weight: 400;
	opacity: .9;
}

/* Bild-ID unten rechts auf dem Bild, auf Hoehe der Icons "+" / Lupe */
.image-list-item figcaption span.link-img-id {
	position: absolute;
	right: .9em;
	bottom: .75em;
	height: 36px;
	line-height: 36px;
	font-weight: 600;
	white-space: nowrap;
	opacity: .95;
}

/* sehr schmale Hochformate: Bild-ID rechtsbuendig ueber den Icons, damit sie die Lupe nicht verdeckt */
.image-list-item figure {
	container-type: inline-size;
}

@container (max-width: 230px) {
	.image-list-item figcaption span.link-img-id {
		position: static;
		display: block;
		height: auto;
		margin-top: .3em;
		line-height: 1.4;
		text-align: right;
	}
}

.image-list-item .wrap-img-icons {
	display: flex;
	gap: .5em;
	margin-top: .6em;
	padding: 0;
	background: transparent;
	border: 0;
	text-align: left;
}

.image-list-item .img-icon {
	width: 36px;
	height: 36px;
	margin: 0;
	border-radius: 50%;
	background: #fff 50% 50% / 55% no-repeat;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
	transition: transform .15s ease, background-color .15s ease;
}

.image-list-item .img-icon:hover {
	transform: scale(1.1);
}

.image-list-item .img-icon-add {
	background-color: var(--elb-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}

.image-list-item .img-icon-zoom {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2631' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
}

@keyframes elb-einblenden {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: none; }
}

/* Seitennavigation */
#lightboxPageLinks label {
	color: var(--elb-muted);
	font-weight: 600;
}

#lightboxPageLinks a, #lightboxPageLinks span {
	min-width: 2.6em;
	box-sizing: border-box;
	padding: .45em .8em;
	border: 1px solid var(--elb-line);
	border-radius: 10px;
	background: var(--elb-card);
	color: var(--elb-ink);
	text-align: center;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#lightboxPageLinks a:hover {
	background: var(--elb-accent-soft);
	border-color: var(--elb-accent);
	color: var(--elb-accent-dark);
}

#lightboxPageLinks span {
	background: var(--elb-accent);
	border-color: var(--elb-accent);
	color: #fff;
	font-weight: 700;
}
/** ENDE: Ergebnisse der Suche ***********************/


/** Formulare ******************************/
form input[type=text],
form input[type=tel],
form input[type=email],
form select,
form textarea {
	box-sizing: border-box;
	max-width: 100%;
	padding: .7em .9em;
	border: 1px solid var(--elb-field);
	border-radius: 10px;
	background-color: #fff;
	color: var(--elb-ink);
	font-family: inherit;
	font-size: 1em;
	transition: border-color .15s ease, box-shadow .15s ease;
}

form select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 2.4em;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e6b79' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right .8em center / 1em no-repeat;
	cursor: pointer;
}

form input[type=text]:focus,
form input[type=tel]:focus,
form input[type=email]:focus,
form select:focus,
form textarea:focus {
	border-color: var(--elb-accent);
	box-shadow: 0 0 0 3px rgba(4, 148, 220, .15);
	outline: none;
}

form label {
	color: var(--elb-muted);
	font-weight: 600;
}

form label.no-float {
	color: var(--elb-ink);
	font-weight: 500;
}

input[type=radio], input[type=checkbox] {
	width: 1.1em;
	height: 1.1em;
	vertical-align: -.15em;
}

/* fehlerhafte Felder (Klasse "error" setzt jquery_bestellung.js) - muss die Feld-Regeln oben schlagen */
input.error, select.error, textarea.error,
form input[type=text].error,
form input[type=tel].error,
form input[type=email].error,
form select.error,
form textarea.error {
	background-color: #fff5f4;
	border-color: var(--elb-error);
	box-shadow: 0 0 0 3px rgba(217, 48, 37, .12);
}

input[type=radio].error, input[type=checkbox].error {
	outline: 2px solid var(--elb-error);
	outline-offset: 2px;
}
h2.error, .error_mark {
	color: var(--elb-error);
}
.msg, .errMsg {
	color: var(--elb-error);
}
/** ENDE: Formulare ******************************/


/** Buttons ********************************************************************/
.link-button,
a.link-button {
	display: inline-block;
	margin: 1em 0;
	padding: .85em 1.6em;
	border: 1px solid var(--elb-accent);
	border-radius: 999px;
	background-color: var(--elb-accent);
	color: #fff;
	font-family: inherit;
	font-size: 1em;
	font-weight: 650;
	line-height: 1.2;
	letter-spacing: .02em;
	text-align: center;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: 0 4px 12px -4px rgba(4, 148, 220, .55);
	transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.link-button:hover {
	background-color: var(--elb-accent-dark);
	border-color: var(--elb-accent-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px -6px rgba(4, 148, 220, .6);
}

.link-button-invers,
a.link-button-invers {
	background-color: #fff;
	color: var(--elb-accent-dark);
	box-shadow: none;
}

.link-button-invers:hover {
	background-color: var(--elb-accent-soft);
	color: var(--elb-accent-dark);
	box-shadow: none;
}

.link-button-kasse {
	padding-left: 3em;
	padding-right: 3em;
}

.text-zusatzkosten {
	color: var(--elb-muted);
}
.text-zusatzkosten a {
	color: var(--elb-muted);
}
/** ENDE: Buttons ********************************************************************/


/** Bestellformular ***********************/
#bestellungLeft,
#bestellungRight {
	box-sizing: border-box;
	background: var(--elb-card);
	border-radius: var(--elb-radius-lg);
	box-shadow: var(--elb-shadow);
}

#bestellungLeft {
	padding: 1.4em;
	margin-bottom: 1.5em;
}

#bestellungRight {
	padding: 1.2em 1.4em;
	border: 0;
}

#bestellungRight h2 {
	margin-bottom: .8em;
}

#wrapBild {
	margin-bottom: 1.5em;
}

#wrapBild a.fotos {
	display: block;
	margin-bottom: 1.5em;
	line-height: 0;
}

#wrapBild a.fotos img {
	max-width: 100%;
	margin: 0;
	border-radius: 12px;
	box-shadow: var(--elb-shadow-hover);
}

#wrapBild #bildInfo {
	box-sizing: border-box;
	padding: 1.1em 1.3em;
	background: var(--elb-bg);
	border-radius: var(--elb-radius);
	color: var(--elb-muted);
	line-height: 1.7;
}

#wrapBild #bildInfo p {
	margin: .6em 0 0;
}

#wrapBild #bildInfo p a {
	display: inline-block;
	padding: .35em .9em;
	border: 1px solid var(--elb-accent);
	border-radius: 999px;
	font-weight: 600;
	line-height: 1.4;
}

#wrapBild #bildInfo p a:hover {
	background: var(--elb-accent);
	color: #fff;
}

#infoDruck {
	box-sizing: border-box;
	width: 100%;
	padding: .8em 1em;
	background: #fff;
	border: 1px solid var(--elb-line);
	border-radius: 10px;
	font-size: .92em;
	line-height: 1.5;
}

#formOrder > p > b {
	font-size: 1.15em;
}

#formOrder #productBeschreibung {
	color: var(--elb-muted);
	font-size: .95em;
}

#wrapBestellungPreis {
	margin: 2em 0;
	padding: 1em 1.2em;
	background: var(--elb-accent-soft);
	border-radius: var(--elb-radius);
}

.artikel-preis {
	font-size: 1.35em;
	color: var(--elb-ink);
}

.artikel-preis-value {
	width: auto;
	margin-right: 1em;
}

/* "Preis" und "Menge": style.css gibt allen Formular-Beschriftungen feste 15 % Breite -
   am Handy schmaler als das Wort selbst, Preis/Eurobetrag und Mengenfeld liefen hinein.
   Jetzt mindestens so breit wie der Text plus 1em Abstand (gut 3 Leerzeichen),
   auf breiten Bildschirmen bleibt es bei den 15 % (Ausrichtung wie bisher). */
#formOrder label.artikel-preis,
#formOrder label.label-text {
	box-sizing: border-box;
	width: auto;
	min-width: 15%;
	padding-right: 1em;
	white-space: nowrap;
}

#Menge {
	width: 4.5em;
}

#addToCart {
	padding-left: 2.4em;
	padding-right: 2.4em;
}

/* Aehnliche Bilder */
.similar-item {
	margin-bottom: 1.2em;
}

.similar-item a.fotos {
	line-height: 0;
	border-radius: var(--elb-radius-img);
	box-shadow: var(--elb-shadow);
	transition: box-shadow .2s ease, transform .2s ease;
}

.similar-item a.fotos:hover {
	box-shadow: var(--elb-shadow-hover);
	transform: translateY(-2px);
}

.similar-item a.fotos img {
	border-radius: var(--elb-radius-img);
}

.similar-item .addIcon {
	display: inline-block;
	margin-top: .45em;
	padding-left: 22px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%230494dc'/%3E%3Cpath d='M12 7v10M7 12h10' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 50% / 16px no-repeat;
	font-weight: 600;
}

#bestellungRight .link-add-width {
	display: inline-block;
	margin-top: .3em;
	font-weight: 600;
}
/** ENDE: Bestellformular ***********************/


/** Warenkorb *********************************************************/
#tableWarenkorb {
	border-collapse: separate;
	border-spacing: 0;
	background: var(--elb-card);
	border-radius: var(--elb-radius-lg);
	box-shadow: var(--elb-shadow);
	overflow: hidden;
}

#tableWarenkorb th {
	padding: .75em 1em;
	background: #f6f8fb;
	border-bottom: 1px solid var(--elb-line);
	color: var(--elb-muted);
	font-size: .9em;
	font-weight: 650;
	line-height: 1.4;
}

#tableWarenkorb td {
	padding: .9em 1em;
}

#tableWarenkorb tbody tr td {
	border-bottom: 1px solid var(--elb-line);
}

#tableWarenkorb tbody tr.is-old-photo td {
	border-bottom: 0;
}

#tableWarenkorb a.fotos {
	line-height: 0;
}

#tableWarenkorb a.fotos img {
	border-radius: 8px;
	box-shadow: var(--elb-shadow);
}

#tableWarenkorb input[type=tel] {
	width: 4em;
	padding: .45em .6em;
	text-align: right;
}

#tableWarenkorb .action-button {
	width: 28px;
	height: 28px;
	margin-left: .3em;
	border-radius: 8px;
	vertical-align: middle;
	background-position: 50% 50%;
	transition: background-color .15s ease;
}

#tableWarenkorb .action-button:hover {
	background-color: var(--elb-bg);
}

#tableWarenkorb .refresh-product,
#tableWarenkorb .refresh-product:hover,
#tableWarenkorb .refresh-product-active,
#tableWarenkorb .delete-product,
#tableWarenkorb .delete-product:hover {
	background-position: 50% 50%;
}

#tableWarenkorb tfoot tr:first-of-type td {
	border-top: 1px solid var(--elb-line);
}

#tableWarenkorb tfoot td {
	padding-top: .5em;
	padding-bottom: .5em;
}

#tableWarenkorb tfoot .summe {
	font-size: 1.2em;
	padding-top: .8em;
}

#tableWarenkorb tfoot tr:last-of-type td {
	padding-bottom: 1.2em;
	color: var(--elb-muted);
	font-size: .92em;
}

#hinweisAlteBilder, #tableWarenkorb td.wk-hint-old-photo {
	color: var(--elb-error);
}
/** ENDE: Warenkorb *********************************************************/


/** Kasse *********************************************************/
#kasseSchritte {
	counter-reset: elb-kasse;
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	float: none;
	margin-bottom: 1em;
}

#kasseSchritte li,
#kasseSchritte li.aktiv {
	counter-increment: elb-kasse;
	float: none;
	clear: none;
	height: auto;
	margin: 0;
	padding: .45em 1.1em .45em .45em;
	background: var(--elb-card);
	border: 1px solid var(--elb-line);
	border-radius: 999px;
	color: var(--elb-muted);
	font-size: .92em;
	font-weight: 600;
	line-height: 1.6;
}

#kasseSchritte li::before {
	content: counter(elb-kasse);
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	margin-right: .55em;
	border-radius: 50%;
	background: var(--elb-bg);
	color: var(--elb-muted);
	font-size: .9em;
	line-height: 1.6em;
	text-align: center;
}

#kasseSchritte li.aktiv {
	background: var(--elb-accent);
	border-color: var(--elb-accent);
	color: #fff;
}

#kasseSchritte li.aktiv::before {
	background: #fff;
	color: var(--elb-accent-dark);
}

#kasseSchritte a {
	color: var(--elb-accent-dark);
}

.form_kasse {
	max-width: 900px;
}

.box_versand_zahlung {
	box-sizing: border-box;
	max-width: 520px;
	width: 100%;
	padding: .75em 1em;
	margin-bottom: .6em;
	background: var(--elb-card);
	border: 1px solid var(--elb-line);
	border-radius: 12px;
}

.box_versand_zahlung::after {
	content: "";
	display: table;
	clear: both;
}

label.label_right {
	width: auto;
	color: var(--elb-ink);
}

.popup_zahlungsart {
	box-sizing: border-box;
	max-width: 900px;
	padding: 1em 1.2em;
	background: var(--elb-card);
	border: 1px solid var(--elb-line);
	border-left: 4px solid var(--elb-accent);
	border-radius: 12px;
}

#versandadresse, #rechnungsadresse {
	line-height: 1.6;
}

#formBestaetigung > div:not([class]) h2,
#formBestaetigung > h2,
#versandadresse h2, #rechnungsadresse h2 {
	display: inline-block;
	margin-right: .5em;
}

#checkboxAGB {
	padding-top: 1em;
}
/** ENDE: Kasse *********************************************************/


/** Tabelle mit Versandkosten **************************/
.tableVersandkosten {
	border-collapse: separate;
	border-spacing: 0;
	margin-top: .6em;
	background: var(--elb-card);
	border: 1px solid var(--elb-line);
	border-radius: 12px;
	overflow: hidden;
}

.tableVersandkosten td, .tableVersandkosten th {
	border: 0;
	border-bottom: 1px solid var(--elb-line);
	padding: .5em .8em;
	font-size: .9em;
}

.tableVersandkosten thead td {
	background: #f6f8fb;
	font-weight: 650;
}
/** ENDE: Tabelle mit Versandkosten **************************/


/** Footer ***********************************************/
footer,
footer.col-1 {
	margin-top: 4em;
	padding-top: 1.6em;
	padding-bottom: 1.6em;
	background: var(--elb-dark);
	color: #b8c3cf;
	text-align: center;
}

footer .navMain {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4em 1.8em;
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
}

footer a,
footer .navMain a {
	display: inline-block;
	margin: 0;
	padding: .3em 0;
	color: #dbe3eb;
	font-size: .95em;
}

footer a:hover,
footer .navMain a:hover {
	color: #fff;
}
/*** ENDE: Footer **************************************/


/** Cookie Hinweis **********************************************************/
#cookie {
	left: 12px;
	right: 12px;
	bottom: 12px;
	width: auto;
	max-width: 1040px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 1.1em 1.3em;
	background: var(--elb-card);
	border: 1px solid var(--elb-line);
	border-radius: var(--elb-radius-lg);
	box-shadow: 0 18px 50px -12px rgba(20, 33, 48, .4);
	font-size: .92em;
	line-height: 1.5;
}

#cookieText, #cookieButtons {
	width: auto;
	float: none;
	text-align: left;
}

#cookieButtons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: .6em 1.2em;
	margin-top: .6em;
}

#cookie button {
	margin: 0;
	padding: .65em 1.3em;
	border: 1px solid var(--elb-accent);
	border-radius: 999px;
	background: var(--elb-accent);
	font-family: inherit;
	font-size: 1em;
	font-weight: 650;
}

#cookie button:hover {
	background: var(--elb-accent-dark);
}

#cookie a#linkDenyCookie {
	margin-left: 0;
	color: var(--elb-muted);
	font-weight: 600;
}
/** ENDE: Cookie Hinweis ******************************************************/


/** Lightbox (fancybox) ******************************************************/
#fancybox-overlay {
	background-color: #0c141e !important;
}

#fancybox-outer {
	border-radius: var(--elb-radius-lg);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}

.fancybox-bg {
	display: none !important;
}

#fancybox-content {
	border-radius: var(--elb-radius-lg);
}

#fancybox-content img {
	border-radius: var(--elb-radius-img);
}

#fancybox-title-inside {
	padding: .2em 1em 1em;
	color: var(--elb-ink);
	font-family: var(--elb-font);
	font-size: .9em;
}
/** ENDE: Lightbox (fancybox) ******************************************************/


/** Popup-Fenster (AGB, Datenschutz, Versandkosten) **********************/
#popupWindow {
	margin: 0;
	padding-bottom: 2em;
}

#popupWindow > header {
	display: block;
}
/** ENDE: Popup-Fenster **********************/


/* bis 650px ****************************************/
@media only screen and (max-width: 650px)
{
	h1 {
		font-size: 1.35em;
	}

	body > header img {
		max-height: 44px;
	}

	#wrapWarenkorb a {
		padding: .55em .9em;
		font-size: .9em;
	}

	#sectionSearch .searchFields {
		padding-left: .9em;
	}

	#sectionSearch .searchFilter {
		padding-left: .7em;
		padding-right: 2em;
		background-position: right .6em center;
		font-size: .85em;
	}

	#sectionSearch .searchTerm {
		font-size: .95em;
	}

	#einfuehrung {
		padding: 1.2em;
	}

	#bestellungLeft {
		padding: 1em;
	}

	/* Warenkorb als Karten */
	#tableWarenkorb {
		background: transparent;
		box-shadow: none;
		border-radius: 0;
		overflow: visible;
	}

	#tableWarenkorb tbody tr {
		margin-bottom: .8em;
		background: var(--elb-card);
		border: 1px solid var(--elb-line);
		border-radius: var(--elb-radius);
		overflow: hidden;
	}

	#tableWarenkorb tbody tr:nth-child(even) {
		background: var(--elb-card);
	}

	#tableWarenkorb tbody tr td {
		border-bottom: 0;
	}

	#tableWarenkorb tbody td {
		box-sizing: border-box;
		width: 100%;
		padding-left: 30%;
	}

	#tableWarenkorb tbody td:before {
		top: .9em;
		left: 1em;
		color: var(--elb-muted);
		font-size: .85em;
	}

	#tableWarenkorb tfoot,
	#tableWarenkorb tfoot tr,
	#tableWarenkorb tfoot td {
		background: transparent;
	}

	.link-button-kasse {
		padding-left: 1.6em;
		padding-right: 1.6em;
	}

	#cookie {
		font-size: .85em;
	}

	#cookieButtons {
		justify-content: flex-start;
	}
}


/* ab 700px ****************************************/
@media only screen and (min-width: 700px)
{
	#sectionSearch form {
		padding-top: .2em;
	}

	header .navMain a {
		display: inline-flex;
	}

	#einfuehrung ol {
		grid-template-columns: repeat(2, 1fr);
	}

	.content-search-cols {
		padding-bottom: .9em;
	}

	/* Formular-Beschriftungen auf Hoehe der (hoeheren) Eingabefelder */
	form label.label-text,
	form label.label-select {
		margin-top: 1.15em;
	}

	#formOrder label.label-select {
		margin-top: 1.15em;
	}

	#wrapBestellungPreis label.artikel-preis {
		margin-top: 0;
	}

	#bestellungLeft {
		padding: 1.8em 2em;
	}

	.box_versand_zahlung label.no-float {
		width: auto;
	}

	footer,
	footer.col-1 {
		background: var(--elb-dark);
	}
}


/* ab 1000px ******************************************/
@media only screen and (min-width: 1000px)
{
	#einfuehrung ol {
		grid-template-columns: repeat(4, 1fr);
	}

	#bestellungLeft {
		width: calc(80% - 1.5em);
		margin-bottom: 0;
	}

	#bestellungRight {
		width: 20%;
		padding: 1.2em;
		border-left: 0;
	}

	#wrapBild a.fotos {
		float: left;
		max-width: 54%;
		margin-bottom: 0;
	}

	#wrapBild a.fotos img {
		float: none;
		max-width: 100%;
	}

	#wrapBild #bildInfo {
		width: 43%;
		margin-left: 3%;
	}
}


/* ab 1400px ******************************************/
@media only screen and (min-width: 1400px)
{
	#cookieText {
		width: auto;
		float: none;
		margin-right: 0;
	}

	#cookieButtons {
		width: auto;
	}
}