/* v3.0.0 */
@import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap');

/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/roboto_400_latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/roboto_400_latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Carter One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/carter-one.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Lumos Dark – dunkles Pendant zu Lumos */
	--lumos-dark-1: #222;                   /* Kopfleiste, Footer */
	--lumos-dark-2: #2b2b2b;                /* Cookie-Banner */
	--lumos-dark-3: #3a3a3a;                /* Akzent dunkel */
	--lumos-light-1: hsl(1, 88%, 50%);      /* Button hover (heller als Basis) */
	--lumos-light-2: hsl(1, 88%, 38%);      /* Buttons (User-Vorgabe #B50C0B) */
	--lumos-highlight1: rgba(242,244,249,.18);
	--lumos-highlight2: rgba(242,244,249,.92);

	/* Dark-Mode-Hilfsfarben */
	--lumos-bg-body: #222;
	--lumos-bg-card: #2e2e2e;
	--lumos-bg-modal: rgba(32,32,32,1);
	--lumos-bg-modal-full: rgba(32,32,32,.85);
	--lumos-fg: rgba(255,255,255,.89);
	--lumos-fg-muted: rgba(255,255,255,.6);
	--lumos-border: #444;
	--lumos-glow: rgba(229, 30, 23, 0.45);
}

/* ============================================================
   Lumos Dark – globale Dark-Mode-Overrides
   ============================================================ */
html, body {
	background: #0d0d0d !important;
	color: var(--lumos-fg);
}

/* Tabellen */
.uk-table-striped tbody tr:nth-of-type(odd) {
	background: #333 !important;
	border-top-color: #444;
	border-bottom-color: #444;
}
.uk-table th { color: var(--lumos-fg); }
.uk-table td { color: var(--lumos-fg); border-color: #3a3a3a; }

/* Modale */
.uk-modal-dialog {
	background: var(--lumos-bg-modal) !important;
	color: #fff;
}
.uk-modal-full .uk-modal-dialog {
	background: var(--lumos-bg-modal-full) !important;
	color: #fff;
}
.uk-modal-full:not(#orderFinalModal),
.uk-modal-full:not(#orderFinalModal) h2 { color: #fff; }
.uk-modal-title { color: #fff; }
.uk-alert .uk-close { color: #ddd !important; }

/* uk-light-Selektoren (Dark-Mode-Inversion für markierte Container) */
.uk-light .uk-text-muted:not(.uk-nav),
.uk-light .uk-text-muted sup {
	color: var(--lumos-fg) !important;
}
.uk-light .uk-badge { color: #fff !important; }
.uk-light .uk-label-danger,
.uk-light .orderRemove {
	background-color: #DE3B3D !important;
	color: #fff !important;
}
/*.uk-light a:not(.uk-button):not(.lumos-button):not(.ec-link-btn):not(.ec-link-btn-small):not(.ec-link-btn-large):not(.selTime):not(.selDate):not(.changeUhrzeit):not(.changeLieferung) {
	color: hsl(1, 88%, 60%) !important;
}*/

/* Inputs / Selects / Textareas */
.uk-light .uk-input,
.uk-light .uk-select:not([multiple]):not([size]),
.uk-light .uk-textarea {
	background: #2e2e2e;
	color: #fff;
	border-color: var(--lumos-border);
}
.uk-light .uk-input::placeholder,
.uk-light .uk-textarea::placeholder { color: #aaa; }
.uk-light .uk-form-label { color: var(--lumos-fg); }

/* AutoComplete-Dropdown */
.autocomplete-suggestions,
.ec-autocomplete-list {
	background: #4a4a4a !important;
	color: var(--lumos-fg) !important;
	border-color: #2a2a2a !important;
}
.autocomplete-suggestion:hover,
.ec-autocomplete-list li:hover { background: #5a5a5a !important; }

/* Tooltips, Drops, Dropdowns */
.uk-dropdown, .uk-drop {
	background: #2e2e2e;
	color: var(--lumos-fg);
	border: 1px solid var(--lumos-border);
}

/* Logo-Inversion (für dunkle Leisten, optional pro Markup einschaltbar) */
.invertOnDark {
	-webkit-filter: saturate(0) brightness(1000);
	filter: saturate(0) brightness(1000);
}


body, html, .font2 {
  font-family: "Roboto", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

h1,h2,h3,h4,h5,.font1, .lumos-button, .ec-link-btn-large {
  font-family: "Carter One", system-ui;
  font-weight: 400;
  font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--lumos-fg);
}
h3 {
	font-size: 1.2rem;
}

.uk-text-normal {
	font-family: "Roboto", serif;
}
a {
	color: var(--lumos-fg);
}

/* Kopfleiste */
#lumos-bar-kopf {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: var(--lumos-dark-1);
	color: white;
	z-index: 1000;
	transition: transform 0.3s ease-in-out;
}
#lumos-bar-kopf>div {
	max-width:1920px;
}

@media (min-width: 1200px) {
	#lumos-bar-kopf {
		height: 72px;
	}
	#lumos-bar-kopf img {
		max-height:60px;
	}
}

@media (max-width: 1199px) {
	#lumos-bar-kopf {
		height: 60px;
	}
	#lumos-bar-kopf img {
		max-height:48px;
	}
	#lumos-bar-kopf>div>nav {
		height: 60px;
	}
	.uk-navbar-toggle, .uk-navbar-item {
		min-height:0;
	}
}

/* Fussleiste */
	#lumos-footer {
		background: var(--lumos-dark-1);
	}
