:root {
	--background-image: url("https://arsamatoria.de/wp-content/uploads/2026/01/arsamatoria-events-bodies-anatomical-1536x1151-jpg.webp");
}

/*Allgemeine Anweisungen*/

/*Body.Events ist Selector für die Veranstaltungstabelle
nth-child ist zweifarbige Tabelle
hover ist Färbung bei Kontakt mit Maus
Wort nach Selector ist ein Tag (a; div; .th;)
Befehl !important legt höhere Priorität fest*/

html,body {
	height: 100%;
	overflow: hidden;
}

body {
	min-height: 100vh;
	background-image: var(--background-image);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	overscroll-behavior: none;
	overflow-y: auto;
}


div#main {
	position: relative;
	padding: 40px !important;
	margin-top: 50px;
	border-radius: 1rem !important;
	position: relative !important;
	--border-width: 5px !important;
	background: #1D1C30aa !important;
	-webkit-backdrop-filter: blur(12px) !important;
	backdrop-filter: blur(12px) !important;
	overflow: hidden;
	z-index:0;
}

div#main::before {
	position: absolute;
	display: block;
	content: "";
	inset: 0;
	border-radius: 1rem !important;
	pointer-events: none;
	z-index: 0;
	padding: 2px;
	background: linear-gradient(145deg, #ede0f666, #272540e6) border-box,
	linear-gradient(#0000 0 0) padding-box;
	-webkit-mask: linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

div#main #logo {
	width: calc(100% + 80px);
	margin-left: -40px;
	margin-right: -40px;
	margin-top: -40px;
}

body.events .th  {
	background-color:#1D1C30aa!important;
	color:#d9d9d9
}

.th {
	background-color: #1D1C30aa !important;
	color:#d9d9d9
} 

body.events .th  {
	background-color:1D1C30aa!important;
	color:#d9d9d9;
}

body > div > div > .w3-row:not(.ticket),
body > div > form > div > .w3-row,
body > div > div > .w3-cell-row:not(#footer),
#subtotal,
#customer,
.bo.mt12{
	background: #1D1C3055 !important;
	border-color: #1D1C30AA !important;
}


/*Logo und Name des Mandanten auf events ausblenden*/
body.events span.title, body.events div#logo {display:none}

/*Rahmen ausblenden*/
body.events .bo {border:0}
body.events .event {border-top:0!important}

/*Padding einzelne Veranstaltungen*/
body.events .w3-row {padding: 2px 0px}

/*Andere Hintergrundfarbe jede zweite Reihe*/
body.events div#calendar div.w3-row.even{
    background-color: #262626
	}
	
/*Farbe beim drüberrollen mit der Maus*/
body.events div#calendar div.w3-row:not(:first-child):hover {
    background-color: #FFBD16;
    color:#000000;
	}
body.events div#calendar div.w3-row:hover a {
    background-color: #FFBD16;
    color:#000000 !important;
	}
body.events div#calendar div.w3-row:hover button {
    background-color: #ffffff !important;
    color:#000000 !important;
	}


/*Gestaltung der Felder -weitere Veranstaltungen- */
body.events #pagination a:hover {background-color:#FFBD16;color:black}
body.events #pagination a.active {background-color: #FFBD16!important;color:black}

/*Gestaltung der Buttons*/
.w3-button {
    border-radius: 0;
	background: none !important;
	color: white !important;
}

.formbuttons.mt {
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between;
	width: 100%;
	gap: 5px;
	
}

button[type=submit], .w3-button.btn-next {
	background: #a234b955 !important;
	color: white !important;
	order: 2;
	align-self: flex-end;
	font-weight: 600;
}
button[type=button] {
	order: 1;
	color: white !important;
}

.add-tickets {
	display: none;
}

.w3-button:hover {
	background-color: #ffffff22 !important;
	color: white !important;
}

.w3-button.btn-next:hover {
	background-color: #a234b9 !important;
	color:white!important
}

/* inputs */

#main input,
#main .w3-select,
#main textarea{
	color-scheme: dark;
	background: #1D1C30aa;
	border: none !important;
	
}

input[type=number] {
	color: white;
	appearance: auto;
	-webkit-appearance: auto;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	opacity: 1;
	-webkit-appearance: inner-spin-button;
	margin: 0;
	padding: 0;	
}

#main input[type=number][name^=freeSeats] {
	border-color: #a234b9 !important;
	border-style: solid !important;
}

.w3-cell.w3-right.input {
	position: relative;
}

.w3-cell.w3-right.input::after {
	content: "Anzahl wählen";
	color: white;
	position: absolute;
	left: 0;
	top: -20px;
	font-size: 10px;
	pointer-events: none;
}

/*.w3-cell.w3-right.input:has(input[type=number][name^=freeSeats]:valid)::after {
	display: none;
}*/

/* ERROR MESSAGE */

div p.error {
	background: linear-gradient(145deg, #bc557300 10%, #bc5573 30%, #bc5573 70%, #bc557300 90%);
}

/*Weitere allgemeine Angaben */

/*Hintergrundfarbe der aktiven Preiskategorie*/
.Basket.prices div.prices-item.active, .Shop.prices div.prices-item.active {
    background-color: #a234b955 !important;
}

/*Gestaltung der Links*/
a { 
	text-decoration:none; 
	color:#d9d9d999;
}

a:hover { 
	text-decoration:none !important; 
	color: #ffffffaa;
}

/* legal footer */

#legals {
	display: flex;
	justify-content: space-between;
}

#legals::before {
	content: "";
}

#legals a{
	font-size: 10px;	
}

/* ticket description */

.Basket.event div.category div.pk-desc {
	margin-left: -100% !important;
	color: #ffffff55;
}


/*.w3-modal-content sind die Infofenster Ausverkauft usw*/
.w3-modal-content {
	color:white; 
	background-color: #1D1C30;
	width: 80%;

}

.w3-modal-content p{
	text-align: center;
}

.w3-modal-content footer{
	margin: 0 20%;
	text-align: right;
}

.w3-modal-content header{
	background-color:#a234b955!important; 
	color:white;
}
.w3-modal-content header h2{
	text-transform: lowercase;
	font-weight: 800 !important;
}

/*Gestaltung der Überschriften vom Typ h2*/
#main .title h2 {
	text-align: left !important;
	font-weight: 600;
	text-transform: lowercase;
}

/* SUBTITLE */

.subtitle {
	color: #ffffff77;
}

.desc {
	color: #ffffff77;	
}

/* BREADCRUMBS */

#breadcrumb {
	display: flex;
	flex-direction: row;
}

#breadcrumb div {
	flex: 1;
	border: none !important;
	padding: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 10px;
}

#breadcrumb div.active {
	flex-grow: 1.5;
	background-color: #e247ff33;
	font-size: 14px;
}

/*Hintergrund Eingabemaske Customer*/
body.customer #customer {background-color:#323030}

/*social Media Rahmen und Überschrift weg*/
div#socialmedia{border:0}
 div#socialmedia .th {display:none}

#poweredby {
display:none;
}