/* Order Fußleiste */
	#lumos-bar-order {
		position: fixed;
		bottom: 0;
		left: 0;
		height:66px;
		width: 100%;
		background: var(--lumos-bg-card);
		color: #fff;
		text-align: center;
		border-top: 1px solid #3a3a3a;
	}

	@media (min-width: 960px) {
		#lumos-bar-order>div {
			margin-left:200px;
		}
	}

/* Layout */
	#lumos-content-container {
		display: flex;
		flex-direction: row;
    	align-items: flex-start;
		margin-top: 100px; 
		min-height: 100vh;
		max-width: 1920px;  
		width: 100%;        
		margin-left: auto;  
		margin-right: auto;
	}

	#lumos-bar-links {
		/*width: 200px;
		min-width:200px;
		max-height:100vh;
		overflow-y:auto;
		align-self: flex-start; */
		max-height:100vh;
		flex: 0 0 200px; /* Feste Breite */
		overflow-y: auto; /* Scroll aktivieren */
		z-index: 10; /* Stellt sicher, dass die Sidebar über dem Content bleibt */
		position: relative; /* Verhindert Überlappung */
		position: sticky;
    	top: 100px; /* UK-Offset */

	}

	#lumos-bar-links li:hover {
		background-color: var(--lumos-highlight1);
		border-radius:8px;
	}
	.lumos-bar-links-active {
		background-color: var(--lumos-light-2);
		border-radius:8px;
	}
	#lumos-bar-links li a {
		color: var(--lumos-fg);
		padding:0.5rem;
		font-size: 1.125rem;
		line-height: 1.75rem;
	}
	#lumos-bar-rechts {
		width: 300px;
		min-width:300px;
		max-height:100vh;
		align-self: flex-start; 
		top: 100px;z-index: 10;
    	position: sticky;
	}
	#lumos-content {
		flex-grow: 1;
		min-width:0;
		min-height:90vh;
	}
	.lumos-content-container-small {
			max-width:1440px!important;
	}
	.lumos-widget {
		max-height: calc(100vh - 200px);
		overflow-y: auto;
	}
	@media (max-width: 1199px) {
		#lumos-content-container {
			margin-top: 44px;
		}
	}
	#categoryModal li a {
		color: var(--lumos-fg);
		padding:0.5rem;
	}
	#categoryModal li a:hover {
		background-color: var(--lumos-highlight2)!important;
		border-radius:8px;
	}

	#lumos-cookie {
		background:var(--lumos-dark-2);
	}
	#orderSchritt0 .uk-card, .askForTime .uk-card {
		background: var(--lumos-bg-card);
		color: var(--lumos-fg);
		border: 1px solid #3a3a3a;
	}

/* Cards & Order-Boxen im Dark-Theme */
	.uk-card-default,
	.ec-card,
	.ec-bg,
	.ec-pfand-auswahl,
	.ec-order-bottom {
		background: var(--lumos-bg-card);
		color: var(--lumos-fg);
		border: 1px solid var(--lumos-border);
		box-shadow: none;
	}
	.ec-card .uk-text-muted,
	.ec-bg .uk-text-muted,
	.ec-pfand-auswahl .uk-text-muted {
		color: var(--lumos-fg-muted) !important;
	}

/* artikel card */
	.lumos-shadow {
		box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
	}
	.lumos-card>div {
		background: var(--lumos-bg-card);
		border-radius:8px;
		width:100%;
	}
	.lumos-artikel-titel p {
		margin-bottom:0;
		color: var(--lumos-fg);
		font-size:1.1rem;
	}
	.lumos-artikel-titel p{
		margin: 10px 0 5px 0;
	}
	.lumos-artikel-titel,.lumos-artikel-preis,.lumos-artikel-descr {
		padding: 0 16px;
	}
	.lumos-card .lumos-button:not(.lumos-button-short) {
		width:100%;
	}
	.lumos-artikel-descr {
		margin-bottom:60px;
	}
	
	.ec-bg-reverse:not(li) {
		background-image: linear-gradient(to top, hsl(1, 88%, 28%) 0%, hsl(1, 88%, 45%) 100%);
		color: #fff;
	}
	.ec-bg-reverse:not(div) {
		background-image: linear-gradient(to top, hsl(1, 88%, 28%) 0%, hsl(1, 88%, 45%) 100%);
		color: #fff;
		border-radius: 8px;
		padding: 8px 8px 4px 8px;
		border: none;
	}
	.ec-product-img-circle {
		border-radius:50%;
	}
	.ec-product-hinweis {
		font-size: 75%;
        font-style: italic;
        color: #ca5d28;
    }

/* buttons */
	.lumos-button, .ec-link-btn-large, .ec-link-btn, .ec-link-btn-small {
		background-color: var(--lumos-light-2)!important;
		text-transform: none;
		font-size:1rem;
		letter-spacing: 1px!important;
		border:none;
		border-radius:8px;
		font-weight:400!important;
		text-align: center!important;
		color:#fff!important;
		transition: background-color .25s ease, box-shadow .25s ease, filter .25s ease, transform .15s ease;
	}
	.lumos-button:hover, .ec-link-btn-large:hover, .ec-link-btn:hover, .ec-link-btn-small:hover {
		background-color: var(--lumos-light-1);
		border:none;
		color:#fff!important;
		filter: brightness(1.08);
	}
	.lumos-button:active, .ec-link-btn:active, .ec-link-btn-large:active, .ec-link-btn-small:active {
		transform: translateY(1px);
	}
	.lumos-button-muted {
		background-color: #3a3a3a;
		text-transform: none;
		letter-spacing: 1px;
		border:none;
		border-radius:8px;
		color: var(--lumos-fg);
		text-align: left;
		font-size: .875rem;
		padding: 0 20px!important;
	}
	.lumos-button-muted:hover {
		background-color: #4a4a4a;
		border:none;
	}
	.uk-button-large {
		padding: 0 15px;
		line-height: 42px;
	}
	@media (max-width: 960px) {
		.uk-button-large {
			padding: 0 5px;
		}
	}
	#lumos-bar-order .uk-button-large {
		line-height:52px;
		padding: 0 16px;
	}
	.lumos-ico-topline {
		background: var(--lumos-light-2);
	  	min-height: 30px;
	  	max-height: 30px;
	  	padding: 8px;
	  	border-radius: 8px;
		color:#fff;
	}


	.lumos-ico-topline2 {
		display: flex;
		align-items: center;
		position: relative;
		text-decoration: none;
		overflow: hidden;
		transition: width 0.4s ease-in-out;
		white-space: nowrap;
		background: var(--lumos-light-2);
		min-height: 30px;
		max-height: 30px;
		padding: 4px;
		border-radius: 8px;
		color:#fff;
		width:30px;
	}

	/* Das Icon bleibt immer sichtbar */
	.lumos-ico-topline2-svg {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.lumos-ico-topline2-svg svg {
		max-width: none;
		margin-left:4px;
		color:#fff;
	}

	/* Der Text ist anfangs unsichtbar */
	.lumos-ico-topline2-text {
		opacity: 0;
		margin-left: 8px;
		transition: opacity 0.2s ease-in-out;
	}

	/* Beim Hover wächst der Button */
	.lumos-ico-topline2:hover {
		width: 140px;
	}

	/* Der Text wird sichtbar, wenn genug Platz ist */
	.lumos-ico-topline2:hover .lumos-ico-topline2-text {
		color:#fff;
		opacity: 1;
	}



	.lumos-ico {
		cursor:pointer;
		display:inline-block;
		width:18px;
		height:18px;
		padding:4px;
		font-size: .875rem;
		line-height: 1.25rem;
		border-radius:.375rem;
		text-align: center;
		background: #3a3a3a;
		color: var(--lumos-fg);
		background-size: contain;
		vertical-align: bottom;
		transition: background-color .2s ease;
	}
	.lumos-ico:hover {
		background: var(--lumos-light-2);
		color: #fff;
	}
	@media (max-width: 960px) {
		.lumos-ico, #submitOrder {
			transform: scale(0.9);
		}
	}
	.lumos-ico-large {
		width:32px;
		height:32px;
		padding:4px;
		font-size: 1rem;
		line-height: 1.5rem;
		border-radius:.375rem;
		text-align: center;
		background: #3a3a3a;
		color: var(--lumos-fg);
	}
	/* Close Button */
	.uk-modal-close-full {
  		padding: 10px !important;
	}
	.menu-btn {
		cursor: pointer;
		margin-top:5px;
	}
	.menu-btn line {
		stroke: white; 
		stroke-width: 5;
		stroke-linecap: round;
		transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
	}
	.menu-btn .top {
		transform-origin: 25px 15px; 
	}
	.menu-btn .bottom {
		transform-origin: 25px 35px;
	}
	.menu-btn.active .top {
		transform: translateY(10px) rotate(45deg);
	}
	.menu-btn.active .middle {
		opacity: 0;
	}
	.menu-btn.active .bottom {
		transform: translateY(-10px) rotate(-45deg);
	}
	.uk-icon-button {
		background:#ddd!important;
		color:#222!important;
	}
	.uk-icon-button svg {
		max-width:none!important;
	}
	/*
	.menu-btn-x {
		cursor: pointer;
	}
	.menu-btn-x line {
		stroke: black;
		stroke-width: 5;
		stroke-linecap: round;
	}
	*/


/*
	Plus- und Minus Icons
	--------------------------------------------------------
*/
	.plus-icon {
		width: 16px;
		height: 16px;
		display: inline-block;
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23fff" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg>');
		background-repeat: no-repeat;
		background-size: contain;
	}
	.minus-icon {
		width: 16px;
		height: 16px;
		display: inline-block;
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23fff" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/></svg>');
		background-repeat: no-repeat;
		background-size: contain;
	}
	.lumos-ico-input {
		background: var(--lumos-bg-card);
		color: var(--lumos-fg);
		border:none;
		width:22px;
		text-align: center;
	}

	select.uk-input {
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
	  background-position: center right 10px;
	  background-repeat: no-repeat;
	}

	.lumos-btn-add {
		padding: 2px 4px;
		border-radius: 20px;
		display: block;
		text-align: center;
		color: #fff;
		font-size: 0.8rem;
	}
	.lumos-btn-add.remove-mode {
		background: var(--lumos-light-2);
	}
	.lumos-btn-add.remove-mode:hover, .lumos-btn-add.add-mode:hover {
		background: var(--lumos-light-1);
	}
	.lumos-btn-add.add-mode {
		background: #3a3a3a;
	}

/* basket */
	.lumos-basket-options-count {
		margin: 0;
	}
	.lumos-basket-options-count:not(.uk-text-small){
		line-height:40px;
		line-height: 40px;
		border: none;
		background: none;
		width: 25px;
		text-align: center;
		font-size: 1rem;
	}
	#minicart-items {
		width:100%;
		max-height:350px;
		overflow-y:auto;
		overflow-x:hidden;
	}
	.scroll-indicator {
		height: 50px; width: 100%; background: linear-gradient(to bottom, rgba(34, 34, 34, 0), rgba(34, 34, 34, 1)); display: none;
	}
	.lumos-cart-item {
		position: relative;
		overflow: hidden;
		transition: transform 0.3s ease;
	}
	.lumos-cart-item .ec-product-img-square {
		max-width:100px;
		background-repeat: no-repeat!important;
	}
	.lumos-basket-options {
		opacity: 0;
		transition: opacity 0.2s ease-in-out;
	}

	.uk-grid-match:hover .lumos-basket-options {
		opacity: 1;
	}
	#minicart-items > div {
		padding: 5px 2px 5px 2px;
	}
	#minicart-items > div:hover {
		background: var(--lumos-highlight1);
		cursor:pointer;
	}

	/* Buttons sind standardmäßig versteckt */
	.order-actions {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		gap: 10px;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;

		/* Flexbox für gleichmäßige Höhen & Zentrierung */
		align-items: center;
	}

	/* Stellt sicher, dass alle Buttons dieselbe Höhe haben */
	.order-actions a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 70px; /* Falls nötig anpassen */
		padding: 5px 10px; /* Gleiche Polsterung für alle */
		text-align: center;
	}

	/* Auf Desktop: Buttons bei Hover anzeigen */
	@media (hover: hover) {
		.lumos-cart-item:hover .order-actions {
			opacity: 1;
			pointer-events: auto;
		}

		.lumos-cart-item:hover .order-content {
			opacity: 0.5;
		}
	}

	/* Auf Touch-Geräten: Buttons bei Klick anzeigen */
	@media (max-width: 1024px) {
		.lumos-cart-item.active .order-actions {
			opacity: 1;
			pointer-events: auto;
		}

		.lumos-cart-item.active .order-content {
			opacity: 0.5;
		}
	}

/* helper */
	.justify-between {
		display:flex;
		justify-content: space-between;		
	}
	.uk-light {
		color:#fff;
	}
	.uk-alert {
		border-radius:4px;
	}
	.ec-alert-green {
		background:linear-gradient(rgba(48, 247, 163, 0.6) 20%, rgba(20, 172, 123, 0.8) 80%)!important;
	}
	.uk-alert-success {
	  color: #edfbf6!important;
	  background: #32d296!important;
	}
	.uk-alert-danger {
	  color: #fef4f6!important;
	  background: #f0506e!important;
	}
	.uk-alert-primary {
	  color: #d8eafc!important;
	  background: #1e87f0!important;
	}
	.uk-alert-warning {
	  color: #fff!important;
	  background: var(--lumos-light-1)!important;
	}
	.ec-currentcolor {
		color: inherit;
		text-transform: none;
		background-color: transparent;
		display: inline-block;
		fill: currentcolor;
	}
	.ec-blendmode {
		mix-blend-mode: difference;
	}
    .uk-label-success, .orderSuccess {
      background-color: #32d296 !important;
      border:none;
      color: #fff !important;
      border-radius: 4px;
    }
    .addTopping svg {
      color: #fff;
    }
    .addToppingInput:disabled {
      color: #fff !important;
    }

/*	Loader  */
	.loader {
	   width: 50.4px;
	   height: 44.8px;
	   --c: linear-gradient(#ccc 0 0);
	   background: var(--c) 0%   50%,
			  var(--c) 50%  50%,
			  var(--c) 100% 50%;
	   background-size: 10.1px 100%;
	   background-repeat: no-repeat;
	   animation: loader 1s infinite linear;
	}

	@keyframes loader {
	   33% {
		  background-size: 10.1px 10% ,10.1px 100%,10.1px 100%;
	   }

	   50% {
		  background-size: 10.1px 100%,10.1px 10% ,10.1px 100%;
	   }

	   66% {
		  background-size: 10.1px 100%,10.1px 100%,10.1px 10%;
	   }
	}

/* uikit modal animation */
	.uk-modal {
		transform: translateY(100%);
		transition: transform 0.5s ease-out; /* Dauer und Art der Animation */
	}
	.uk-modal.uk-open {
		transform: translateY(0);
	}

/* Banner Slides */
	.uk-slidenav {
		background: rgba(255,255,255,0.7);
		color: #222!important;
		border: 4px solid rgba(255,255,255,0.1);
		border-radius: 50%;
	}
	@media (min-width: 961px) {
		#lumos-banner-main {
			max-height:350px;
			min-height:350px;
		}
	}
	@media (max-width: 960px) {
		#lumos-banner-main {
			margin-top:40px;
		}
	}
	#lumos-banner-main img {
		border-radius: 24px;
		object-fit: cover;
	}
	#lumos-banner-main div {
		max-height:350px;
		/*position:unset;	*/
	}
	#lumos-banner-main>div,#lumos-banner-main ul {
		max-height:350px;
	}

/* modals */
	#addToCartModal .lumos-ico-input {
		background:transparent;
	}
	#addToCartModal #orderAmount {
		color: #fff;
	}
	#addToCartModal, #categoryModal {
		background: rgba(0, 0, 0, 0.55); 
		backdrop-filter: blur(10px);
	}
	#addToCartModal>div, #categoryModal>div {
		overflow-y:auto;
		margin-top:70px;
		border-radius:32px;
		max-height:calc(100dvh - 70px)!important;
		position:relative;
		background:#000;
	}
	@media (min-width: 768px) {
		#categoryModal>div {
			left: calc(50% - 250px);
		}	
		#addToCartModal img {
			max-width: 90%;
		}
	
		#addToCartModal>div {
			max-width: 700px;
		  	margin: 0 auto;
		  	margin-top:70px;
		}
		#addToCartModal img {
			max-width: 55%;
		}
	}
	.ec-categoryModal-footer {
		position: fixed;bottom:0;left:0;width:100%;max-width:100%;
	}
	.ec-categoryModal-footer .uk-navbar-nav > li > a {
		text-transform:none;
	}
	.ec-product-addtocart {
		max-height:calc(100dvh - 70px)!important;
		overflow-y:auto;
	}
	.uk-modal-full .uk-modal-dialog {
	  background: rgba(0, 0, 0, 0.4);
	  backdrop-filter: blur(10px);
		max-height:100dvh!important;
	}
    
    @media (max-width: 960px) {
        .lumos-mobile-artikel-footer #orderAnzahl {
            margin-top:-7px;
        }
    }

/* Footer */
	.lumos-mobile-artikel-footer {
		position: sticky;
    	bottom: 0;
		max-width:100%;
		padding: 24px;
		background: #000;
		color: var(--lumos-fg);
	}
	.lumos-logo-fuss {
		max-width:130px;
	}
	#ec-footer-logo {
		-webkit-filter: saturate(0) brightness(1000);
		filter: saturate(0) brightness(1000);
		max-width:120px;
	}

/* Forms */
	.lumos-form-title {
		font-weight: bold;
		margin-bottom: 2px;
	}
	.lumos-form-input {
		margin-top: 0px;
	}
	.uk-input:focus {
		border: none;
		background: #3a3a3a;
		color: #fff;
	}
	.autocomplete-suggestions {
		background: #4a4a4a;
		color: var(--lumos-fg);
		padding:4px;
	}
	.autocomplete-suggestion {
		padding:4px;
		cursor: pointer;
	}
	.autocomplete-suggestion:hover {
		background: #5a5a5a;
	}

/* Basket anmiation */
  .particle {
      position: absolute;
      font-size: 20px;
      opacity: 1;
      animation: explode 0.6s ease-out forwards;
  }

  @keyframes explode {
      0% { transform: translate(0, 0) scale(1); opacity: 1; }
      50% { opacity: 1; }
      100% { transform: translate(var(--x), var(--y)) scale(0.5); opacity: 0; }
  }


/* Empty-Cart: schlafende Pizza */
	#lumos-face {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	#lumos-face .pizza-stage {
		display: flex;
		justify-content: center;
		padding: 1rem 0;
		cursor: pointer;
		--pizza-max: 220px;
		--pizza-crust: #d4a574;
		--pizza-cheese: #f5d76e;
		--pizza-line: #4a2c14;
		--pizza-pep: #b8362b;
	}
	#lumos-face .pizza-stage svg {
		width: 100%;
		max-width: var(--pizza-max);
		height: auto;
		display: block;
		overflow: visible;
	}

	@keyframes pizza-breathe {
		0%, 100% { transform: scaleY(1); }
		50%      { transform: scaleY(0.97); }
	}
	@keyframes pizza-floatz {
		0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
		15%  { opacity: 1; }
		100% { transform: translate(35px, -110px) scale(1.3); opacity: 0; }
	}
	@keyframes pizza-wiggle {
		0%, 88%, 100% { transform: translate(0, 0) rotate(0); }
		94%           { transform: translate(2px, 3px) rotate(7deg); }
	}
	@keyframes pizza-mouthpuff {
		0%, 40%, 100% { transform: scale(1, 1); }
		20%           { transform: scale(1.15, 1.25); }
	}
	@keyframes pizza-look {
		0%, 100% { transform: translate(0, 0); }
		35%      { transform: translate(2px, -1px); }
		65%      { transform: translate(-2px, 1px); }
	}

	#lumos-face .pizza-bounce {
		transform-origin: 340px 240px;
		transform: rotate(-9deg);
		transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
	}
	#lumos-face .pizza-body {
		transform-origin: 340px 240px;
		animation: pizza-breathe 3.4s ease-in-out infinite;
	}
	#lumos-face .pep-wiggle {
		transform-origin: 395px 285px;
		animation: pizza-wiggle 4s ease-in-out infinite;
	}
	#lumos-face .mouth-snore {
		transform-origin: 350px 308px;
		animation: pizza-mouthpuff 3.4s ease-in-out infinite;
	}
	#lumos-face .z-letter {
		font-family: ui-rounded, system-ui, sans-serif;
		font-weight: 700;
		fill: #fff2b8;
		opacity: 0;
		animation: pizza-floatz 3s ease-out infinite;
	}
	#lumos-face .z1 { animation-delay: 0s;  font-size: 22px; }
	#lumos-face .z2 { animation-delay: 1s;  font-size: 28px; }
	#lumos-face .z3 { animation-delay: 2s;  font-size: 34px; }

	#lumos-face .face-sleeping  { opacity: 1; transition: opacity 0.18s ease-out; }
	#lumos-face .face-awake     { opacity: 0; transition: opacity 0.25s ease-out 0.12s; }
	#lumos-face .z-group        { transition: opacity 0.25s ease-out; }
	#lumos-face .surprise-bubble {
		transform-origin: 450px 175px;
		transform: scale(0);
		transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s;
	}
	#lumos-face .pupil { animation: pizza-look 2.4s ease-in-out infinite; }

	#lumos-face .pizza-stage:hover .face-sleeping,
	#lumos-face .pizza-stage.is-awake .face-sleeping  { opacity: 0; }
	#lumos-face .pizza-stage:hover .face-awake,
	#lumos-face .pizza-stage.is-awake .face-awake     { opacity: 1; }
	#lumos-face .pizza-stage:hover .z-group,
	#lumos-face .pizza-stage.is-awake .z-group        { opacity: 0; }
	#lumos-face .pizza-stage:hover .pizza-body,
	#lumos-face .pizza-stage:hover .pep-wiggle,
	#lumos-face .pizza-stage:hover .mouth-snore,
	#lumos-face .pizza-stage:hover .z-letter,
	#lumos-face .pizza-stage.is-awake .pizza-body,
	#lumos-face .pizza-stage.is-awake .pep-wiggle,
	#lumos-face .pizza-stage.is-awake .mouth-snore,
	#lumos-face .pizza-stage.is-awake .z-letter       { animation-play-state: paused; }
	#lumos-face .pizza-stage:hover .pizza-bounce,
	#lumos-face .pizza-stage.is-awake .pizza-bounce   { transform: rotate(-3deg) translateY(-10px); }
	#lumos-face .pizza-stage:hover .surprise-bubble,
	#lumos-face .pizza-stage.is-awake .surprise-bubble { transform: scale(1); }

	@media (prefers-reduced-motion: reduce) {
		#lumos-face .pizza-body,
		#lumos-face .pep-wiggle,
		#lumos-face .mouth-snore,
		#lumos-face .z-letter,
		#lumos-face .pupil {
			animation: none;
		}
	}

/*
	Payment
*/
	.ec-tab-paymethods > * > a {
	  border: none!important;
	  border-radius: 8px;
	  background: var(--lumos-dark-2);
	}
	.payment-tab,.payment-tab:hover {
		color:#fff!important;
		background: var(--lumos-light-2);
	}
.loadPaketArtikel li {
	max-width:350px;
	margin-right:30px;
}
#artikel_titel sup {
    font-size: 1rem;
    top: -1rem;
    margin-left: 4px;
}

/* Warenkorb Geschenk */
.ec-geschenk {
    display: flex;
    border:2px solid #ccc;
    border-radius:32px!important;
    padding: 4px;
    padding-right: 12px;
}
.ec-geschenk > div {
    padding: 8px;
}
.ec-geschenk img {
    width:100%;
    height:auto;
}
.ec-geschenk > div:nth-child(1){
    max-width:90px;
    max-height:100px;
}
.ec-geschenk > div:nth-child(2){
    flex: 1;
}
.ec-geschenk > div:nth-child(3){
    width:150px;
}
.ec-geschenk > div:nth-child(2) > span:nth-child(1){
    font-size:1.2rem;
    font-weight:600;
}

/* --- Mobile Breakpoint --- */
@media (max-width: 768px) {
    .ec-geschenk {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "col1 col2"
            "col1 col3";
        align-items: start;
    }
    .ec-geschenk > div:nth-child(1){ grid-area: col1; }
    .ec-geschenk > div:nth-child(2){ grid-area: col2; width:100%; }
    .ec-geschenk > div:nth-child(3){ grid-area: col3; width:100%; }
}
.uk-navbar-toggle:hover, .uk-navbar-toggle[aria-expanded="true"] {
  color: #fff;
}
#orderSchritt0,#modal3,#zusammenfassung {
	background:transparent;
}
#orderSchritt1 { padding: 10px; }
.ec-product-img-circle {
  filter: drop-shadow(10px 10px 8px #222);
}
.ec-product-addtocart {
	background:#0d0d0d !important;
}